style(cluster): center pool replicas cell

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.

CLAUDE.md

@@ -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:

package.json

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

pnpm-lock.yaml

@@ -24,8 +24,8 @@ importers:
         specifier: ^7.1.1
         version: 7.1.2
       '@gpustack/core-ui':
-        specifier: ^1.0.39
-        version: 1.0.39(czdvzceysqw7iv6pct2ucnb23e)
+        specifier: ^1.0.42
+        version: 1.0.42(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.39':
-    resolution: {integrity: sha512-6NS0TDkBFHK6RipfvLwvDnLZlAoa/yFbHV+xeERAnUb+4t0mDyIQFqvYAeDgrUW/JIZ6WScrm31FDZe2sKiuaw==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.39.tgz}
+  '@gpustack/core-ui@1.0.42':
+    resolution: {integrity: sha512-upMClTHU+xAqd8dlx0w1S9XWHlog5g1hcOCulTk2rmMXqgl66QHfqhEFhJnWIGe1xc8tEj6rW3r5Sirif+qswA==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.42.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.39(czdvzceysqw7iv6pct2ucnb23e)':
+  '@gpustack/core-ui@1.0.42(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)

src/assets/styles/alert.less

@@ -0,0 +1,3 @@
+.ant-alert-with-description .ant-alert-title {
+  line-height: 1;
+}

src/assets/styles/common.less

@@ -1,4 +1,5 @@
 @import './table.less';
+@import './alert.less';
 
 .m-b-20 {
   margin-bottom: 20px;

src/config/theme/dark.ts

@@ -43,6 +43,10 @@ export default {
     DatePicker: {
       fontSizeLG: 14
     },
+    Alert: {
+      withDescriptionPadding: '12px 16px',
+      withDescriptionIconSize: 18
+    },
     Menu: {
       iconSize: 16,
       iconMarginInlineEnd: 12,

src/config/theme/light.ts

@@ -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,13 @@ export default {
     DatePicker: {
       fontSizeLG: 14
     },
+    Alert: {
+      withDescriptionPadding: '12px 16px',
+      withDescriptionIconSize: 18
+    },
+    Card: {
+      headerHeight: 50
+    },
     Menu: {
       iconSize: 16,
       iconMarginInlineEnd: 12,
@@ -116,7 +123,7 @@ export default {
     borderRadiusLG: 6,
     borderRadius: 4,
     borderRadiusSM: 3,
-    colorBgContainer: '#fff',
+    colorBgContainer: '#fdfdfd',
     fontSize: 14,
     motion: true
   }

src/global.less

@@ -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%);
@@ -101,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;
@@ -116,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;
 }
 
@@ -211,7 +197,7 @@ body {
 
     tr > td {
       border-bottom: none;
-      height: 68px;
+      height: var(--seal-table-row-min-height);
     }
   }
 

src/hooks/json-parser-worker.ts

@@ -8,24 +8,38 @@ const findValidJSONStrings = (inputStr: string) => {
     const openingBraceIndex = inputStr.indexOf('{', startIndex);
     if (openingBraceIndex === -1) break; // No more opening braces
 
-    let closingBraceIndex = openingBraceIndex;
+    // find the matching closing brace, ignoring braces inside string
+    // literals (e.g. a state_message containing `{`/`}`)
+    let closingBraceIndex = -1;
     let braceCount = 0;
+    let inString = false;
+    let escaped = false;
 
-    // find  couple of braces
-    while (closingBraceIndex < inputStr.length) {
-      if (inputStr[closingBraceIndex] === '{') {
+    for (let i = openingBraceIndex; i < inputStr.length; i++) {
+      const char = inputStr[i];
+      if (inString) {
+        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 (inputStr[closingBraceIndex] === '}') {
+      } else if (char === '}') {
         braceCount--;
+        if (braceCount === 0) {
+          closingBraceIndex = i;
+          break;
+        }
       }
-      if (braceCount === 0) {
-        break;
-      }
-      closingBraceIndex++;
     }
 
-    if (braceCount !== 0) {
-      //  no matching closing brace
+    if (closingBraceIndex === -1) {
+      //  no matching closing brace yet, wait for more data
       break;
     }
 
@@ -37,11 +51,11 @@ const findValidJSONStrings = (inputStr: string) => {
     try {
       const parsedData = JSON.parse(jsonString);
       validJSONStrings.push(parsedData);
-      startIndex = closingBraceIndex + 1;
     } catch (error) {
-      // mabye invalid JSON
-      break;
+      // skip the malformed segment instead of breaking, otherwise it jams
+      // the buffer and every later event on this stream is lost
     }
+    startIndex = closingBraceIndex + 1;
   }
 
   return {

src/hooks/use-chunk-request.ts

@@ -43,8 +43,11 @@ 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 = loaded;
+  loadedSize.current = data.length;
   return result;
 };
 

src/pages/_components/dual-arc-gauge/index.tsx

@@ -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;

src/pages/_components/model-tag.tsx

@@ -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}
     >

src/pages/api-keys/hooks/use-keys-columns.tsx

@@ -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>
         )

src/pages/backends/community/commnity-backends.tsx

@@ -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>
     );
   };
 

src/pages/backends/forms/versions-config.tsx

@@ -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;

src/pages/cluster-management/components/pool-rows.tsx

@@ -163,7 +163,11 @@ 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

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

@@ -153,7 +153,7 @@ const useClusterColumns = (
         span: 3,
         render: (text: string, record: ClusterListItem) => (
           <>
-            <AutoTooltip ghost title={text}>
+            <AutoTooltip ghost title={text} minWidth={20}>
               <span className="text-primary">{record.name}</span>
             </AutoTooltip>
             {record.is_default && (
@@ -176,6 +176,7 @@ const useClusterColumns = (
         dataIndex: 'provider',
         sorter: tableSorter(2),
         span: spans.provider,
+        minWidth: 110,
         render: (value: string) => (
           <AutoTooltip ghost minWidth={20}>
             {ProviderLabelMap[value]}
@@ -185,7 +186,7 @@ const useClusterColumns = (
       {
         title: intl.formatMessage({ id: 'dashboard.totalgpus' }),
         dataIndex: 'gpus',
-        span: 2,
+        width: 100,
         sorter: tableSorter(3),
         render: (value: number) => <span>{value}</span>
       },
@@ -194,13 +195,15 @@ 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}
@@ -211,6 +214,8 @@ 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={{

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

@@ -116,6 +116,7 @@ const usePoolsColumns = (
         dataIndex: 'replicas',
         span: 6,
         key: 'replicas',
+        align: 'center',
         editable: {
           valueType: 'number',
           title: intl.formatMessage({ id: 'models.table.replicas.edit' })

src/pages/gpu-service/instances/components/instance-type-item.tsx

@@ -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>

src/pages/gpu-service/instances/components/instance-type-list.tsx

@@ -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 (

src/pages/gpu-service/storage-types/hooks/use-storage-type-columns.tsx

@@ -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>
     );

src/pages/llmodels/components/access-control-modal/form.tsx

@@ -6,7 +6,7 @@ import { getGPUStackPlugin } from '@/plugins';
 import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import {
   AlertBlockInfo,
-  TooltipList,
+  CardRadioGroup,
   Transfer as TransferInner
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
@@ -15,9 +15,8 @@ import {
   Dropdown,
   DropdownProps,
   Empty,
+  Flex,
   Form,
-  Radio,
-  RadioChangeEvent,
   Tooltip
 } from 'antd';
 import {
@@ -80,9 +79,9 @@ const Label = styled.div`
   align-items: center;
   gap: 4px;
   font-weight: 500;
-  margin-block: 8px 12px;
-  font-size: 14px;
-  color: var(--ant-color-text-tertiary);
+  margin-bottom: 16px;
+  font-size: 13px;
+  color: var(--ant-color-text-secondary);
 `;
 
 interface AccessControlFormProps {
@@ -107,6 +106,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
@@ -223,9 +230,7 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
     }
   };
 
-  const handleOnPolicyChange = async (e: RadioChangeEvent) => {
-    console.log('policy changed:', e.target.value);
-    const policy = e.target.value;
+  const handleOnPolicyChange = async (policy: string) => {
     if (policy === ALLOWED_PRINCIPALS_POLICY) {
       form.setFieldsValue({ users: formDataCacheRef.current?.users || [] });
     } else {
@@ -391,33 +396,29 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
             : undefined
       }}
     >
-      <Label>
-        {intl.formatMessage({ id: 'models.table.accessScope' })}
-        <Tooltip
-          title={
-            <TooltipList
-              list={buildAccessScopeTips(
-                allowedUsersOverride,
-                prependedPolicies
-              )}
-            ></TooltipList>
-          }
-        >
-          <QuestionCircleOutlined />
-        </Tooltip>
-      </Label>
+      <Label>{intl.formatMessage({ id: 'models.table.accessScope' })}</Label>
 
-      <Form.Item<AccessControlFormData> name="access_policy" noStyle>
-        <Radio.Group
+      <Form.Item<AccessControlFormData>
+        name="access_policy"
+        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({ id: 'models.accessSettings.authed' }),
+              label: intl.formatMessage({
+                id: 'models.accessSettings.authed'
+              }),
+              description: intl.formatMessage({
+                id: 'models.accessSettings.authed.tips'
+              }),
               value: 'authed'
             },
             allowedUsersOverride
@@ -425,23 +426,52 @@ 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
@@ -449,6 +479,13 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
             message={intl.formatMessage({
               id: 'models.accessSettings.public.tips'
             })}
+            overlayScrollerProps={{
+              styles: {
+                wrapper: {
+                  paddingLeft: 0
+                }
+              }
+            }}
           ></AlertBlockInfo>
         </div>
       )}

src/pages/llmodels/components/access-control-modal/index.tsx

@@ -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'
               })}

src/pages/llmodels/components/model-item.tsx

@@ -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';
@@ -192,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
@@ -210,18 +228,32 @@ const ModelItem: React.FC<{
               ) : (
                 <ModelLogo src={defaultModelLogo} alt="" />
               )}
-              <span>{model.name}</span>
+              <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>
         }
       >

src/pages/llmodels/deployments.tsx

@@ -248,7 +248,13 @@ 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
@@ -452,6 +458,20 @@ 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;
   });

src/pages/llmodels/forms/basic.tsx

@@ -153,26 +153,50 @@ 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(() => {
-    if (!clusterOptions?.length) {
+    // Options derive from clusterList: an empty source list means clusters
+    // 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');
-    const stillValid = clusterOptions.some((c) => c.value === current);
+    if (!scoped.length) {
+      // 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 =
-      clusterOptions.find((c) => c.is_default)?.value ??
-      clusterOptions.find((c) => c.state === ClusterStatusValueMap.Ready)
-        ?.value ??
-      clusterOptions[0]?.value ??
+      scoped.find((c) => c.is_default)?.value ??
+      scoped.find((c) => c.state === ClusterStatusValueMap.Ready)?.value ??
+      scoped[0]?.value ??
       null;
     if (next == null || next === current) {
       return;
     }
     form.setFieldValue('cluster_id', next);
     onClusterSeed?.(next);
-  }, [clusterOptions, form, onClusterSeed]);
+    // `clusterOptions` is the re-run trigger for scope changes: it recomputes
+    // whenever the watched org scope or the cluster list settles.
+  }, [clusterOptions, clusterList, action, form, onClusterSeed]);
 
   const clusterOptionRender = (option: any) => {
     const { data } = option;

src/pages/llmodels/hooks/use-models-columns.tsx

@@ -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')}

src/pages/llmodels/user-models.tsx

@@ -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,

src/pages/maas-provider/forms/model-item.tsx

@@ -177,6 +177,7 @@ const ModelItem: React.FC<ModelItemProps> = ({
         <span>
           <AutoComplete
             loading={loading}
+            allowClear
             showSearch={{
               filterOption: (inputValue, option: any) => {
                 return (

src/pages/resources/components/workers.tsx

@@ -300,6 +300,7 @@ const Workers: React.FC<WorkersProps> = ({ clusterId, source }) => {
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            tableLayout="auto"
             columns={columns}
             sortDirections={TABLE_SORT_DIRECTIONS}
             showSorterTooltip={false}

src/pages/resources/hooks/use-worker-columns.tsx

@@ -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) ? (

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

@@ -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
       },