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

2026-07-17 08:54:14 +00:00
32 changed files with 186 additions and 569 deletions
@@ -124,24 +124,13 @@ Always check `@gpustack/core-ui` first. Frequently reused:
 - **Form fields**: `BaseSelect`, `Input` (labeled).
 - **Text overflow**: `AutoTooltip`.
 - **Icons**: `IconFont`.
- **Tags & status** (4 variants): see the section below.
+- **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`.
 # 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.42",
+    "@gpustack/core-ui": "^1.0.39",
    "@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.42
+        specifier: ^1.0.39
-        version: 1.0.42(czdvzceysqw7iv6pct2ucnb23e)
+        version: 1.0.39(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.42':
+  '@gpustack/core-ui@1.0.39':
-    resolution: {integrity: sha512-upMClTHU+xAqd8dlx0w1S9XWHlog5g1hcOCulTk2rmMXqgl66QHfqhEFhJnWIGe1xc8tEj6rW3r5Sirif+qswA==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.42.tgz}
+    resolution: {integrity: sha512-6NS0TDkBFHK6RipfvLwvDnLZlAoa/yFbHV+xeERAnUb+4t0mDyIQFqvYAeDgrUW/JIZ6WScrm31FDZe2sKiuaw==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.39.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.42(czdvzceysqw7iv6pct2ucnb23e)':
+  '@gpustack/core-ui@1.0.39(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)
@@ -1,3 +0,0 @@
 .ant-alert-with-description .ant-alert-title {
  line-height: 1;
 }
@@ -1,5 +1,4 @@
@import './table.less';
@import './alert.less';
 .m-b-20 {
  margin-bottom: 20px;
@@ -43,10 +43,6 @@ 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(247 247 247)',
+      rowSelectedHoverBg: 'rgb(249 249 249)',
-      rowHoverBg: 'rgb(247 247 247)',
+      rowHoverBg: 'rgb(249 249 249)',
      rowSelectedBg: 'transparent',
      headerSortActiveBg: 'transparent',
      headerSortHoverBg: 'transparent',
@@ -47,13 +47,6 @@ export default {
    DatePicker: {
      fontSizeLG: 14
    },
    Alert: {
      withDescriptionPadding: '12px 16px',
      withDescriptionIconSize: 18
    },
    Card: {
      headerHeight: 50
    },
    Menu: {
      iconSize: 16,
      iconMarginInlineEnd: 12,
@@ -123,7 +116,7 @@ export default {
    borderRadiusLG: 6,
    borderRadius: 4,
    borderRadiusSM: 3,
-    colorBgContainer: '#fdfdfd',
+    colorBgContainer: '#fff',
    fontSize: 14,
    motion: true
  }
@@ -21,6 +21,8 @@ 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;
@@ -74,6 +76,7 @@ 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%);
@@ -98,6 +101,7 @@ 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;
@@ -112,9 +116,19 @@ 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;
 }
@@ -197,7 +211,7 @@ body {
    tr > td {
      border-bottom: none;
-      height: var(--seal-table-row-min-height);
+      height: 68px;
    }
  }
@@ -8,38 +8,24 @@ const findValidJSONStrings = (inputStr: string) => {
    const openingBraceIndex = inputStr.indexOf('{', startIndex);
    if (openingBraceIndex === -1) break; // No more opening braces
-    // find the matching closing brace, ignoring braces inside string
+    let closingBraceIndex = openingBraceIndex;
    // literals (e.g. a state_message containing `{`/`}`)
    let closingBraceIndex = -1;
    let braceCount = 0;
    let inString = false;
    let escaped = false;
-    for (let i = openingBraceIndex; i < inputStr.length; i++) {
+    // find  couple of braces
-      const char = inputStr[i];
+    while (closingBraceIndex < inputStr.length) {
-      if (inString) {
+      if (inputStr[closingBraceIndex] === '{') {
        if (escaped) {
          escaped = false;
        } else if (char === '\\') {
          escaped = true;
        } else if (char === '"') {
          inString = false;
        }
      } else if (char === '"') {
        inString = true;
      } else if (char === '{') {
        braceCount++;
-      } else if (char === '}') {
+      } else if (inputStr[closingBraceIndex] === '}') {
        braceCount--;
        if (braceCount === 0) {
          closingBraceIndex = i;
          break;
        }
      }
      if (braceCount === 0) {
        break;
      }
      closingBraceIndex++;
    }
-    if (closingBraceIndex === -1) {
+    if (braceCount !== 0) {
-      //  no matching closing brace yet, wait for more data
+      //  no matching closing brace
      break;
    }
@@ -51,11 +37,11 @@ const findValidJSONStrings = (inputStr: string) => {
    try {
      const parsedData = JSON.parse(jsonString);
      validJSONStrings.push(parsedData);
      startIndex = closingBraceIndex + 1;
    } catch (error) {
-      // skip the malformed segment instead of breaking, otherwise it jams
+      // mabye invalid JSON
-      // the buffer and every later event on this stream is lost
+      break;
    }
    startIndex = closingBraceIndex + 1;
  }
  return {
@@ -43,11 +43,8 @@ export const createAxiosToken = (): CancelTokenSource => {
 };
 export const sliceData = (data: string, loaded: number, loadedSize: any) => {
  // `loaded` is a byte count while `data` is a UTF-16 string; with any
  // non-ASCII payload the two drift apart, so track consumed characters by
  // string length only
  const result = data.slice(loadedSize.current);
-  loadedSize.current = data.length;
+  loadedSize.current = loaded;
  return result;
 };
@@ -1,208 +0,0 @@
 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,8 +60,7 @@ 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,12 +6,10 @@ import {
  AutoTooltip,
  DropdownButtons,
  IconFont,
-  icons,
+  icons
  TextAttribute,
  ThemeTag
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { MenuProps, Tooltip } from 'antd';
+import { MenuProps, Tag, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
@@ -141,14 +139,23 @@ const useModelsColumns = ({
        key: 'name',
        sorter: tableSorter(1),
        render: (text: string, record: ListItem) => (
-          <span className="flex items-center gap-8">
+          <span className="flex items-center">
            <AutoTooltip ghost style={{ maxWidth: 400 }} title={text}>
              <span className="text-primary">{text}</span>
            </AutoTooltip>
            {record.is_custom && (
-              <TextAttribute>
+              <Tag
                style={{
                  marginLeft: 8,
                  borderRadius: 12,
                  color: 'var(--ant-color-text-tertiary)',
                  borderColor: 'var(--ant-color-split)',
                  backgroundColor: 'transparent'
                }}
                variant="outlined"
              >
                {intl.formatMessage({ id: 'playground.params.custom' })}
-              </TextAttribute>
+              </Tag>
            )}
          </span>
        )
@@ -196,13 +203,26 @@ const useModelsColumns = ({
            )}
            {(record.scope?.includes('inference') ||
              record.scope?.includes('*')) && (
-              <ThemeTag>
+              <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'
                }}
              >
                <AutoTooltip ghost>
                  {record.allowed_model_names?.length
                    ? record.allowed_model_names.join(', ')
                    : intl.formatMessage({ id: 'apikeys.models.all' })}
                </AutoTooltip>
-              </ThemeTag>
+              </div>
            )}
          </div>
        )
@@ -120,19 +120,13 @@ const CommunityBackends: React.FC<{
  const renderItem = (item: ListItem) => {
    return (
-      <div
+      <BackendCard
-        style={{
+        active={currentData?.id === item.id}
-          backgroundColor: 'var(--ant-color-bg-container)'
+        data={item}
-        }}
+        layout="community"
-      >
+        onClick={handleOnClickItem}
-        <BackendCard
+        actionsRenderer={actionsRenderer}
-          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-elevated);
+  background-color: var(--ant-color-bg-container);
  font-weight: 600;
  padding-top: 8px;
  padding-bottom: 8px;
@@ -163,11 +163,7 @@ const PoolRows: React.FC<PoolRowsProps> = ({
                  key={col.dataIndex || col.key}
                  span={spanFor(col.dataIndex)}
                  style={{
-                    color: 'var(--ant-color-text-secondary)',
+                    color: 'var(--ant-color-text-secondary)'
                    // CellContent shrinks to its content inside the flex
                    // cell, so its own align class can't center it —
                    // center at the cell level instead.
                    justifyContent: col.align
                  }}
                >
                  <CellContent
@@ -153,7 +153,7 @@ const useClusterColumns = (
        span: 3,
        render: (text: string, record: ClusterListItem) => (
          <>
-            <AutoTooltip ghost title={text} minWidth={20}>
+            <AutoTooltip ghost title={text}>
              <span className="text-primary">{record.name}</span>
            </AutoTooltip>
            {record.is_default && (
@@ -176,7 +176,6 @@ const useClusterColumns = (
        dataIndex: 'provider',
        sorter: tableSorter(2),
        span: spans.provider,
        minWidth: 110,
        render: (value: string) => (
          <AutoTooltip ghost minWidth={20}>
            {ProviderLabelMap[value]}
@@ -186,7 +185,7 @@ const useClusterColumns = (
      {
        title: intl.formatMessage({ id: 'dashboard.totalgpus' }),
        dataIndex: 'gpus',
-        width: 100,
+        span: 2,
        sorter: tableSorter(3),
        render: (value: number) => <span>{value}</span>
      },
@@ -195,15 +194,13 @@ const useClusterColumns = (
        dataIndex: 'models',
        sorter: tableSorter(4),
        span: spans.deployments,
        maxWidth: 150,
        render: (value: number) => <span>{value}</span>
      },
      {
        title: intl.formatMessage({ id: 'resources.nodes' }),
        dataIndex: 'workers',
        minWidth: 100,
        maxWidth: 120,
        sorter: tableSorter(5),
        span: spans.workers,
        render: (value: number, record: ClusterListItem) => (
          <span>
            {record.ready_workers} / {record.workers}
@@ -214,8 +211,6 @@ const useClusterColumns = (
        title: intl.formatMessage({ id: 'common.table.status' }),
        dataIndex: 'state',
        span: spans.status,
        minWidth: 80,
        align: 'center',
        render: (value: number, record: ClusterListItem) => (
          <StatusTag
            statusValue={{
@@ -116,7 +116,6 @@ const usePoolsColumns = (
        dataIndex: 'replicas',
        span: 6,
        key: 'replicas',
        align: 'center',
        editable: {
          valueType: 'number',
          title: intl.formatMessage({ id: 'models.table.replicas.edit' })
@@ -1,4 +1,3 @@
 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';
@@ -272,10 +271,6 @@ const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({ item }) => {
              {cpuManufacturer}
            </ThemeTag>
          )}
          <PluginExtraFields
            name="InstanceTypeBillingBadge"
            context={{ instanceType: item }}
          />
        </Flex>
      </Title>
      <InstanceMetadataSection spec={specData}></InstanceMetadataSection>
@@ -1,4 +1,3 @@
 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';
@@ -41,10 +40,6 @@ 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 (
@@ -28,13 +28,21 @@ interface ColumnsHookProps {
 const getKindLabel = (record: ListItem) => {
  if (record.spec?.nfs)
    return (
-      <ThemeTag color="cyan" icon={<FolderOutlined />}>
+      <ThemeTag
        style={{ width: 'fit-content' }}
        color="cyan"
        icon={<FolderOutlined />}
      >
        {StorageTypeKindLabelMap.nfs}
      </ThemeTag>
    );
  if (record.spec?.s3)
    return (
-      <ThemeTag color="green" icon={<IconFont type="icon-database" />}>
+      <ThemeTag
        style={{ width: 'fit-content' }}
        color="green"
        icon={<IconFont type="icon-database" />}
      >
        {StorageTypeKindLabelMap.s3}
      </ThemeTag>
    );
@@ -6,7 +6,7 @@ import { getGPUStackPlugin } from '@/plugins';
 import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import {
  AlertBlockInfo,
-  CardRadioGroup,
+  TooltipList,
  Transfer as TransferInner
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
@@ -15,8 +15,9 @@ import {
  Dropdown,
  DropdownProps,
  Empty,
  Flex,
  Form,
  Radio,
  RadioChangeEvent,
  Tooltip
 } from 'antd';
 import {
@@ -79,9 +80,9 @@ const Label = styled.div`
  align-items: center;
  gap: 4px;
  font-weight: 500;
-  margin-bottom: 16px;
+  margin-block: 8px 12px;
-  font-size: 13px;
+  font-size: 14px;
-  color: var(--ant-color-text-secondary);
+  color: var(--ant-color-text-tertiary);
 `;
 interface AccessControlFormProps {
@@ -106,14 +107,6 @@ 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
@@ -230,7 +223,9 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
    }
  };
-  const handleOnPolicyChange = async (policy: string) => {
+  const handleOnPolicyChange = async (e: RadioChangeEvent) => {
    console.log('policy changed:', e.target.value);
    const policy = e.target.value;
    if (policy === ALLOWED_PRINCIPALS_POLICY) {
      form.setFieldsValue({ users: formDataCacheRef.current?.users || [] });
    } else {
@@ -396,29 +391,33 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
            : undefined
      }}
    >
-      <Label>{intl.formatMessage({ id: 'models.table.accessScope' })}</Label>
+      <Label>
        {intl.formatMessage({ id: 'models.table.accessScope' })}
        <Tooltip
          title={
            <TooltipList
              list={buildAccessScopeTips(
                allowedUsersOverride,
                prependedPolicies
              )}
            ></TooltipList>
          }
        >
          <QuestionCircleOutlined />
        </Tooltip>
      </Label>
-      <Form.Item<AccessControlFormData>
+      <Form.Item<AccessControlFormData> name="access_policy" noStyle>
-        name="access_policy"
+        <Radio.Group
        style={{
          marginBottom: 16
        }}
      >
        <CardRadioGroup
          onChange={handleOnPolicyChange}
          style={{ marginBottom: 12 }}
          options={[
            ...prependedPolicies.map((p) => ({
              label: intl.formatMessage({ id: p.labelId }),
              description: intl.formatMessage({ id: p.tipsId ?? p.labelId }),
              value: p.policyValue
            })),
            {
-              label: intl.formatMessage({
+              label: intl.formatMessage({ id: 'models.accessSettings.authed' }),
                id: 'models.accessSettings.authed'
              }),
              description: intl.formatMessage({
                id: 'models.accessSettings.authed.tips'
              }),
              value: 'authed'
            },
            allowedUsersOverride
@@ -426,52 +425,23 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
                  label: intl.formatMessage({
                    id: allowedUsersOverride.labelId
                  }),
                  description: intl.formatMessage({
                    id:
                      allowedUsersOverride.tipsId ??
                      'models.accessSettings.allowedUsers.tips'
                  }),
                  value: allowedUsersOverride.policyValue
                }
              : {
                  label: intl.formatMessage({
                    id: 'models.accessSettings.allowedUsers'
                  }),
                  description: intl.formatMessage({
                    id: 'models.accessSettings.allowedUsers.tips'
                  }),
                  value: ALLOWED_PRINCIPALS_POLICY
                },
            {
              label: intl.formatMessage({
                id: 'models.accessSettings.public'
              }),
              description: intl.formatMessage({
                id: 'models.accessSettings.public.desc'
              }),
              value: 'public'
            }
          ]}
-        />
+        ></Radio.Group>
      </Form.Item>
      {allowedUsersOverride?.Action && accessPolicy === overridePolicyValue && (
        <Flex
          justify="space-between"
          align="center"
          style={{ marginBottom: 8 }}
        >
          <Label style={{ marginBottom: 0 }}>
            {intl.formatMessage({
              id: 'models.accessSettings.grantedPrincipals'
            })}
          </Label>
          <allowedUsersOverride.Action
            form={form}
            routeId={currentData?.id}
            action={action}
          />
        </Flex>
      )}
      {accessPolicy === 'public' && (
        <div style={{ marginBlock: '16px 12px' }}>
          <AlertBlockInfo
@@ -479,13 +449,6 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
            message={intl.formatMessage({
              id: 'models.accessSettings.public.tips'
            })}
            overlayScrollerProps={{
              styles: {
                wrapper: {
                  paddingLeft: 0
                }
              }
            }}
          ></AlertBlockInfo>
        </div>
      )}
@@ -130,9 +130,7 @@ const AccessControlModal: React.FC<
            <AlertBlockInfo
              type="warning"
              style={{ marginBottom: 16 }}
-              contentStyle={{
+              contentStyle={{ paddingInline: 0 }}
                paddingInline: 0
              }}
              message={intl.formatMessage({
                id: 'models.button.accessSettings.tips'
              })}
@@ -1,13 +1,12 @@
 import PluginExtraFields from '@/components/plugin-extra-fields';
 import {
  IconFont,
-  StatusDot,
+  StatusTag,
  TagsWrapper,
  TemplateCard,
  ThemeTag
 } from '@gpustack/core-ui';
 import { useIntl, useNavigate } from '@umijs/max';
-import { Button, Tooltip } from 'antd';
+import { Button } from 'antd';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -193,23 +192,6 @@ 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
@@ -228,32 +210,18 @@ const ModelItem: React.FC<{
              ) : (
                <ModelLogo src={defaultModelLogo} alt="" />
              )}
-              <span className="flex-center" style={{ gap: 8, minWidth: 0 }}>
+              <span>{model.name}</span>
                <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>
        }
      >
@@ -248,13 +248,7 @@ const Models = forwardRef((props, ref) => {
      chunkInstanceRequedtRef.current = setModelInstanceChunkRequest({
        url: `${MODEL_INSTANCE_API}`,
        params: {},
-        handler: updateInstanceHandler,
+        handler: updateInstanceHandler
        beforeReconnect() {
          // treat the reconnect snapshot as the new baseline, otherwise
          // instances deleted while the stream was down linger in the cache
          // (their DELETE events are never re-sent)
          cacheInsDataListRef.current = [];
        }
      });
    } catch (error) {
      // ignore
@@ -458,20 +452,6 @@ const Models = forwardRef((props, ref) => {
    };
  }, []);
  // watch events can still be lost (stream hiccup, reconnect gap); a low
  // frequency relist keeps the instance cache eventually consistent, so a
  // missed DELETE event can't leave a stale instance behind for good
  useEffect(() => {
    const timer = setInterval(() => {
      if (!isPageHidden.current) {
        getAllModelInstances();
      }
    }, 60 * 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  const setDisableExpand = useMemoizedFn((record: any) => {
    return !record?.replicas;
  });
@@ -153,50 +153,26 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
  // Use the seed callback (not handleClusterChange) so this auto-pick refreshes
  // options without firing an evaluate request before a model is selected.
  useEffect(() => {
-    // Options derive from clusterList: an empty source list means clusters
+    if (!clusterOptions?.length) {
    // are still loading — leave the field alone until they arrive.
    if (!clusterList?.length) {
      return;
    }
    // Scope off the live form value, not the `useWatch` snapshot: the scope
    // field's default lands in a child effect that flushes before this one,
    // while the watch still reports the previous render's null — scoping off
    // the watch would seed a cluster from the unscoped list here and only
    // re-scope a render later.
    const liveScopeOrgId = form.getFieldValue('organization_id') ?? null;
    const scoped = clusterList.filter(
      (item) =>
        liveScopeOrgId == null || item.owner_principal_id === liveScopeOrgId
    );
    const current = form.getFieldValue('cluster_id');
-    if (!scoped.length) {
+    const stillValid = clusterOptions.some((c) => c.value === current);
      // Clusters are loaded but the picked org owns none. Any leftover
      // selection points at another org's cluster (seeded before the scope
      // settled) and would make requests fail with "Cluster not found" —
      // clear it so the required rule surfaces instead. Create only: an
      // edit's cluster is existing data, not a seed.
      if (action === PageAction.CREATE && current != null) {
        form.setFieldValue('cluster_id', undefined);
      }
      return;
    }
    const stillValid = scoped.some((c) => c.value === current);
    if (current != null && stillValid) {
      return;
    }
    const next =
-      scoped.find((c) => c.is_default)?.value ??
+      clusterOptions.find((c) => c.is_default)?.value ??
-      scoped.find((c) => c.state === ClusterStatusValueMap.Ready)?.value ??
+      clusterOptions.find((c) => c.state === ClusterStatusValueMap.Ready)
-      scoped[0]?.value ??
+        ?.value ??
      clusterOptions[0]?.value ??
      null;
    if (next == null || next === current) {
      return;
    }
    form.setFieldValue('cluster_id', next);
    onClusterSeed?.(next);
-    // `clusterOptions` is the re-run trigger for scope changes: it recomputes
+  }, [clusterOptions, form, onClusterSeed]);
    // whenever the watched org scope or the cluster list settles.
  }, [clusterOptions, clusterList, action, form, onClusterSeed]);
  const clusterOptionRender = (option: any) => {
    const { data } = option;
@@ -268,7 +268,7 @@ const useModelsColumns = ({
        dataIndex: 'created_at',
        key: 'created_at',
        sorter: tableSorter(5),
-        width: 180,
+        span: spans.createTime,
        render: (text: number) => (
          <AutoTooltip ghost>
            {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -1,4 +1,3 @@
 import PluginExtraFields from '@/components/plugin-extra-fields';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { SyncOutlined } from '@ant-design/icons';
 import {
@@ -269,10 +268,6 @@ const UserModels: React.FC = () => {
            </Space>
          }
        ></PageTools>
        <PluginExtraFields
          name="ModelBillingProvider"
          context={{ models: dataList }}
        />
        <InfiniteScrollerProvider
          value={{
            total: dataSource.totalPage,
@@ -177,7 +177,6 @@ const ModelItem: React.FC<ModelItemProps> = ({
        <span>
          <AutoComplete
            loading={loading}
            allowClear
            showSearch={{
              filterOption: (inputValue, option: any) => {
                return (
@@ -300,7 +300,6 @@ const Workers: React.FC<WorkersProps> = ({ clusterId, source }) => {
        ></FilterBar>
        <ConfigProvider renderEmpty={renderEmpty}>
          <Table
            tableLayout="auto"
            columns={columns}
            sortDirections={TABLE_SORT_DIRECTIONS}
            showSorterTooltip={false}
@@ -26,7 +26,7 @@ import { Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { useAtom, useAtomValue } from 'jotai';
 import _ from 'lodash';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import semverCoerce from 'semver/functions/coerce';
 import semverGt from 'semver/functions/gt';
 import { status, WorkerStatusMap, WorkerStatusMapValue } from '../config';
@@ -143,57 +143,15 @@ 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;
@@ -202,11 +160,36 @@ const VRAMCell = ({
    {_.map(
      _.sortBy(devices || [], ['index']),
      (item: GPUDeviceItem, index: number) => (
-        <VRAMItem
+        <span key={index} className="flex-center">
-          key={index}
+          <span
-          item={item}
+            className="m-r-5"
-          autoOpen={rIndex === 0 && index === 0 && loadend && firstLoad}
+            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>
      )
    )}
  </span>
@@ -515,7 +498,6 @@ const useWorkerColumns = ({
      {
        title: 'GPU',
        dataIndex: 'gpu',
        minWidth: 100,
        render: (_, record) =>
          statusAvailable(record) ? (
            <GPUCell devices={record?.status?.gpu_devices} />
@@ -526,11 +508,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}
@@ -542,7 +524,6 @@ const useWorkerColumns = ({
      {
        title: intl.formatMessage({ id: 'resources.table.disk' }),
        dataIndex: 'storage',
        minWidth: 100,
        render: (_, record) => (
          <span className="flex-center flex-full">
            {statusAvailable(record) ? (
@@ -8,11 +8,10 @@
 * tab (date range + "filter by user" for managers); the resource-type /
 * event-type selects ride in the bar's ``extra`` slot.
 */
-import { type StatusType } from '@/config/types';
+import { SimpleSelect } from '@gpustack/core-ui';
 import { SimpleSelect, StatusDot } from '@gpustack/core-ui';
 import { useAccess, useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Input, Select, Table } from 'antd';
+import { Input, Select, Table, Tag } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -24,11 +23,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_STATUS: Record<string, StatusType> = {
+const EVENT_COLOR: Record<string, string> = {
-  created: 'success',
+  created: 'green',
-  deleted: 'error',
+  deleted: 'red',
-  phase_to_metered: 'transitioning',
+  phase_to_metered: 'blue',
-  phase_left_metered: 'warning'
+  phase_left_metered: 'orange'
 };
 // Humanize a failure phase enum for display, e.g. "SSHPublicKeyCreateFailed" →
@@ -187,12 +186,7 @@ const ResourceEvents: React.FC = () => {
        dataIndex: 'event_type',
        key: 'event_type',
        render: (v: string) => (
-          <StatusDot
+          <Tag color={EVENT_COLOR[v] ?? 'default'}>{EVENT_LABEL[v] ?? v}</Tag>
            statusValue={{
              status: EVENT_STATUS[v] ?? 'inactive',
              text: EVENT_LABEL[v] ?? v
            }}
          />
        ),
        width: 180
      },