style(cluster): center pool replicas cell

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.41",
+    "@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.41
-        version: 1.0.41(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.41':
-    resolution: {integrity: sha512-Q4mgdjZpvuE5XDioV7MHoVVHK6k7LNzVkq0zGVln1IzAYW7ldpzQPoj/zARXqGWQLAvHLiO03PfEjiP8cE9fdQ==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.41.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.41(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/config/theme/light.ts

@@ -51,6 +51,9 @@ export default {
       withDescriptionPadding: '12px 16px',
       withDescriptionIconSize: 18
     },
+    Card: {
+      headerHeight: 50
+    },
     Menu: {
       iconSize: 16,
       iconMarginInlineEnd: 12,

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/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/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';
@@ -17,8 +17,6 @@ import {
   Empty,
   Flex,
   Form,
-  Radio,
-  RadioChangeEvent,
   Tooltip
 } from 'antd';
 import {
@@ -82,7 +80,8 @@ const Label = styled.div`
   gap: 4px;
   font-weight: 500;
   margin-bottom: 16px;
-  font-size: 14px;
+  font-size: 13px;
+  color: var(--ant-color-text-secondary);
 `;
 
 interface AccessControlFormProps {
@@ -231,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 {
@@ -399,72 +396,82 @@ 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>
 
-      <Flex
-        align="center"
-        justify="space-between"
-        style={{ marginBottom: 16, height: 40 }}
+      <Form.Item<AccessControlFormData>
+        name="access_policy"
+        style={{
+          marginBottom: 16
+        }}
       >
-        <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>
+        <CardRadioGroup
+          onChange={handleOnPolicyChange}
+          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'
+              }),
+              description: intl.formatMessage({
+                id: 'models.accessSettings.authed.tips'
+              }),
+              value: 'authed'
+            },
+            allowedUsersOverride
+              ? {
+                  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'
+            }
+          ]}
+        />
+      </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

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;