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

feat(billing): on-card charge/pay badge slots for models & instance types
Add the plugin-fed billing price-badge slots to the model cards and the gpu-instance-type / storage cards so the enterprise plugin can surface charge / pay indicators inline.
2026-07-22 02:36:57 +00:00 · 2026-07-22 09:46:11 +08:00 · 2026-07-20 20:24:28 +08:00 · 2026-07-20 20:24:28 +08:00 · 2026-07-20 20:24:28 +08:00 · 2026-07-20 20:24:28 +08:00
55 changed files with 968 additions and 397 deletions
@@ -124,13 +124,24 @@ Always check `@gpustack/core-ui` first. Frequently reused:
 - **Form fields**: `BaseSelect`, `Input` (labeled).
 - **Text overflow**: `AutoTooltip`.
 - **Icons**: `IconFont`.
- **Status display** (success/failed/processing/warning): `StatusTag`.
+- **Tags & status** (4 variants): see the section below.
 - **Permission-gated visibility**: `Access` / `useAccess`.
 - **Request hooks**: `useRequest` / `useQueryData` / `useQueryDataList`.
 - **Table data fetching**: `useTableFetch`.
 - **Submit guard** (prevent double-submit): `useSubmitLock`.
 - **Tabbed forms**: `ScrollSpyTabs`.

+# Tags & status indicators
+
+Four core-ui components cover tag/status display in tables and lists. Pick by **what the value means**, not by how it looks — don't reach for a generic antd `Tag`:
+
+- **`StatusTag`** — semantic status with a **dynamic message/detail** (tooltip, download, extra content). Use when a row's status carries variable text, e.g. a failed job with an error message. Colors come from `StatusColorMap` (error/warning/transitioning/success/inactive).
+- **`StatusDot`** — colored dot + short label, **no message**. Use for a plain status/type cell where the value is a fixed enum (e.g. an event-type or log column). Same `StatusColorMap` palette; `inactive` dot is quaternary. If the status needs dynamic text, use `StatusTag` instead.
+- **`ThemeTag`** — a **standalone category label** (independent content, e.g. a permission scope or a model name). Default neutral; wraps antd `Tag`.
+- **`TextAttribute`** — a small neutral pill that is a **subordinate annotation following a primary text** (e.g. `key-name [custom]`), not a standalone tag. Manages its own leading margin. Two variants: `filled` (default) and `outlined`. Ref the name column in `src/pages/api-keys/hooks/use-keys-columns.tsx`.
+
+Rule of thumb: semantic + dynamic text → `StatusTag`; semantic + fixed enum → `StatusDot`; independent category → `ThemeTag`; annotation of nearby text → `TextAttribute`.
+
 # 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:
@@ -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.36",
+    "@gpustack/core-ui": "^1.0.41",
    "@huggingface/gguf": "^0.1.7",
    "@huggingface/hub": "^0.15.1",
    "@huggingface/tasks": "^0.11.6",
@@ -24,8 +24,8 @@ importers:
        specifier: ^7.1.1
        version: 7.1.2
      '@gpustack/core-ui':
-        specifier: ^1.0.36
-        version: 1.0.36(czdvzceysqw7iv6pct2ucnb23e)
+        specifier: ^1.0.41
+        version: 1.0.41(czdvzceysqw7iv6pct2ucnb23e)
      '@huggingface/gguf':
        specifier: ^0.1.7
        version: 0.1.18
@@ -1481,8 +1481,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.36':
-    resolution: {integrity: sha512-gF8ShMZ2SKYo3+skfsI3zo+aBSsXqKGMX+jWaKv81e38bDwJw71C33TR64d+6MyV9iUoFOoSK+ht1GefyvR17g==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.36.tgz}
+  '@gpustack/core-ui@1.0.41':
+    resolution: {integrity: sha512-Q4mgdjZpvuE5XDioV7MHoVVHK6k7LNzVkq0zGVln1IzAYW7ldpzQPoj/zARXqGWQLAvHLiO03PfEjiP8cE9fdQ==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.41.tgz}
    peerDependencies:
      '@ant-design/icons': ^6.1.0
      '@ant-design/pro-components': 3.1.0-0
@@ -10802,7 +10802,7 @@ snapshots:

  '@formatjs/intl-utils@2.3.0': {}

-  '@gpustack/core-ui@1.0.36(czdvzceysqw7iv6pct2ucnb23e)':
+  '@gpustack/core-ui@1.0.41(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)
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <!-- 顶面填充（亮面，高透明度） -->
+    <linearGradient id="cube-top-grad" x1="12" y1="2" x2="12" y2="12" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f759ab" stop-opacity="0.18"/>
+      <stop offset="100%" stop-color="#c41d7f" stop-opacity="0.1"/>
+    </linearGradient>
+    <!-- 左侧面填充（暗面，低透明度） -->
+    <linearGradient id="cube-left-grad" x1="2" y1="7" x2="12" y2="17" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#c41d7f" stop-opacity="0.12"/>
+      <stop offset="100%" stop-color="#c41d7f" stop-opacity="0.04"/>
+    </linearGradient>
+    <linearGradient id="cube-stroke-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f759ab"/>
+      <stop offset="100%" stop-color="#c41d7f"/>
+    </linearGradient>
+  </defs>
+  <!-- 顶面填充 -->
+  <polygon points="12,2 21.5,6.7 12,11.5 2.5,6.7" fill="url(#cube-top-grad)" />
+  <!-- 左侧面填充 -->
+  <polygon points="2.5,6.7 12,11.5 12,21.3 2.5,16.5" fill="url(#cube-left-grad)" />
+  <!-- 立方体全纯线外骨架（细化为圆角衔接） -->
+  <path d="M12 2L2.5 6.7M12 2l9.5 4.7M21.5 6.7L12 11.5M2.5 6.7L12 11.5M2.5 6.7v9.8l9.5 4.8M21.5 6.7v9.8l-9.5 4.8M12 11.5v9.8" stroke="url(#cube-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <!-- 1. 定义专属微通透渐变填充 -->
+    <linearGradient id="img-fill-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#d46b08" stop-opacity="0.12"/>
+      <stop offset="100%" stop-color="#d46b08" stop-opacity="0.04"/>
+    </linearGradient>
+    <!-- 2. 定义边框高精度渐变（亮橙到深橙，拉开层次） -->
+    <linearGradient id="img-stroke-grad" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#fa8c16"/>
+      <stop offset="100%" stop-color="#d46b08"/>
+    </linearGradient>
+  </defs>
+  <!-- 3. 精装底色充填层 -->
+  <rect x="3" y="3" width="18" height="18" rx="4" fill="url(#img-fill-grad)" />
+  <!-- 4. 高级柔和微圆角边框层 -->
+  <rect x="3" y="3" width="18" height="18" rx="4" stroke="url(#img-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- 内部几何现代山脉线条 -->
+  <path d="M3 16l4-4a2 2 0 0 1 2.8 0l5.2 5.2M13 15l2.5-2.5a2 2 0 0 1 2.8 0l2.7 2.7" stroke="url(#img-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- 标志性通透小钻石 -->
+  <rect x="14" y="6" width="4" height="4" rx="1.5" transform="rotate(45 16 8)" fill="#fa8c16" fill-opacity="0.3" stroke="url(#img-stroke-grad)" stroke-width="1"/>
+</svg>
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <linearGradient id="chat-fill-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#389e0d" stop-opacity="0.1"/>
+      <stop offset="100%" stop-color="#389e0d" stop-opacity="0.02"/>
+    </linearGradient>
+    <linearGradient id="chat-stroke-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#73d13d"/>
+      <stop offset="100%" stop-color="#389e0d"/>
+    </linearGradient>
+  </defs>
+  <!-- 主现代对话框体（全部改为圆润R角，精装填充） -->
+  <path d="M18 4H6a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h7.5l3.5 3.5a1 1 0 0 0 1.5-.5V17a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3z" fill="url(#chat-fill-grad)" stroke="url(#chat-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- 内部通透对话线条（细化为圆角代码采样块感） -->
+  <rect x="7" y="8" width="8" height="1.5" rx="0.75" fill="#73d13d" fill-opacity="0.3"/>
+  <rect x="7" y="11.5" width="10" height="1.5" rx="0.75" fill="#73d13d" fill-opacity="0.2"/>
+</svg>
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <linearGradient id="rank-fill-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#08979c" stop-opacity="0.1"/>
+      <stop offset="100%" stop-color="#08979c" stop-opacity="0.01"/>
+    </linearGradient>
+    <linearGradient id="rank-stroke-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#36cfc9"/>
+      <stop offset="100%" stop-color="#08979c"/>
+    </linearGradient>
+  </defs>
+  <!-- 数据权重条（全部改为高级圆角） -->
+  <rect x="11" y="4" width="10" height="2.5" rx="1.25" fill="#36cfc9" fill-opacity="0.1" stroke="url(#rank-stroke-grad)" stroke-width="1.5"/>
+  <rect x="11" y="9" width="7.5" height="2.5" rx="1.25" fill="#36cfc9" fill-opacity="0.05" stroke="url(#rank-stroke-grad)" stroke-width="1.5"/>
+  <rect x="11" y="14" width="5" height="2.5" rx="1.25" stroke="url(#rank-stroke-grad)" stroke-width="1.5"/>
+  <!-- 基准线与立体双向指引箭头（优化为圆角） -->
+  <path d="M3 17l3 3 3-3M6 4v16" stroke="url(#rank-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.5 5.5L6 4l1.5 1.5" stroke="url(#rank-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <linearGradient id="stt-fill-grad" x1="12" y1="3" x2="12" y2="14" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#40a9ff" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="#1677ff" stop-opacity="0.05"/>
+    </linearGradient>
+    <linearGradient id="stt-stroke-grad" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#40a9ff"/>
+      <stop offset="100%" stop-color="#1677ff"/>
+    </linearGradient>
+  </defs>
+  <!-- 麦克风核心体：精装通透填充 -->
+  <rect x="8.5" y="3" width="7" height="11" rx="3.5" fill="url(#stt-fill-grad)" stroke="url(#stt-stroke-grad)" stroke-width="1.8" />
+  <!-- 内部音膜立体结构线（细化为点状） -->
+  <line x1="10" y1="8" x2="14" y2="8" stroke="url(#stt-stroke-grad)" stroke-width="1" stroke-dasharray="1 2"/>
+  <!-- 悬挂外托架与底座（全部改为高级圆角） -->
+  <path d="M5 10a7 7 0 0 0 14 0M12 17v4M8 21h8" stroke="url(#stt-stroke-grad)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <defs>
+    <!-- 1. 核心高通透深蓝渐变充填 -->
+    <linearGradient id="tts-v2-fill" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#2f54eb" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="#1d39c4" stop-opacity="0.03"/>
+    </linearGradient>
+    <!-- 2. 精准调校的专属蓝色渐变边框 -->
+    <linearGradient id="tts-v2-stroke" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#2f54eb"/>
+      <stop offset="100%" stop-color="#1d39c4"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- 左侧：低频辅助声波（大间距，带现代圆角） -->
+  <rect x="4" y="8" width="2.2" height="8" rx="1.1" stroke="url(#tts-v2-stroke)" stroke-width="1.8" stroke-linecap="round"/>
+  
+  <!-- 中央：核心高频声波主体（拉大宽度，注入通透水晶质感） -->
+  <rect x="10.4" y="2" width="3.2" height="20" rx="1.6" fill="url(#tts-v2-fill)" stroke="url(#tts-v2-stroke)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  
+  <!-- 右侧：高频衰减声波（保持几何对称与呼吸感） -->
+  <rect x="17.8" y="5" width="2.2" height="14" rx="1.1" stroke="url(#tts-v2-stroke)" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,3 @@
+.ant-alert-with-description .ant-alert-title {
+  line-height: 1;
+}
@@ -1,4 +1,5 @@
@import './table.less';
+@import './alert.less';

 .m-b-20 {
  margin-bottom: 20px;
@@ -9,6 +9,15 @@
  }
 }

+@keyframes tableEmptyFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .scroll-table {
  .ant-table {
    .ant-table-container {
@@ -18,5 +27,27 @@
        scrollbar-color: var(--color-scrollbar-thumb) transparent;
      }
    }
+
+    // Reserve a stable block for the empty/loading state so the first-load
+    // spinner and the empty result occupy the same height as eventual data —
+    // this removes the layout jump when entering the page. Scoped to
+    // `.ant-table-content` so it only targets x-scroll tables (whose empty
+    // row lives here) and leaves fixed-height `scroll.y` tables untouched.
+    // Height must match the `minHeight` passed to <NoResult> in
+    // use-no-resource-result.
+    .ant-table-content {
+      .ant-table-placeholder {
+        > .ant-table-cell {
+          height: calc(100vh - 300px);
+        }
+
+        // NoResult renders nothing while loading and mounts an <Empty> only
+        // once the request settles, so this fires exactly when the empty
+        // state appears — a seamless fade-in instead of a hard pop.
+        .ant-empty {
+          animation: tableEmptyFadeIn 0.3s ease-in-out;
+        }
+      }
+    }
  }
 }
@@ -43,6 +43,10 @@ export default {
    DatePicker: {
      fontSizeLG: 14
    },
+    Alert: {
+      withDescriptionPadding: '12px 16px',
+      withDescriptionIconSize: 18
+    },
    Menu: {
      iconSize: 16,
      iconMarginInlineEnd: 12,
@@ -26,8 +26,8 @@ export default {
      cellPaddingInline: 16,
      cellPaddingBlock: 6,
      cellFontSize: 14,
-      rowSelectedHoverBg: 'rgb(249 249 249)',
-      rowHoverBg: 'rgb(249 249 249)',
+      rowSelectedHoverBg: 'rgb(247 247 247)',
+      rowHoverBg: 'rgb(247 247 247)',
      rowSelectedBg: 'transparent',
      headerSortActiveBg: 'transparent',
      headerSortHoverBg: 'transparent',
@@ -47,6 +47,10 @@ export default {
    DatePicker: {
      fontSizeLG: 14
    },
+    Alert: {
+      withDescriptionPadding: '12px 16px',
+      withDescriptionIconSize: 18
+    },
    Menu: {
      iconSize: 16,
      iconMarginInlineEnd: 12,
@@ -116,7 +120,7 @@ export default {
    borderRadiusLG: 6,
    borderRadius: 4,
    borderRadiusSM: 3,
-    colorBgContainer: '#fff',
+    colorBgContainer: '#fdfdfd',
    fontSize: 14,
    motion: true
  }
@@ -21,8 +21,6 @@ html {
  --color-fill-sider: #f4f5f4;
  --color-bg-1: #f4f5f4;
  --color-scroll-bg: #d9d9d9;
-  --color-fill-2: #fff;
-  --color-fill-3: #f3f6fa;
  --color-logs-bg: #1e1e1e;
  --color-logs-text: #d4d4d4;
  --layout-content-blockpadding: 24px;
@@ -76,7 +74,6 @@ html {
  --ant-rate-star-color: #fadb14;
  --color-fill-spin-bg: rgba(255, 255, 255, 15%);
  --width-tooltip-max: 420px;
-  --color-bg-tooltip: '#fff';
  --color-modal-content-bg: rgba(255, 255, 255, 90%);
  --color-modal-box-shadow: 0 4px 16px rgba(0, 0, 0, 10%);
  --color-spotlight-bg: rgba(255, 255, 255, 100%);
@@ -91,6 +88,7 @@ html {
  // ======== container ============
  --color-border-container: #ededed;
  --color-text-table-header: #71717a;
+  --seal-table-row-min-height: 68px;
 }

 html[data-theme='realDark'] {
@@ -100,7 +98,6 @@ html[data-theme='realDark'] {
  --color-editor-dark: #00101f;
  --color-editor-light: #fafafa;
  --color-fill-spin-bg: rgba(55, 55, 55, 50%);
-  --color-bg-tooltip: #424242;
  --color-editor-header-bg: #292929;
  --color-progress-text: rgba(255, 255, 255, 80%);
  --color-modal-content-bg: #1f1f1f;
@@ -115,19 +112,9 @@ html[data-theme='realDark'] {
  .ant-result-image {
    opacity: 0.9;
  }
-
-  .ant-pro-page-container-affix .ant-pro-page-container-warp {
-    background-color: #292929 !important;
-    transition: none !important;
-  }
 }

 html[data-theme='light'] {
-  .ant-pro-page-container-affix .ant-pro-page-container-warp {
-    background-color: #fff !important;
-    transition: none !important;
-  }
-
  background-color: #f4f5f6;
 }

@@ -210,7 +197,7 @@ body {

    tr > td {
      border-bottom: none;
-      height: 68px;
+      height: var(--seal-table-row-min-height);
    }
  }

@@ -40,6 +40,11 @@ export default function useWatchList<T = Record<string, any>>(API: string) {
    }
  });

+  const cancelWatch = useMemoizedFn(() => {
+    chunkRequestRef.current?.current?.cancel?.();
+    listRequestTokenRef.current?.cancel?.();
+  });
+
  const queryAllDataList = async (
    params: Global.SearchParams,
    options?: any
@@ -78,14 +83,15 @@ export default function useWatchList<T = Record<string, any>>(API: string) {
  useEffect(() => {
    createWatchChunkRequest();
    return () => {
-      chunkRequestRef.current?.cancel?.();
-      listRequestTokenRef.current?.cancel?.();
+      cancelWatch();
    };
  }, []);

  return {
    watchDataList,
    setWatchDataList,
+    startWatch: createWatchChunkRequest,
+    cancelWatch,
    deleteItemFromCache: handleDeleteItemFromCache
  };
 }
@@ -0,0 +1,208 @@
+import { convertFileSize } from '@/utils';
+import { useIntl } from '@umijs/max';
+import { Flex, Popover, theme } from 'antd';
+import { createStyles } from 'antd-style';
+import type { GlobalToken } from 'antd/es/theme';
+import React from 'react';
+
+export interface DualArcGaugeItem {
+  index: number;
+  label?: string;
+  memory: {
+    total: number; // bytes
+    used: number; // bytes — outer arc (semantic color)
+    allocated: number; // bytes — inner arc (blue)
+  };
+}
+
+interface DualArcGaugeProps {
+  data: DualArcGaugeItem[];
+}
+
+// guage external radius: 20, internal radius: 16, stroke width: 2
+const CX = 25;
+const CY = 24;
+const R_OUT = 20;
+const R_IN = 16;
+const SW = 2.5;
+const L_OUT = Math.PI * R_OUT;
+const L_IN = Math.PI * R_IN;
+const arcPath = (r: number) =>
+  `M ${CX - r} ${CY} A ${r} ${r} 0 0 1 ${CX + r} ${CY}`;
+const P_OUT = arcPath(R_OUT);
+const P_IN = arcPath(R_IN);
+
+const clamp01 = (n: number) => Math.min(Math.max(n, 0), 1);
+
+// Used color: green < 75%, yellow < 90%, red >= 90%
+const usedColor = (ratio: number, token: GlobalToken) => {
+  if (ratio >= 0.9) return token.colorError;
+  if (ratio >= 0.75) return token.colorWarning;
+  return token.colorSuccess;
+};
+
+const useStyles = createStyles(({ css, token }) => ({
+  row: css`
+    width: fit-content;
+    padding: 3px 6px;
+    border-radius: ${token.borderRadius}px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    &:hover {
+      background-color: ${token.colorFillTertiary};
+    }
+  `,
+  index: css`
+    font-size: 12px;
+    font-weight: 500;
+    color: ${token.colorTextSecondary};
+    border-bottom: 1px dashed var(--ant-blue-6);
+    padding-bottom: 3px;
+    line-height: 1.2;
+  `,
+  popTitle: css`
+    font-size: 12px;
+    font-weight: 500;
+    color: ${token.colorText};
+    margin-bottom: 6px;
+  `,
+  popList: css`
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  `,
+  metric: css`
+    white-space: nowrap;
+  `,
+  dot: css`
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  `,
+  value: css`
+    min-width: 64px;
+    text-align: right;
+    font-weight: 500;
+    color: ${token.colorText};
+  `,
+  label: css`
+    color: ${token.colorTextTertiary};
+  `
+}));
+
+const DualArcGauge: React.FC<DualArcGaugeProps> = ({ data }) => {
+  const intl = useIntl();
+  const { styles } = useStyles();
+  const { token } = theme.useToken();
+
+  const trackColor = token.colorFillSecondary;
+  const allocColor = 'var(--ant-blue-6)';
+
+  return (
+    <Flex vertical gap={2} style={{ width: 'fit-content' }}>
+      {data.map((item) => {
+        const { total = 0, used = 0, allocated = 0 } = item.memory || {};
+        const usedR = total > 0 ? clamp01(used / total) : 0;
+        const allocR = total > 0 ? clamp01(allocated / total) : 0;
+        const pct = Math.round(usedR * 100);
+        const uc = usedColor(usedR, token);
+        // set dim color for allocated if used is 0, otherwise use the same color as used
+        const allocDotColor =
+          allocated > 0 ? allocColor : token.colorTextQuaternary;
+
+        const content = (
+          <div>
+            <div className={styles.popTitle}>
+              [{item.index}]{item.label ? ` ${item.label}` : ''} ·{' '}
+              {convertFileSize(total)}
+            </div>
+            <Flex vertical gap={4} className={styles.popList}>
+              <Flex align="center" gap={6} className={styles.metric}>
+                <span className={styles.dot} style={{ background: uc }} />
+                <span className={styles.value}>{convertFileSize(used)}</span>
+                <span className={styles.label}>
+                  {intl.formatMessage({ id: 'resources.table.used' })}
+                </span>
+              </Flex>
+              <Flex align="center" gap={6} className={styles.metric}>
+                <span
+                  className={styles.dot}
+                  style={{ background: allocDotColor }}
+                />
+                <span className={styles.value}>
+                  {convertFileSize(allocated)}
+                </span>
+                <span className={styles.label}>
+                  {intl.formatMessage({ id: 'resources.table.allocated' })}
+                </span>
+              </Flex>
+            </Flex>
+          </div>
+        );
+
+        return (
+          <Popover
+            key={item.index}
+            content={content}
+            placement="right"
+            trigger={['hover', 'click']}
+          >
+            <Flex align="center" gap={6} className={styles.row}>
+              <svg
+                viewBox="0 0 50 28"
+                width={54}
+                height={30}
+                style={{ overflow: 'visible', flexShrink: 0 }}
+              >
+                <path
+                  d={P_OUT}
+                  fill="none"
+                  strokeWidth={SW}
+                  stroke={trackColor}
+                />
+                <path
+                  d={P_IN}
+                  fill="none"
+                  strokeWidth={SW}
+                  stroke={trackColor}
+                />
+                {usedR > 0 && (
+                  <path
+                    d={P_OUT}
+                    fill="none"
+                    strokeWidth={SW}
+                    stroke={uc}
+                    strokeDasharray={`${(usedR * L_OUT).toFixed(1)} ${L_OUT.toFixed(1)}`}
+                  />
+                )}
+                {allocR > 0 && (
+                  <path
+                    d={P_IN}
+                    fill="none"
+                    strokeWidth={SW}
+                    style={{ stroke: allocColor }}
+                    strokeDasharray={`${(allocR * L_IN).toFixed(1)} ${L_IN.toFixed(1)}`}
+                  />
+                )}
+                <text
+                  x={CX}
+                  y={CY - 0.5}
+                  textAnchor="middle"
+                  fontSize={9.5}
+                  fontWeight={500}
+                  fill={uc}
+                  style={{ fontVariantNumeric: 'tabular-nums' }}
+                >
+                  {pct}%
+                </text>
+              </svg>
+              {<span className={styles.index}>[{item.index}]</span>}
+            </Flex>
+          </Popover>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default DualArcGauge;
@@ -60,7 +60,8 @@ const ModelTag: React.FC<ModelTagProps> = ({ categoryKey, size }) => {
        opacity: 1,
        paddingInline: 8,
        borderRadius: 12,
-        transform: 'scale(0.9)'
+        transform: 'scale(0.9)',
+        backgroundColor: 'transparent'
      }}
      color={config.color}
    >
@@ -6,10 +6,12 @@ import {
  AutoTooltip,
  DropdownButtons,
  IconFont,
-  icons
+  icons,
+  TextAttribute,
+  ThemeTag
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { MenuProps, Tag, Tooltip } from 'antd';
+import { MenuProps, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
@@ -139,23 +141,14 @@ const useModelsColumns = ({
        key: 'name',
        sorter: tableSorter(1),
        render: (text: string, record: ListItem) => (
-          <span className="flex items-center">
+          <span className="flex items-center gap-8">
            <AutoTooltip ghost style={{ maxWidth: 400 }} title={text}>
              <span className="text-primary">{text}</span>
            </AutoTooltip>
            {record.is_custom && (
-              <Tag
-                style={{
-                  marginLeft: 8,
-                  borderRadius: 12,
-                  color: 'var(--ant-color-text-tertiary)',
-                  borderColor: 'var(--ant-color-split)',
-                  backgroundColor: 'transparent'
-                }}
-                variant="outlined"
-              >
+              <TextAttribute>
                {intl.formatMessage({ id: 'playground.params.custom' })}
-              </Tag>
+              </TextAttribute>
            )}
          </span>
        )
@@ -203,26 +196,13 @@ const useModelsColumns = ({
            )}
            {(record.scope?.includes('inference') ||
              record.scope?.includes('*')) && (
-              <div
-                style={{
-                  border: '1px solid var(--ant-color-split)',
-                  color: 'var(--ant-color-text-tertiary)',
-                  backgroundColor: 'var(--ant-color-fill-quaternary)',
-                  borderRadius: 4,
-                  fontSize: 13,
-                  paddingInline: 8,
-                  flexGrow: 0,
-                  maxWidth: '100%',
-                  width: 'max-content',
-                  display: 'flex'
-                }}
-              >
+              <ThemeTag>
                <AutoTooltip ghost>
                  {record.allowed_model_names?.length
                    ? record.allowed_model_names.join(', ')
                    : intl.formatMessage({ id: 'apikeys.models.all' })}
                </AutoTooltip>
-              </div>
+              </ThemeTag>
            )}
          </div>
        )
@@ -232,6 +232,7 @@ const APIKeys: React.FC = () => {
        ></FilterBar>
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -120,13 +120,19 @@ const CommunityBackends: React.FC<{

  const renderItem = (item: ListItem) => {
    return (
-      <BackendCard
-        active={currentData?.id === item.id}
-        data={item}
-        layout="community"
-        onClick={handleOnClickItem}
-        actionsRenderer={actionsRenderer}
-      />
+      <div
+        style={{
+          backgroundColor: 'var(--ant-color-bg-container)'
+        }}
+      >
+        <BackendCard
+          active={currentData?.id === item.id}
+          data={item}
+          layout="community"
+          onClick={handleOnClickItem}
+          actionsRenderer={actionsRenderer}
+        />
+      </div>
    );
  };

@@ -45,7 +45,7 @@ const Title = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
-  background-color: var(--ant-color-bg-container);
+  background-color: var(--ant-color-bg-elevated);
  font-weight: 600;
  padding-top: 8px;
  padding-bottom: 8px;
@@ -358,6 +358,9 @@ const Clusters: React.FC = () => {
        dataList={list}
        provider={options.parent?.provider}
        clusterId={options.parent?.id}
+        gridTemplate={options.gridTemplate}
+        prefixWidth={options.prefixWidth}
+        columns={options.columns}
      />
    );
  };
@@ -395,6 +398,7 @@ const Clusters: React.FC = () => {
        >
          <SealTable
            rowKey="id"
+            emptyMinHeight="calc(100vh - 300px)"
            loadChildren={getWorkerPoolList}
            sortDirections={TABLE_SORT_DIRECTIONS}
            expandedRowKeys={expandedRowKeys}
@@ -2,13 +2,14 @@ import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import {
  CellContent,
+  type ChildGridOptions,
  DeleteModal,
-  RowChildren,
+  ExpandedRowGrid,
  TableRowProvider
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Col, message, Row } from 'antd';
+import { message } from 'antd';
 import _ from 'lodash';
 import React, { useRef, useState } from 'react';
 import { deleteWorkerPool, updateWorkerPool } from '../apis';
@@ -16,7 +17,10 @@ import { ProviderType } from '../config';
 import { NodePoolFormData, NodePoolListItem } from '../config/types';
 import usePoolsColumns from '../hooks/use-pools-columns';
 import AddPool from './add-pool';
-interface PoolRowsProps {
+interface PoolRowsProps extends Pick<
+  ChildGridOptions,
+  'gridTemplate' | 'prefixWidth' | 'columns'
+> {
  dataList: NodePoolListItem[];
  provider: ProviderType;
  clusterId: number | string;
@@ -25,9 +29,35 @@ interface PoolRowsProps {
 const PoolRows: React.FC<PoolRowsProps> = ({
  dataList,
  provider,
-  clusterId
+  clusterId,
+  gridTemplate,
+  prefixWidth = 0,
+  columns: parentColumns
 }) => {
  const intl = useIntl();
+
+  // The child row shares the parent's column grid; cells flow left-to-right and
+  // only declare a span, keyed on the pool column's OWN dataIndex — never on a
+  // parent cluster column key. Parent layout: name (1) | provider…state middle
+  // region | created_at (1) | operations (1). The three middle pool columns
+  // cover that region: `replicas`→state (last, 1 track), `image_name`→
+  // models+workers (2 tracks), `instance_type` absorbs the rest (plugins +
+  // provider + gpus).
+  const columnCount = parentColumns?.length ?? 0;
+  const middleSpan = Math.max(columnCount - 3, 1);
+  const spanFor = (dataIndex: string): number => {
+    switch (dataIndex) {
+      case 'instance_type':
+        return Math.max(middleSpan - 3, 1);
+      case 'image_name':
+        return 2;
+      case 'replicas':
+        return 1;
+      default:
+        // name / created_at / operations align 1:1 with their parent column.
+        return 1;
+    }
+  };
  const modalRef = useRef<any>(null);
  const [addPoolStatus, setAddPoolStatus] = useState<{
    open: boolean;
@@ -62,8 +92,10 @@ const PoolRows: React.FC<PoolRowsProps> = ({
    }
  };

-  const handleOnCell = async (row: NodePoolListItem, dataIndex: string) => {
-    console.log('handleOncell===', row, dataIndex);
+  const handleOnCell = async (
+    row: NodePoolListItem,
+    _data: { dataIndex: string; newValue: any; oldValue: any }
+  ) => {
    try {
      await updateWorkerPool({
        data: row,
@@ -118,31 +150,29 @@ const PoolRows: React.FC<PoolRowsProps> = ({
    <>
      {dataList?.map((data: NodePoolListItem) => {
        return (
-          <div
+          <TableRowProvider
            key={data.id}
-            style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
+            value={{ row: data, onCell: handleOnCell }}
          >
-            <TableRowProvider value={{ row: data, onCell: handleOnCell }}>
-              <RowChildren>
-                <Row style={{ width: '100%' }} align="middle">
-                  {columns.map((col: Record<string, any>) => {
-                    return (
-                      <Col
-                        key={col.dataIndex || col.key}
-                        span={col.span}
-                        style={{
-                          paddingInline: 0,
-                          ...(col.style || {})
-                        }}
-                      >
-                        <CellContent {..._.omit(col, ['key'])}></CellContent>
-                      </Col>
-                    );
-                  })}
-                </Row>
-              </RowChildren>
-            </TableRowProvider>
-          </div>
+            <ExpandedRowGrid
+              gridTemplate={gridTemplate}
+              prefixWidth={prefixWidth}
+            >
+              {columns.map((col: Record<string, any>) => (
+                <ExpandedRowGrid.Cell
+                  key={col.dataIndex || col.key}
+                  span={spanFor(col.dataIndex)}
+                  style={{
+                    color: 'var(--ant-color-text-secondary)'
+                  }}
+                >
+                  <CellContent
+                    {..._.omit(col, ['key', 'style', 'span'])}
+                  ></CellContent>
+                </ExpandedRowGrid.Cell>
+              ))}
+            </ExpandedRowGrid>
+          </TableRowProvider>
        );
      })}
      <AddPool
@@ -200,6 +200,7 @@ const Credentials: React.FC = () => {

        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            tableLayout="fixed"
            columns={columns}
            dataSource={dataSource.dataList}
@@ -225,7 +225,7 @@ const useClusterColumns = (
        title: intl.formatMessage({ id: 'common.table.createTime' }),
        dataIndex: 'created_at',
        sorter: tableSorter(6),
-        span: spans.createTime,
+        width: 180,
        render: (value: string) => (
          <AutoTooltip ghost minWidth={20}>
            {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
@@ -43,12 +43,9 @@ const usePoolsColumns = (
          showTitle: false
        },
        span: 3,
-        style: {
-          paddingInline: 'var(--ant-table-cell-padding-inline)'
-        },
        render: (text: string) => (
          <AutoTooltip title={text} ghost minWidth={20}>
-            {text}
+            <span className="text-primary">{text}</span>
          </AutoTooltip>
        )
      },
@@ -60,9 +57,6 @@ const usePoolsColumns = (
          showTitle: false
        },
        span: 4,
-        style: {
-          paddingLeft: 62
-        },
        render: (text: string, record: ListItem) => (
          <AutoTooltip
            title={
@@ -98,9 +92,6 @@ const usePoolsColumns = (
        ellipsis: {
          showTitle: false
        },
-        style: {
-          paddingLeft: 56
-        },
        render: (text: string) => (
          <AutoTooltip
            title={
@@ -125,9 +116,6 @@ const usePoolsColumns = (
        dataIndex: 'replicas',
        span: 6,
        key: 'replicas',
-        style: {
-          paddingLeft: 50
-        },
        editable: {
          valueType: 'number',
          title: intl.formatMessage({ id: 'models.table.replicas.edit' })
@@ -165,9 +153,6 @@ const usePoolsColumns = (
        ellipsis: {
          showTitle: false
        },
-        style: {
-          paddingLeft: 42
-        },
        render: (text: string) => (
          <AutoTooltip ghost minWidth={20}>
            {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -179,9 +164,6 @@ const usePoolsColumns = (
        key: 'operations',
        dataIndex: 'operations',
        span: 3,
-        style: {
-          paddingLeft: 36
-        },
        render: (text: string, record: ListItem) => (
          <DropdownButtons
            items={actionItems}
@@ -1,3 +1,4 @@
+import PluginExtraFields from '@/components/plugin-extra-fields';
 import { AutoTooltip, IconFont, ThemeTag } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Flex, Tag } from 'antd';
@@ -271,6 +272,10 @@ const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({ item }) => {
              {cpuManufacturer}
            </ThemeTag>
          )}
+          <PluginExtraFields
+            name="InstanceTypeBillingBadge"
+            context={{ instanceType: item }}
+          />
        </Flex>
      </Title>
      <InstanceMetadataSection spec={specData}></InstanceMetadataSection>
@@ -1,3 +1,4 @@
+import PluginExtraFields from '@/components/plugin-extra-fields';
 import { FileSkeletonRows } from '@/pages/llmodels/components/model-source/file-skeleton';
 import { TemplateCard } from '@gpustack/core-ui';
 import { Empty, Flex, Spin } from 'antd';
@@ -40,6 +41,10 @@ const InstanceTypeList: React.FC<InstanceTypeListProps> = ({

  return (
    <Flex orientation="vertical" gap={16}>
+      <PluginExtraFields
+        name="InstanceTypeBillingProvider"
+        context={{ instanceTypes: dataList }}
+      />
      {dataList.map((item) => {
        const name = item.name;
        return (
@@ -362,6 +362,7 @@ const GPUService: React.FC = () => {
        />
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -154,6 +154,7 @@ const GPUServicePublicKeys: React.FC = () => {
        />
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -28,21 +28,13 @@ interface ColumnsHookProps {
 const getKindLabel = (record: ListItem) => {
  if (record.spec?.nfs)
    return (
-      <ThemeTag
-        style={{ width: 'fit-content' }}
-        color="cyan"
-        icon={<FolderOutlined />}
-      >
+      <ThemeTag color="cyan" icon={<FolderOutlined />}>
        {StorageTypeKindLabelMap.nfs}
      </ThemeTag>
    );
  if (record.spec?.s3)
    return (
-      <ThemeTag
-        style={{ width: 'fit-content' }}
-        color="green"
-        icon={<IconFont type="icon-database" />}
-      >
+      <ThemeTag color="green" icon={<IconFont type="icon-database" />}>
        {StorageTypeKindLabelMap.s3}
      </ThemeTag>
    );
@@ -150,6 +150,7 @@ const GPUServiceStorageTypes: React.FC = () => {
        />
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -151,6 +151,7 @@ const GPUServiceStorage: React.FC = () => {
        />
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataSource.dataList}
            rowSelection={rowSelection}
@@ -15,6 +15,7 @@ import {
  Dropdown,
  DropdownProps,
  Empty,
+  Flex,
  Form,
  Radio,
  RadioChangeEvent,
@@ -80,9 +81,8 @@ const Label = styled.div`
  align-items: center;
  gap: 4px;
  font-weight: 500;
-  margin-block: 8px 12px;
+  margin-bottom: 16px;
  font-size: 14px;
-  color: var(--ant-color-text-tertiary);
 `;

 interface AccessControlFormProps {
@@ -107,6 +107,14 @@ type AllowedUsersOverride = {
    routeId?: number;
    action: PageActionType;
  }>;
+  // Optional trigger (e.g. an "Add" button) rendered by the host in its
+  // own layout slot while `Field` renders the body. Same props as Field
+  // so the plugin can gate visibility on action/routeId.
+  Action?: React.ComponentType<{
+    form: any;
+    routeId?: number;
+    action: PageActionType;
+  }>;
 };

 // Extra policy entries prepended to the radio list (rendered before
@@ -407,41 +415,56 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
        </Tooltip>
      </Label>

-      <Form.Item<AccessControlFormData> name="access_policy" noStyle>
-        <Radio.Group
-          onChange={handleOnPolicyChange}
-          style={{ marginBottom: 12 }}
-          options={[
-            ...prependedPolicies.map((p) => ({
-              label: intl.formatMessage({ id: p.labelId }),
-              value: p.policyValue
-            })),
-            {
-              label: intl.formatMessage({ id: 'models.accessSettings.authed' }),
-              value: 'authed'
-            },
-            allowedUsersOverride
-              ? {
-                  label: intl.formatMessage({
-                    id: allowedUsersOverride.labelId
-                  }),
-                  value: allowedUsersOverride.policyValue
-                }
-              : {
-                  label: intl.formatMessage({
-                    id: 'models.accessSettings.allowedUsers'
-                  }),
-                  value: ALLOWED_PRINCIPALS_POLICY
-                },
-            {
-              label: intl.formatMessage({
-                id: 'models.accessSettings.public'
-              }),
-              value: 'public'
-            }
-          ]}
-        ></Radio.Group>
-      </Form.Item>
+      <Flex
+        align="center"
+        justify="space-between"
+        style={{ marginBottom: 16, height: 40 }}
+      >
+        <Form.Item<AccessControlFormData> name="access_policy" noStyle>
+          <Radio.Group
+            onChange={handleOnPolicyChange}
+            options={[
+              ...prependedPolicies.map((p) => ({
+                label: intl.formatMessage({ id: p.labelId }),
+                value: p.policyValue
+              })),
+              {
+                label: intl.formatMessage({
+                  id: 'models.accessSettings.authed'
+                }),
+                value: 'authed'
+              },
+              allowedUsersOverride
+                ? {
+                    label: intl.formatMessage({
+                      id: allowedUsersOverride.labelId
+                    }),
+                    value: allowedUsersOverride.policyValue
+                  }
+                : {
+                    label: intl.formatMessage({
+                      id: 'models.accessSettings.allowedUsers'
+                    }),
+                    value: ALLOWED_PRINCIPALS_POLICY
+                  },
+              {
+                label: intl.formatMessage({
+                  id: 'models.accessSettings.public'
+                }),
+                value: 'public'
+              }
+            ]}
+          ></Radio.Group>
+        </Form.Item>
+        {allowedUsersOverride?.Action &&
+          accessPolicy === overridePolicyValue && (
+            <allowedUsersOverride.Action
+              form={form}
+              routeId={currentData?.id}
+              action={action}
+            />
+          )}
+      </Flex>
      {accessPolicy === 'public' && (
        <div style={{ marginBlock: '16px 12px' }}>
          <AlertBlockInfo
@@ -449,6 +472,13 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
            message={intl.formatMessage({
              id: 'models.accessSettings.public.tips'
            })}
+            overlayScrollerProps={{
+              styles: {
+                wrapper: {
+                  paddingLeft: 0
+                }
+              }
+            }}
          ></AlertBlockInfo>
        </div>
      )}
@@ -130,7 +130,9 @@ const AccessControlModal: React.FC<
            <AlertBlockInfo
              type="warning"
              style={{ marginBottom: 16 }}
-              contentStyle={{ paddingInline: 0 }}
+              contentStyle={{
+                paddingInline: 0
+              }}
              message={intl.formatMessage({
                id: 'models.button.accessSettings.tips'
              })}
@@ -1,6 +1,5 @@
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
-import { AutoTooltip, RowChildren } from '@gpustack/core-ui';
-import { Col, Row } from 'antd';
+import { AutoTooltip, ExpandedRowGrid } from '@gpustack/core-ui';
 import dayjs from 'dayjs';
 import React from 'react';
 import { ModelInstanceListItem } from '../../config/types';
@@ -11,11 +10,17 @@ import DistributeInfoCell from '../instance-cells/distribute-info-cell';
 import DownloadingStatusCell from '../instance-cells/downloading-status-cell';
 import InstanceStatusCell from '../instance-cells/instance-status-cell';
 import NameCell from '../instance-cells/name-cell';
+
 interface InstanceItemProps {
  instanceData: ModelInstanceListItem;
  workerList: WorkerListItem[];
  modelData?: any;
  defaultOpenId: string;
+  // Column grid shared from the parent SealTable so this child row aligns
+  // its cells to the parent columns instead of guessing paddings.
+  gridTemplate?: string;
+  prefixWidth?: number;
+  columns?: any[];
  handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
 }

@@ -24,79 +29,67 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
  workerList,
  modelData,
  defaultOpenId,
+  gridTemplate,
+  prefixWidth = 0,
+  columns,
  handleChildSelect
 }) => {
+  // The child row shares the parent's column grid; cells flow left-to-right and
+  // only declare a span, so there is no dependency on parent column keys.
+  // Parent layout: name (1) | middle plugin/source region | replicas,
+  // created_at, operation (last 3). The middle absorbs whatever columns sit
+  // between name and replicas (cluster_id, source, any plugin column).
+  const columnCount = columns?.length ?? 0;
+  const middleSpan = Math.max(columnCount - 4, 1);
+
  return (
-    <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
-      <RowChildren>
-        <Row
-          style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
-          align="middle"
-        >
-          <Col
-            span={6}
-            style={{
-              paddingInline: 'var(--ant-table-cell-padding-inline)'
-            }}
-          >
-            <NameCell
-              record={instanceData}
-              modelData={modelData}
-              defaultOpenId={defaultOpenId}
-            ></NameCell>
-          </Col>
-          <Col span={7}>
-            <span
-              style={{
-                paddingLeft: '58px',
-                flexWrap: 'wrap',
-                gap: '8px'
-              }}
-              className="flex align-center"
-            >
-              <CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
-              <DistributeInfoCell
-                record={instanceData}
-                workerList={workerList}
-              ></DistributeInfoCell>
-            </span>
-          </Col>
-          <Col span={4}>
-            <span
-              style={{ paddingLeft: '40px', gap: 4 }}
-              className="flex-center"
-            >
-              <InstanceStatusCell
-                record={instanceData}
-                onSelect={handleChildSelect}
-              />
-              <DownloadingStatusCell
-                backend={modelData?.backend}
-                distributed_servers={instanceData.distributed_servers}
-                workerList={workerList}
-                record={instanceData}
-              ></DownloadingStatusCell>
-            </span>
-          </Col>
-          <Col span={4}>
-            <span style={{ paddingLeft: 43 }} className="flex">
-              <AutoTooltip ghost>
-                {dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
-              </AutoTooltip>
-            </span>
-          </Col>
-          <Col span={3}>
-            <div style={{ paddingLeft: 36 }}>
-              <ActionsCell
-                record={instanceData}
-                modelData={modelData}
-                onSelect={handleChildSelect}
-              ></ActionsCell>
-            </div>
-          </Col>
-        </Row>
-      </RowChildren>
-    </div>
+    <ExpandedRowGrid
+      gridTemplate={gridTemplate}
+      prefixWidth={prefixWidth}
+      style={{ color: 'var(--ant-color-text-secondary)' }}
+    >
+      <ExpandedRowGrid.Cell span={1}>
+        <NameCell
+          record={instanceData}
+          modelData={modelData}
+          defaultOpenId={defaultOpenId}
+        ></NameCell>
+      </ExpandedRowGrid.Cell>
+      <ExpandedRowGrid.Cell
+        span={middleSpan}
+        style={{ flexWrap: 'wrap', gap: 8 }}
+      >
+        <CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
+        <DistributeInfoCell
+          record={instanceData}
+          workerList={workerList}
+        ></DistributeInfoCell>
+      </ExpandedRowGrid.Cell>
+      <ExpandedRowGrid.Cell span={1} style={{ gap: 4 }}>
+        <InstanceStatusCell
+          record={instanceData}
+          onSelect={handleChildSelect}
+        />
+        <DownloadingStatusCell
+          backend={modelData?.backend}
+          distributed_servers={instanceData.distributed_servers}
+          workerList={workerList}
+          record={instanceData}
+        ></DownloadingStatusCell>
+      </ExpandedRowGrid.Cell>
+      <ExpandedRowGrid.Cell span={1}>
+        <AutoTooltip ghost>
+          {dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
+        </AutoTooltip>
+      </ExpandedRowGrid.Cell>
+      <ExpandedRowGrid.Cell span={1}>
+        <ActionsCell
+          record={instanceData}
+          modelData={modelData}
+          onSelect={handleChildSelect}
+        ></ActionsCell>
+      </ExpandedRowGrid.Cell>
+    </ExpandedRowGrid>
  );
 };
 export default InstanceItem;
@@ -17,6 +17,9 @@ interface InstanceItemProps {
  workerList: WorkerListItem[];
  modelData?: any;
  currentExpanded?: string;
+  gridTemplate?: string;
+  prefixWidth?: number;
+  columns?: any[];
  handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
 }

@@ -25,6 +28,9 @@ const Instances: React.FC<InstanceItemProps> = ({
  workerList,
  modelData,
  currentExpanded,
+  gridTemplate,
+  prefixWidth,
+  columns,
  handleChildSelect
 }) => {
  const [firstLoad, setFirstLoad] = React.useState(true);
@@ -55,6 +61,9 @@ const Instances: React.FC<InstanceItemProps> = ({
            instanceData={item}
            defaultOpenId={firstLoad ? defaultOpenId : ''}
            handleChildSelect={handleChildSelect}
+            gridTemplate={gridTemplate}
+            prefixWidth={prefixWidth}
+            columns={columns}
          ></InstanceItem>
        );
      })}
@@ -1,12 +1,13 @@
+import PluginExtraFields from '@/components/plugin-extra-fields';
 import {
  IconFont,
-  StatusTag,
+  StatusDot,
  TagsWrapper,
  TemplateCard,
  ThemeTag
 } from '@gpustack/core-ui';
 import { useIntl, useNavigate } from '@umijs/max';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -20,7 +21,11 @@ import {
  MyModelsStatusValueMap
 } from '../config';
 import { categoryToPathMap } from '../config/button-actions';
-import { getModelLogo } from '../utils/model-logo';
+import {
+  defaultModelLogo,
+  getCategoryLogo,
+  getModelLogo
+} from '../utils/model-logo';

 const CardWrapper = styled.div`
  &:hover {
@@ -165,6 +170,11 @@ const ModelItem: React.FC<{
    navigate(`/playground/chat?model=${modelName}`);
  };

+  // Logo priority: brand logo matched from the name → tinted category
+  // icon (from model_icons) → generic default image.
+  const brandLogo = getModelLogo(model.name);
+  const categoryLogo = brandLogo ? null : getCategoryLogo(model.categories);
+
  // context length
  const maxToken = useMemo(() => {
    const meta = model.meta || {};
@@ -183,6 +193,23 @@ const ModelItem: React.FC<{
    return _.round(max_tokens / 1024);
  }, [model]);

+  // Ready is the normal state — show just the dot (no label); other states
+  // (Not Ready / Stopped) keep their label so the problem is legible.
+  const statusNode = (
+    <StatusDot
+      statusValue={{
+        status: MyModelsStatusMap[model.status],
+        text:
+          model.status === MyModelsStatusValueMap.Ready ||
+          !MyModelsStatusLabelMap[model.status]
+            ? ''
+            : intl.formatMessage({
+                id: MyModelsStatusLabelMap[model.status]
+              })
+      }}
+    />
+  );
+
  return (
    <CardWrapper>
      <TemplateCard
@@ -194,19 +221,39 @@ const ModelItem: React.FC<{
        header={
          <Header>
            <span className="text gap-16">
-              <ModelLogo src={getModelLogo(model.name)} alt="" />
-              <span>{model.name}</span>
+              {brandLogo ? (
+                <ModelLogo src={brandLogo} alt="" />
+              ) : categoryLogo ? (
+                <ModelLogo src={categoryLogo} alt="" />
+              ) : (
+                <ModelLogo src={defaultModelLogo} alt="" />
+              )}
+              <span className="flex-center" style={{ gap: 8, minWidth: 0 }}>
+                <span>{model.name}</span>
+                {/* Status moved to a compact dot right after the name, freeing
+                    the header's right side for the price summary. The dot keeps
+                    the state message on hover (StatusDot has no built-in one). */}
+                <span
+                  style={{
+                    fontWeight: 400,
+                    fontSize: 'var(--font-size-small)'
+                  }}
+                >
+                  {model.state_message ? (
+                    <Tooltip title={model.state_message}>
+                      <span style={{ display: 'inline-flex' }}>
+                        {statusNode}
+                      </span>
+                    </Tooltip>
+                  ) : (
+                    statusNode
+                  )}
+                </span>
+              </span>
+            </span>
+            <span className="flex-center gap-8">
+              <PluginExtraFields name="ModelPriceSummary" context={{ model }} />
            </span>
-            <StatusTag
-              maxTooltipWidth={400}
-              statusValue={{
-                status: MyModelsStatusMap[model.status],
-                text: intl.formatMessage({
-                  id: MyModelsStatusLabelMap[model.status] || ''
-                }),
-                message: model.state_message
-              }}
-            ></StatusTag>
          </Header>
        }
      >
@@ -5,9 +5,7 @@ import { PageActionType } from '@/config/types';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
-import useWatchList from '@/hooks/use-watch-list';
 import useNoResourceResult from '@/pages/llmodels/hooks/use-no-resource-result';
-import { MODEL_ROUTE_TARGETS } from '@/pages/model-routes/apis';
 import { TargetStatusValueMap } from '@/pages/model-routes/config';
 import useOpenPlayground from '@/pages/model-routes/hooks/use-open-playground';
 import useGranfanaLink from '@/pages/resources/hooks/use-grafana-link';
@@ -92,6 +90,7 @@ interface ModelsProps {
  loadend: boolean;
  total: number;
  filterValues?: Record<string, any>;
+  targetList?: any[];
 }

 const getFormattedData = (record: any, extraData = {}) => ({
@@ -129,7 +128,8 @@ const Models: React.FC<ModelsProps> = ({
  queryParams,
  loading,
  loadend,
-  total
+  total,
+  targetList = []
 }) => {
  const { generateFormValues, clusterList, workerList } =
    useDeploymentsContext();
@@ -155,7 +155,6 @@ const Models: React.FC<ModelsProps> = ({
    expandedRowKeys
  } = useExpandedRowKeys(expandAtom);
  const { handleOpenPlayGround } = useOpenPlayground();
-  const { watchDataList: targetList } = useWatchList(MODEL_ROUTE_TARGETS);
  const { openViewLogsModal, openViewLogsModalStatus, closeViewLogsModal } =
    useViewInstanceLogs();

@@ -442,6 +441,9 @@ const Models: React.FC<ModelsProps> = ({
          modelData={options.parent}
          workerList={workerList}
          handleChildSelect={handleChildSelect}
+          gridTemplate={options.gridTemplate}
+          prefixWidth={options.prefixWidth}
+          columns={options.columns}
        ></Instances>
      );
    },
@@ -614,6 +616,7 @@ const Models: React.FC<ModelsProps> = ({
        ></PageTools>
        <SealTable
          columns={columns}
+          emptyMinHeight="calc(100vh - 300px)"
          sortDirections={TABLE_SORT_DIRECTIONS}
          dataSource={dataSource}
          rowSelection={rowSelection}
@@ -3,6 +3,8 @@ import useSetChunkRequest from '@/hooks/use-chunk-request';
 import { usePaginationStatus } from '@/hooks/use-pagination-status';
 import { useTableMultiSort } from '@/hooks/use-table-sort';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
+import useWatchList from '@/hooks/use-watch-list';
+import { MODEL_ROUTE_TARGETS } from '@/pages/model-routes/apis';
 import { TableOrder, TableProvider } from '@gpustack/core-ui';
 import { useMemoizedFn } from 'ahooks';
 import _ from 'lodash';
@@ -31,6 +33,11 @@ const Models = forwardRef((props, ref) => {
  const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
  const { setChunkRequest: setModelInstanceChunkRequest } =
    useSetChunkRequest();
+  const {
+    watchDataList: targetList,
+    startWatch: startTargetsWatch,
+    cancelWatch: cancelTargetsWatch
+  } = useWatchList(MODEL_ROUTE_TARGETS);
  const [modelInstances, setModelInstances] = useState<any[]>([]);
  const [dataSource, setDataSource] = useState<{
    dataList: ListItem[];
@@ -255,6 +262,7 @@ const Models = forwardRef((props, ref) => {
    cacheInsDataListRef.current = [];
    chunkInstanceRequedtRef.current?.current?.cancel?.();
    instancesToken.current?.cancel?.();
+    cancelTargetsWatch();
  });

  const resumeRequestsOnPageActive = useMemoizedFn(async () => {
@@ -265,6 +273,7 @@ const Models = forwardRef((props, ref) => {
    await getAllModelInstances();
    await createModelsInstanceChunkRequest();
    await createModelsChunkRequest();
+    await startTargetsWatch();
  });

  const handleOnCancelViewLogs = useMemoizedFn(async () => {
@@ -483,6 +492,7 @@ const Models = forwardRef((props, ref) => {
        total={dataSource.total}
        deleteIds={dataSource.deletedIds}
        filterValues={filterValues}
+        targetList={targetList}
      ></TableList>
    </TableProvider>
  );
@@ -268,7 +268,7 @@ const useModelsColumns = ({
        dataIndex: 'created_at',
        key: 'created_at',
        sorter: tableSorter(5),
-        span: spans.createTime,
+        width: 180,
        render: (text: number) => (
          <AutoTooltip ghost>
            {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -1,3 +1,4 @@
+import PluginExtraFields from '@/components/plugin-extra-fields';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { SyncOutlined } from '@ant-design/icons';
 import {
@@ -268,6 +269,10 @@ const UserModels: React.FC = () => {
            </Space>
          }
        ></PageTools>
+        <PluginExtraFields
+          name="ModelBillingProvider"
+          context={{ models: dataList }}
+        />
        <InfiniteScrollerProvider
          value={{
            total: dataSource.totalPage,
@@ -44,6 +44,7 @@ const MODEL_ICON_RULES: [string, string][] = [
  // 其余厂商/系列 → 对应 logo（按子串命中）
  ['gemini', 'google'],
  ['gpt', 'openai'],
+  ['hy', 'hunyuan'],
  ['openai', 'openai'],
  ['internvl', 'opengvlab'],
  ['minicpm', 'openbmb'],
@@ -71,13 +72,40 @@ const MODEL_ICON_RULES: [string, string][] = [
  ['alibaba', 'alibaba']
 ];

+// Default llm logo, used as the ultimate fallback when neither a brand
+// logo nor a model-category icon can be resolved.
+export const defaultModelLogo = iconMap[DEFAULT_ICON];
+
+// 模型类别 → model_icons 下的类别图标文件名。
+const CATEGORY_ICON_MAP: Record<string, string> = {
+  llm: 'llm',
+  embedding: 'embedding',
+  reranker: 'reranker',
+  image: 'image',
+  text_to_speech: 'tts',
+  speech_to_text: 'stt'
+};
+
 /**
- * Resolve a model logo from its name.
+ * Resolve a category icon (from model_icons) for a model's categories.
+ * Returns the first matching category icon url, or null when none match.
+ */
+export const getCategoryLogo = (categories?: string[]): string | null => {
+  const iconName = categories
+    ?.map((category) => CATEGORY_ICON_MAP[category])
+    .find((name) => name && iconMap[name]);
+
+  return iconName ? iconMap[iconName] : null;
+};
+
+/**
+ * Resolve a brand logo from a model name.
 * 1. Match against the keyword rules in order (first substring hit wins).
 * 2. Fall back to a direct match where the name contains an icon filename.
- * 3. Fall back to the default llm icon.
+ * 3. Return null when nothing matches — the caller then falls back to a
+ *    category-based icon (see `categoryConfig`) rather than a default image.
 */
-export const getModelLogo = (modelName?: string): string => {
+export const getModelLogo = (modelName?: string): string | null => {
  const name = (modelName || '').toLowerCase();

  const rule = MODEL_ICON_RULES.find(([keyword]) => name.includes(keyword));
@@ -90,5 +118,5 @@ export const getModelLogo = (modelName?: string): string => {
    .sort((a, b) => b.length - a.length)
    .find((iconName) => name.includes(iconName));

-  return iconMap[directHit || DEFAULT_ICON] || iconMap[DEFAULT_ICON];
+  return directHit ? iconMap[directHit] : null;
 };
@@ -177,6 +177,7 @@ const ModelItem: React.FC<ModelItemProps> = ({
        <span>
          <AutoComplete
            loading={loading}
+            allowClear
            showSearch={{
              filterOption: (inputValue, option: any) => {
                return (
@@ -159,6 +159,7 @@ const MaasProvider: React.FC = () => {
        ></FilterBar>
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            rowKey="id"
            tableLayout="fixed"
            sortDirections={TABLE_SORT_DIRECTIONS}
@@ -2,24 +2,19 @@ import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
 import { DeleteOutlined } from '@ant-design/icons';
 import {
  AutoTooltip,
+  ChildGridOptions,
  DropdownButtons,
-  RowChildren,
+  ExpandedRowGrid,
  StatusTag
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { Col, Row, Tag } from 'antd';
+import { Tag } from 'antd';
 import dayjs from 'dayjs';
 import React from 'react';
 import styled from 'styled-components';
 import { TargetStatus, TargetStatusLabelMap } from '../config';
 import { RouteTarget } from '../config/types';

-const CellContent = styled.div`
-  display: flex;
-  align-items: center;
-  height: 100%;
-`;
-
 const FilesTag = styled(Tag)`
  cursor: pointer;
  display: flex;
@@ -29,20 +24,33 @@ const FilesTag = styled(Tag)`
  border-radius: 12px;
 `;

-interface ProviderModelProps {
+type SharedGrid = Pick<
+  ChildGridOptions,
+  'gridTemplate' | 'prefixWidth' | 'columns'
+>;
+
+interface ProviderModelProps extends SharedGrid {
  dataList: RouteTarget[];
  onSelect: (val: any, record: any) => void;
  sourceModels: any[];
  modelList?: Global.BaseOption<number>[];
 }

-interface TargetItemProps {
+interface TargetItemProps extends SharedGrid {
  onSelect: (val: any, record: any) => void;
  data: any;
  sourceModels: any[];
  modelList?: Global.BaseOption<number>[];
 }

+// Sub-column inside the merged `targets` cell.
+const subCellStyle: React.CSSProperties = {
+  minWidth: 0,
+  display: 'flex',
+  alignItems: 'center',
+  paddingInline: 'var(--ant-table-cell-padding-inline)'
+};
+
 export const childActionList = [
  {
    key: 'delete',
@@ -58,10 +66,24 @@ const RouteItem: React.FC<TargetItemProps> = ({
  onSelect,
  data,
  sourceModels,
-  modelList
+  modelList,
+  gridTemplate,
+  prefixWidth = 0,
+  columns
 }) => {
  const intl = useIntl();

+  // The child row shares the parent's column grid. Cells flow left-to-right,
+  // so each cell only declares how many parent columns it spans. Parent layout
+  // is always: name (1) | middle plugin region | created_at (1) | operations (1).
+  // Enterprise inserts plugin columns (org, quota) into the middle region.
+  const columnCount = columns?.length ?? 0;
+  const middleSpan = Math.max(columnCount - 3, 1);
+  // With ≥3 middle tracks (enterprise: org / targets / quota) give source,
+  // weight and status their own tracks; source pins to the first middle track,
+  // status to the last, weight absorbs whatever is between.
+  const splitMiddle = middleSpan >= 3;
+
  const renderProviderSource = () => {
    const model = sourceModels.find((item: any) => {
      if (data.model_id) {
@@ -83,88 +105,82 @@ const RouteItem: React.FC<TargetItemProps> = ({
      </span>
    );
  };
+
+  const sourceNode = renderProviderSource();
+  const weightNode =
+    data.fallback_status_codes && data.fallback_status_codes?.length > 0 ? (
+      <>
+        {data.weight > 0 && <span style={{ marginInline: 8 }}>/</span>}
+        <span>{intl.formatMessage({ id: 'routes.table.label.fallback' })}</span>
+      </>
+    ) : (
+      <AutoTooltip ghost>
+        {intl.formatMessage({ id: 'routes.form.target.weight' })}:{' '}
+        {data.weight || 0}
+      </AutoTooltip>
+    );
+  const statusNode = (
+    <StatusTag
+      statusValue={{
+        status: TargetStatus[data.state],
+        text: TargetStatusLabelMap[data.state],
+        message: ''
+      }}
+    />
+  );
+
  return (
-    <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
-      <RowChildren>
-        <Row
-          gutter={16}
-          style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
+    <ExpandedRowGrid
+      gridTemplate={gridTemplate}
+      prefixWidth={prefixWidth}
+      style={{ color: 'var(--ant-color-text-secondary)' }}
+    >
+      <ExpandedRowGrid.Cell span={1} style={{ height: '100%', gap: 4 }}>
+        <AutoTooltip ghost>{data.name}</AutoTooltip>
+        {!!data.overridden_model_name && !!data.model_id && (
+          <FilesTag color="purple" variant="outlined">
+            <span style={{ opacity: 1 }}>LoRA</span>
+          </FilesTag>
+        )}
+      </ExpandedRowGrid.Cell>
+      {splitMiddle ? (
+        // Enterprise: org / targets / quota → one track each.
+        <>
+          <ExpandedRowGrid.Cell span={1}>{sourceNode}</ExpandedRowGrid.Cell>
+          <ExpandedRowGrid.Cell span={middleSpan - 2}>
+            {weightNode}
+          </ExpandedRowGrid.Cell>
+          <ExpandedRowGrid.Cell span={1}>{statusNode}</ExpandedRowGrid.Cell>
+        </>
+      ) : (
+        // Only `targets` exists: share the one track via a 5:2:3 sub-grid.
+        // A raw grid div (not <Cell>) because it needs `display: grid`.
+        <div
+          style={{
+            gridColumn: `span ${middleSpan}`,
+            minWidth: 0,
+            display: 'grid',
+            gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr)',
+            alignItems: 'center'
+          }}
        >
-          <Col span={5}>
-            <CellContent
-              style={{
-                gap: 4,
-                paddingInline: 'var(--ant-table-cell-padding-inline)'
-              }}
-            >
-              <AutoTooltip ghost>{data.name}</AutoTooltip>
-              {!!data.overridden_model_name && !!data.model_id && (
-                <FilesTag color="purple" variant="outlined">
-                  <span style={{ opacity: 1 }}>LoRA</span>
-                </FilesTag>
-              )}
-            </CellContent>
-          </Col>
-          <Col span={5} style={{ paddingLeft: 64 }}>
-            <CellContent>{renderProviderSource()}</CellContent>
-          </Col>
-          <Col span={2}>
-            <CellContent>
-              {data.fallback_status_codes &&
-              data.fallback_status_codes?.length > 0 ? (
-                <>
-                  {data.weight > 0 && (
-                    <span style={{ marginInline: 8 }}>/</span>
-                  )}
-                  <span>
-                    {intl.formatMessage({
-                      id: 'routes.table.label.fallback'
-                    })}
-                  </span>
-                </>
-              ) : (
-                <AutoTooltip ghost>
-                  {intl.formatMessage({ id: 'routes.form.target.weight' })}:{' '}
-                  {data.weight || 0}
-                </AutoTooltip>
-              )}
-            </CellContent>
-          </Col>
-          <Col span={3}>
-            <CellContent>
-              <AutoTooltip ghost>
-                <StatusTag
-                  statusValue={{
-                    status: TargetStatus[data.state],
-                    text: TargetStatusLabelMap[data.state],
-                    message: ''
-                  }}
-                />
-              </AutoTooltip>
-            </CellContent>
-          </Col>
-          <Col span={5}>
-            <CellContent style={{ paddingLeft: 45 }}>
-              <AutoTooltip ghost minWidth={20}>
-                {dayjs(data.created_at).format('YYYY-MM-DD HH:mm:ss')}
-              </AutoTooltip>
-            </CellContent>
-          </Col>
-          <Col span={4}>
-            <CellContent
-              style={{
-                paddingLeft: 38
-              }}
-            >
-              <DropdownButtons
-                items={childActionList}
-                onSelect={(val) => onSelect(val, data)}
-              ></DropdownButtons>
-            </CellContent>
-          </Col>
-        </Row>
-      </RowChildren>
-    </div>
+          <div style={subCellStyle}>{sourceNode}</div>
+          <div style={subCellStyle}>{weightNode}</div>
+          <div style={subCellStyle}>{statusNode}</div>
+        </div>
+      )}
+      <ExpandedRowGrid.Cell span={1} style={{ height: '100%' }}>
+        <AutoTooltip ghost minWidth={20}>
+          {dayjs(data.created_at).format('YYYY-MM-DD HH:mm:ss')}
+        </AutoTooltip>
+      </ExpandedRowGrid.Cell>
+      <ExpandedRowGrid.Cell span={1} style={{ height: '100%' }}>
+        <DropdownButtons
+          items={childActionList}
+          onSelect={(val) => onSelect(val, data)}
+        ></DropdownButtons>
+      </ExpandedRowGrid.Cell>
+    </ExpandedRowGrid>
  );
 };

@@ -172,7 +188,10 @@ const RouteTargets: React.FC<ProviderModelProps> = ({
  dataList,
  onSelect,
  modelList,
-  sourceModels
+  sourceModels,
+  gridTemplate,
+  prefixWidth,
+  columns
 }) => {
  return (
    <div>
@@ -183,6 +202,9 @@ const RouteTargets: React.FC<ProviderModelProps> = ({
          onSelect={onSelect}
          sourceModels={sourceModels}
          modelList={modelList}
+          gridTemplate={gridTemplate}
+          prefixWidth={prefixWidth}
+          columns={columns}
        ></RouteItem>
      ))}
    </div>
@@ -232,7 +232,7 @@ const useAccessColumns = ({
        title: intl.formatMessage({ id: 'common.table.createTime' }),
        dataIndex: 'created_at',
        sorter: tableSorter(6),
-        span: createTimeSpan,
+        width: 180,
        render: (value: string) => (
          <AutoTooltip ghost minWidth={20}>
            {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
@@ -291,6 +291,9 @@ const ModelRoutes: React.FC = () => {
        dataList={list}
        onSelect={onChildSelect}
        sourceModels={sourceModels}
+        gridTemplate={options.gridTemplate}
+        prefixWidth={options.prefixWidth}
+        columns={options.columns}
      />
    );
  };
@@ -364,6 +367,7 @@ const ModelRoutes: React.FC = () => {
        >
          <SealTable
            rowKey="id"
+            emptyMinHeight="calc(100vh - 300px)"
            loadChildren={loadChildrenData}
            sortDirections={TABLE_SORT_DIRECTIONS}
            expandedRowKeys={expandedRowKeys}
@@ -123,14 +123,14 @@ const GPUList: React.FC<GPUListProps> = ({ clusterId, source }) => {
            columns={columns}
            sortDirections={TABLE_SORT_DIRECTIONS}
            showSorterTooltip={false}
-            tableLayout={'auto'}
+            scroll={{ x: 'max-content' }}
+            className={'scroll-table'}
            dataSource={dataSource.dataList}
            loading={{
              spinning: dataSource.loading,
              size: 'middle'
            }}
            rowKey="id"
-            scroll={{ x: 900 }}
            onChange={handleTableChange}
            pagination={{
              showSizeChanger: true,
@@ -340,6 +340,7 @@ const ModelFiles = () => {
        ></FilterBar>
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            rowKey="id"
            tableLayout="fixed"
            sortDirections={TABLE_SORT_DIRECTIONS}
@@ -300,10 +300,11 @@ const Workers: React.FC<WorkersProps> = ({ clusterId, source }) => {
        ></FilterBar>
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            tableLayout="auto"
            columns={columns}
            sortDirections={TABLE_SORT_DIRECTIONS}
            showSorterTooltip={false}
-            tableLayout={'auto'}
+            scroll={{ x: 'max-content' }}
            className={'scroll-table'}
            dataSource={dataSource.dataList}
            loading={{
@@ -311,7 +312,6 @@ const Workers: React.FC<WorkersProps> = ({ clusterId, source }) => {
              size: 'middle'
            }}
            rowKey="id"
-            scroll={{ x: 900 }}
            onChange={handleTableChange}
            rowSelection={source === 'clusterDetail' ? undefined : rowSelection}
            pagination={{
@@ -26,7 +26,7 @@ import { Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { useAtom, useAtomValue } from 'jotai';
 import _ from 'lodash';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import semverCoerce from 'semver/functions/coerce';
 import semverGt from 'semver/functions/gt';
 import { status, WorkerStatusMap, WorkerStatusMapValue } from '../config';
@@ -143,15 +143,57 @@ const GPUCell = ({ devices }: { devices: GPUDeviceItem[] }) => (
  </span>
 );

+// index + ProgressBar
+const VRAMItem = ({
+  item,
+  autoOpen
+}: {
+  item: GPUDeviceItem;
+  autoOpen: boolean;
+}) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    setOpen(autoOpen);
+  }, [autoOpen]);
+
+  const percent = item.memory?.used
+    ? _.round(item.memory?.utilization_rate, 0)
+    : _.round((item.memory?.allocated / item.memory?.total) * 100, 0);
+
+  return (
+    <Tooltip
+      title={<InfoColumn fieldList={fieldList} data={item.memory} />}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <span className="flex-center" style={{ cursor: 'pointer' }}>
+        <span
+          className="m-r-5"
+          style={{ display: 'flex', width: 25, lineHeight: 1.2 }}
+        >
+          <span
+            style={{
+              paddingBottom: 2,
+              borderBottom: '1px dashed var(--ant-blue-6)'
+            }}
+          >
+            [{item.index}]
+          </span>
+        </span>
+        <ProgressBar percent={percent} />
+      </span>
+    </Tooltip>
+  );
+};
+
 const VRAMCell = ({
  devices,
-  intl,
  rIndex,
  loadend,
  firstLoad
 }: {
  devices: GPUDeviceItem[];
-  intl: any;
  rIndex: number;
  loadend: boolean;
  firstLoad: boolean;
@@ -160,36 +202,11 @@ const VRAMCell = ({
    {_.map(
      _.sortBy(devices || [], ['index']),
      (item: GPUDeviceItem, index: number) => (
-        <span key={index} className="flex-center">
-          <span
-            className="m-r-5"
-            style={{ display: 'flex', width: 25, lineHeight: 1 }}
-          >
-            [{item.index}]
-          </span>
-          <ProgressBar
-            defaultOpen={rIndex === 0 && index === 0 && loadend && firstLoad}
-            percent={
-              item.memory?.used
-                ? _.round(item.memory?.utilization_rate, 0)
-                : _.round(
-                    (item.memory?.allocated / item.memory?.total) * 100,
-                    0
-                  )
-            }
-            label={<InfoColumn fieldList={fieldList} data={item.memory} />}
-          />
-          {item.memory.is_unified_memory && (
-            <Tooltip
-              title={intl.formatMessage({ id: 'resources.table.unified' })}
-            >
-              <InfoCircleOutlined
-                className="m-l-5"
-                style={{ color: 'var(--ant-blue-5)' }}
-              />
-            </Tooltip>
-          )}
-        </span>
+        <VRAMItem
+          key={index}
+          item={item}
+          autoOpen={rIndex === 0 && index === 0 && loadend && firstLoad}
+        />
      )
    )}
  </span>
@@ -498,6 +515,7 @@ const useWorkerColumns = ({
      {
        title: 'GPU',
        dataIndex: 'gpu',
+        minWidth: 100,
        render: (_, record) =>
          statusAvailable(record) ? (
            <GPUCell devices={record?.status?.gpu_devices} />
@@ -508,11 +526,11 @@ const useWorkerColumns = ({
      {
        title: intl.formatMessage({ id: 'resources.table.vram' }),
        dataIndex: 'vram',
+        minWidth: 100,
        render: (_, record, rIndex) =>
          statusAvailable(record) ? (
            <VRAMCell
              devices={record?.status?.gpu_devices}
-              intl={intl}
              rIndex={rIndex}
              loadend={loadend}
              firstLoad={firstLoad}
@@ -524,6 +542,7 @@ const useWorkerColumns = ({
      {
        title: intl.formatMessage({ id: 'resources.table.disk' }),
        dataIndex: 'storage',
+        minWidth: 100,
        render: (_, record) => (
          <span className="flex-center flex-full">
            {statusAvailable(record) ? (
@@ -8,10 +8,11 @@
 * tab (date range + "filter by user" for managers); the resource-type /
 * event-type selects ride in the bar's ``extra`` slot.
 */
-import { SimpleSelect } from '@gpustack/core-ui';
+import { type StatusType } from '@/config/types';
+import { SimpleSelect, StatusDot } from '@gpustack/core-ui';
 import { useAccess, useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Input, Select, Table, Tag } from 'antd';
+import { Input, Select, Table } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -23,11 +24,11 @@ import useQueryResourceEvents from './services/use-query-resource-events';
 // Only these four are ever emitted (see resource_event_logger): create/delete
 // + the metering-window pair. updated/attached/detached exist as enum values
 // but are intentionally not recorded, so they're not offered as filters.
-const EVENT_COLOR: Record<string, string> = {
-  created: 'green',
-  deleted: 'red',
-  phase_to_metered: 'blue',
-  phase_left_metered: 'orange'
+const EVENT_STATUS: Record<string, StatusType> = {
+  created: 'success',
+  deleted: 'error',
+  phase_to_metered: 'transitioning',
+  phase_left_metered: 'warning'
 };

 // Humanize a failure phase enum for display, e.g. "SSHPublicKeyCreateFailed" →
@@ -186,7 +187,12 @@ const ResourceEvents: React.FC = () => {
        dataIndex: 'event_type',
        key: 'event_type',
        render: (v: string) => (
-          <Tag color={EVENT_COLOR[v] ?? 'default'}>{EVENT_LABEL[v] ?? v}</Tag>
+          <StatusDot
+            statusValue={{
+              status: EVENT_STATUS[v] ?? 'inactive',
+              text: EVENT_LABEL[v] ?? v
+            }}
+          />
        ),
        width: 180
      },
@@ -186,6 +186,7 @@ const Users: React.FC = () => {
        ></FilterBar>
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
+            className={'scroll-table'}
            columns={columns}
            dataSource={dataList}
            rowSelection={rowSelection}
Author	SHA1	Message	Date
hibigandgithub-actions[bot]	eedc5b295a	chore: bump @gpustack/core-ui to v1.0.41	2026-07-22 02:36:57 +00:00
Yuxing Dengandjialin	5ee62f267c	feat(billing): on-card charge/pay badge slots for models & instance types Add the plugin-fed billing price-badge slots to the model cards and the gpu-instance-type / storage cards so the enterprise plugin can surface charge / pay indicators inline.	2026-07-22 09:46:11 +08:00
jialinandjialin	ba0b2bb2c3	feat(maas-provider): allow clearing the model AutoComplete	2026-07-20 20:24:28 +08:00
jialinandjialin	c3bdbc200e	style(backends): elevate community card and version title backgrounds	2026-07-20 20:24:28 +08:00
jialinandjialin	63b06e595e	feat(access-control): render principals Add button in host holder slot	2026-07-20 20:24:28 +08:00
jialinandjialin	27210da13a	style(alert): tighten with-description padding, icon size, and title line-height	2026-07-20 20:24:28 +08:00
jialinandjialin	831a760246	style: adjust table row bg/height, container color, auto table layout	2026-07-20 15:55:39 +08:00
jialinandjialin	ae06ad7aae	feat(workers): add tooltip hint on VRAM index, merge index+bar trigger Blue dashed underline on the VRAM GPU index; index and ProgressBar share one Tooltip trigger showing the memory detail.	2026-07-20 15:55:39 +08:00
jialinandjialin	b3b819a080	refactor: rename gpu-usage-cell to dual-arc-gauge, refine colors Fixed blue for allocated (var(--ant-blue-6), theme-independent), gray dot when allocated is 0, dashed underline interaction hint.	2026-07-20 15:55:39 +08:00
jialinandjialin	aa47c626ba	feat: add GpuUsageCell component Semicircle dual-arc gauge (used/allocated) with hover Popover for GPU memory usage in table cells.	2026-07-20 15:55:39 +08:00
hibigandjialin	79e4a60d52	chore: bump @gpustack/core-ui to v1.0.40	2026-07-20 14:39:18 +08:00
jialinandjialin	d9a467f9f9	chore(llmodels): fix createTime column width, tidy imports CI / deps (push) Has been cancelled Details CI / build (push) Has been cancelled Details CI / build-publish (push) Has been cancelled Details CI / trigger-backend (push) Has been cancelled Details	2026-07-17 17:04:57 +08:00
jialinandjialin	c6b89f688e	refactor(tags): use TextAttribute/ThemeTag, drop redundant fit-content	2026-07-17 17:04:57 +08:00
jialinandjialin	2164a8198b	feat(usage): use StatusDot for event type column Replace antd Tag with core-ui StatusDot (dot + text), mapping event types to StatusType semantic colors.	2026-07-17 17:04:57 +08:00
hibigandjialin	0f0e92379b	chore: bump @gpustack/core-ui to v1.0.39	2026-07-17 16:56:51 +08:00
jialinandjialin	d8cb5261b9	feat(user-models): fall back to category icon when no brand logo matches	2026-07-16 18:00:27 +08:00
jialinandjialin	e30dd10fe4	style(cluster-management): child-row text color and created_at width	2026-07-16 18:00:27 +08:00
jialinandjialin	67e2d914f4	refactor(tables): share parent column grid in expandable child rows - llmodels/model-routes/cluster child rows use ExpandedRowGrid + Cell (auto-flow spans, no parent-key/grid-line math) - define --seal-table-row-min-height token in global.less - routes created_at column: span -> fixed width 180	2026-07-16 13:09:18 +08:00
hibigandjialin	938aef6c26	chore: bump @gpustack/core-ui to v1.0.38	2026-07-16 13:05:16 +08:00
jialinandjialin	eb029a3e2a	fix(table): smooth list empty/loading transitions, no layout jump on entry Reserve a stable block for the empty/loading state (matching the NoResult height) and fade the empty state in, so entering a list page no longer jumps between spinner, empty result, and rows. Apply scroll-table to the antd main lists and pass emptyMinHeight to the SealTable-based lists.	2026-07-15 14:05:19 +08:00
hibigandjialin	2dd287bbc1	chore: bump @gpustack/core-ui to v1.0.37	2026-07-15 13:43:46 +08:00
jialinandjialin	3c00317aeb	fix(models): cancel model-route-targets watch on inactive tab	2026-07-14 20:26:47 +08:00