feat(gpu-service): restrict non-stopped instance edit, drop recreate

- non-stopped edit: only displayName and SSH public keys editable; type/template/storage sections disabled (stopped edit keeps all editable) - remove recreate feature and the realAction prop it required: entry, delete-then-create submit path, warning banner, locale keys
style(cluster): col width
2026-07-23 10:24:54 +08:00 · 2026-07-22 16:21:12 +08:00 · 2026-07-22 15:52:17 +08:00 · 2026-07-22 15:52:17 +08:00 · 2026-07-22 15:52:17 +08:00 · 2026-07-22 15:52:17 +08:00
38 changed files with 1328 additions and 673 deletions
@@ -98,6 +98,10 @@ Compose layout with Ant components, not hand-written `display: flex`.

 Drive spacing with the theme scale (`Flex`/`Space` `gap`, or `var(--ant-*)` spacing tokens), not scattered `px` literals.

+## Tables
+
+- **Horizontally scrollable table**: set `scroll={{ x: 'max-content' }}` **and** add `className="scroll-table"` on the `Table`. The class styles the horizontal scroll to match the design; without it the scroll works but looks off.
+
 # Naming conventions

 A page module lives under `src/pages/{module}` with this sub-structure: `components/`, `config/`, `forms/`, `hooks/`, `services/`, `index.tsx`. File naming:
@@ -222,6 +222,12 @@ export default {
  'common.title.delete.confirm': 'Confirm deletion',
  'common.title.stop.confirm': 'Confirm stop',
  'common.title.start.confirm': 'Confirm start',
+  'common.title.activate.confirm': 'Confirm activate',
+  'common.title.deactivate.confirm': 'Confirm deactivate',
+  'common.activate.single.confirm':
+    'Are you sure you want to activate? \n <span style="font-size: 13px;font-weight: 700">{name}</span>',
+  'common.deactivate.single.confirm':
+    'Are you sure you want to deactivate? \n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'common.title.recreate.confirm': 'Confirm recreate',
  'common.button.addLabel': 'Add Label',
  'common.button.addSelector': 'Add Selector',
@@ -122,6 +122,10 @@ export default {
  'gpuservice.instance.mode.whole': 'Full GPU',
  'gpuservice.instance.mode.sliced': 'By Ratio',
  'gpuservice.instance.slice.memoryPercentage': 'VRAM Percentage (%)',
+  'gpuservice.instance.slice.percentage': 'Percentage (%)',
+  'gpuservice.instance.slice.coresPercentage': 'Compute Percentage (%)',
+  'gpuservice.instance.slice.cores.min':
+    'The compute ratio must be no less than the VRAM ratio ({count}%)',
  'gpuservice.instance.slice.fullCores': '100% Compute',
  'gpuservice.instance.slice.percentage.required':
    'Please select or enter a percentage',
@@ -134,10 +138,16 @@ export default {
  'gpuservice.instance.ram': 'RAM',
  'gpuservice.instance.os': 'OS',
  'gpuservice.instance.arch': 'Arch',
-'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType': 'GPU Instance Type',
  'gpuservice.instanceType.add': 'Add Instance Type',
  'gpuservice.instanceType.flavor': 'Flavor',
-  'gpuservice.instanceType.flavor.required': 'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.required':
+    'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU Compute',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU Compute',
+  'gpuservice.instanceType.activate': 'Activate',
+  'gpuservice.instanceType.deactivate': 'Deactivate',
+  'gpuservice.instanceType.platform': 'Platform',
  'gpuservice.instanceType.product': 'Product',
  'gpuservice.instanceType.unitCpu': 'Unit CPU',
  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
@@ -168,9 +178,6 @@ export default {
    'Only events from the last hour are shown',
  'gpuservice.instance.event.tab.instance': 'Instance Events',
  'gpuservice.instance.event.tab.volume': 'Volume Events',
-  'gpuservice.instance.recreate.confirm.title': 'Confirm recreation',
-  'gpuservice.instance.recreate.confirm.content':
-    'The current instance will be deleted first, then recreated with the current configuration.\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': 'Storage',
  'gpuservice.storage.add': 'Add Storage',
  'gpuservice.storage.edit': 'Edit Storage',
@@ -221,6 +221,12 @@ export default {
  'common.title.delete.confirm': '削除を確認',
  'common.title.stop.confirm': '停止を確認',
  'common.title.start.confirm': '開始を確認',
+  'common.title.activate.confirm': '有効化を確認',
+  'common.title.deactivate.confirm': '無効化を確認',
+  'common.activate.single.confirm':
+    '<span style="font-size: 13px;font-weight: 700">{name}</span> を有効化してもよろしいですか？',
+  'common.deactivate.single.confirm':
+    '<span style="font-size: 13px;font-weight: 700">{name}</span> を無効化してもよろしいですか？',
  'common.title.recreate.confirm': '再作成を確認',
  'common.button.addLabel': 'ラベルを追加',
  'common.button.addSelector': 'セレクターを追加',
@@ -121,6 +121,10 @@ export default {
  'gpuservice.instance.mode.whole': 'GPU 全体',
  'gpuservice.instance.mode.sliced': '比率で',
  'gpuservice.instance.slice.memoryPercentage': 'VRAM の割合（%）',
+  'gpuservice.instance.slice.percentage': '割合（%）',
+  'gpuservice.instance.slice.coresPercentage': '演算能力の割合（%）',
+  'gpuservice.instance.slice.cores.min':
+    '演算能力の割合は VRAM の割合（{count}%）以上である必要があります',
  'gpuservice.instance.slice.fullCores': '100% コンピュート',
  'gpuservice.instance.slice.percentage.required':
    'パーセンテージを選択または入力してください',
@@ -133,10 +137,16 @@ export default {
  'gpuservice.instance.ram': 'RAM',
  'gpuservice.instance.os': 'OS',
  'gpuservice.instance.arch': 'アーキテクチャ',
-'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType': 'GPU Instance Type',
  'gpuservice.instanceType.add': 'Add Instance Type',
  'gpuservice.instanceType.flavor': 'Flavor',
-  'gpuservice.instanceType.flavor.required': 'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.required':
+    'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU Compute',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU Compute',
+  'gpuservice.instanceType.activate': 'Activate',
+  'gpuservice.instanceType.deactivate': 'Deactivate',
+  'gpuservice.instanceType.platform': 'Platform',
  'gpuservice.instanceType.product': 'Product',
  'gpuservice.instanceType.unitCpu': 'Unit CPU',
  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
@@ -167,9 +177,6 @@ export default {
    '直近 1 時間のイベントのみ表示されます',
  'gpuservice.instance.event.tab.instance': 'インスタンスイベント',
  'gpuservice.instance.event.tab.volume': 'ボリュームイベント',
-  'gpuservice.instance.recreate.confirm.title': '再作成を確認しますか',
-  'gpuservice.instance.recreate.confirm.content':
-    '現在のインスタンスを削除した後、現在の構成で再作成します。\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': 'ストレージ',
  'gpuservice.storage.add': 'ストレージを追加',
  'gpuservice.storage.edit': 'ストレージを編集',
@@ -219,6 +219,12 @@ export default {
  'common.title.delete.confirm': 'Подтверждение удаления',
  'common.title.stop.confirm': 'Подтверждение остановки',
  'common.title.start.confirm': 'Подтверждение запуска',
+  'common.title.activate.confirm': 'Подтверждение активации',
+  'common.title.deactivate.confirm': 'Подтверждение деактивации',
+  'common.activate.single.confirm':
+    'Вы уверены, что хотите активировать <span style="font-size: 13px;font-weight: 700">{name}</span>?',
+  'common.deactivate.single.confirm':
+    'Вы уверены, что хотите деактивировать <span style="font-size: 13px;font-weight: 700">{name}</span>?',
  'common.title.recreate.confirm': 'Подтверждение пересоздания',
  'common.button.addLabel': 'Добавить метку',
  'common.button.addSelector': 'Добавить селектор',
@@ -120,6 +120,10 @@ export default {
  'gpuservice.instance.mode.whole': 'Весь GPU',
  'gpuservice.instance.mode.sliced': 'По доле',
  'gpuservice.instance.slice.memoryPercentage': 'Доля VRAM (%)',
+  'gpuservice.instance.slice.percentage': 'Доля (%)',
+  'gpuservice.instance.slice.coresPercentage': 'Доля вычислений (%)',
+  'gpuservice.instance.slice.cores.min':
+    'Доля вычислений должна быть не меньше доли VRAM ({count}%)',
  'gpuservice.instance.slice.fullCores': '100% вычислений',
  'gpuservice.instance.slice.percentage.required':
    'Выберите или введите процент',
@@ -132,10 +136,16 @@ export default {
  'gpuservice.instance.ram': 'RAM',
  'gpuservice.instance.os': 'ОС',
  'gpuservice.instance.arch': 'Архитектура',
-'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType': 'GPU Instance Type',
  'gpuservice.instanceType.add': 'Add Instance Type',
  'gpuservice.instanceType.flavor': 'Flavor',
-  'gpuservice.instanceType.flavor.required': 'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.required':
+    'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU Compute',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU Compute',
+  'gpuservice.instanceType.activate': 'Activate',
+  'gpuservice.instanceType.deactivate': 'Deactivate',
+  'gpuservice.instanceType.platform': 'Platform',
  'gpuservice.instanceType.product': 'Product',
  'gpuservice.instanceType.unitCpu': 'Unit CPU',
  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
@@ -166,9 +176,6 @@ export default {
    'Отображаются только события за последний час',
  'gpuservice.instance.event.tab.instance': 'События экземпляра',
  'gpuservice.instance.event.tab.volume': 'События тома',
-  'gpuservice.instance.recreate.confirm.title': 'Подтвердить пересоздание',
-  'gpuservice.instance.recreate.confirm.content':
-    'Текущий экземпляр будет сначала удалён, а затем пересоздан с текущей конфигурацией.\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': 'Хранилище',
  'gpuservice.storage.add': 'Добавить хранилище',
  'gpuservice.storage.edit': 'Редактировать хранилище',
@@ -224,6 +224,12 @@ export default {
  'common.title.delete.confirm': 'Silme onayı',
  'common.title.stop.confirm': 'Durdurma onayı',
  'common.title.start.confirm': 'Başlatma onayı',
+  'common.title.activate.confirm': 'Etkinleştirme onayı',
+  'common.title.deactivate.confirm': 'Devre dışı bırakma onayı',
+  'common.activate.single.confirm':
+    'Etkinleştirmek istediğinizden emin misiniz? \n <span style="font-size: 13px;font-weight: 700">{name}</span>',
+  'common.deactivate.single.confirm':
+    'Devre dışı bırakmak istediğinizden emin misiniz? \n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'common.title.recreate.confirm': 'Yeniden oluşturma onayı',
  'common.button.addLabel': 'Etiket Ekle',
  'common.button.addSelector': 'Seçici Ekle',
@@ -116,6 +116,10 @@ export default {
  'gpuservice.instance.mode.whole': 'Tam GPU',
  'gpuservice.instance.mode.sliced': 'Orana Göre',
  'gpuservice.instance.slice.memoryPercentage': 'VRAM Yüzdesi (%)',
+  'gpuservice.instance.slice.percentage': 'Yüzde (%)',
+  'gpuservice.instance.slice.coresPercentage': 'İşlem Gücü Yüzdesi (%)',
+  'gpuservice.instance.slice.cores.min':
+    'İşlem gücü oranı VRAM oranından ({count}%) küçük olamaz',
  'gpuservice.instance.slice.fullCores': '%100 İşlem Gücü',
  'gpuservice.instance.slice.percentage.required':
    'Lütfen bir yüzde seçin veya girin',
@@ -128,10 +132,16 @@ export default {
  'gpuservice.instance.ram': 'RAM',
  'gpuservice.instance.os': 'OS',
  'gpuservice.instance.arch': 'Mimari',
-'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType': 'GPU Instance Type',
  'gpuservice.instanceType.add': 'Add Instance Type',
  'gpuservice.instanceType.flavor': 'Flavor',
-  'gpuservice.instanceType.flavor.required': 'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.required':
+    'Please select an instance type flavor',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU Compute',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU Compute',
+  'gpuservice.instanceType.activate': 'Activate',
+  'gpuservice.instanceType.deactivate': 'Deactivate',
+  'gpuservice.instanceType.platform': 'Platform',
  'gpuservice.instanceType.product': 'Product',
  'gpuservice.instanceType.unitCpu': 'Unit CPU',
  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
@@ -162,10 +172,6 @@ export default {
    'Yalnızca son bir saatteki olaylar gösterilir',
  'gpuservice.instance.event.tab.instance': 'Örnek Olayları',
  'gpuservice.instance.event.tab.volume': 'Birim Olayları',
-  'gpuservice.instance.recreate.confirm.title':
-    'Yeniden oluşturma onaylansın mı',
-  'gpuservice.instance.recreate.confirm.content':
-    'Mevcut örnek önce silinecek, ardından mevcut yapılandırmayla yeniden oluşturulacaktır.\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': 'Depolama',
  'gpuservice.storage.add': 'Depolama Ekle',
  'gpuservice.storage.edit': 'Depolamayı Düzenle',
@@ -212,6 +212,12 @@ export default {
  'common.title.delete.confirm': '确认删除',
  'common.title.stop.confirm': '确认停止',
  'common.title.start.confirm': '确认启动',
+  'common.title.activate.confirm': '确认启用',
+  'common.title.deactivate.confirm': '确认停用',
+  'common.activate.single.confirm':
+    '确定启用 <span style="font-size: 13px;font-weight: 700">{name}？</span>',
+  'common.deactivate.single.confirm':
+    '确定停用 <span style="font-size: 13px;font-weight: 700">{name}？</span>',
  'common.title.recreate.confirm': '确认重新创建',
  'common.button.addLabel': '添加标签',
  'common.button.addSelector': '添加选择器',
@@ -111,6 +111,9 @@ export default {
  'gpuservice.instance.mode.whole': '整卡',
  'gpuservice.instance.mode.sliced': '按比例',
  'gpuservice.instance.slice.memoryPercentage': '显存占比（%）',
+  'gpuservice.instance.slice.percentage': '占比（%）',
+  'gpuservice.instance.slice.coresPercentage': '算力占比（%）',
+  'gpuservice.instance.slice.cores.min': '算力占比需不小于显存占比 {count}%',
  'gpuservice.instance.slice.fullCores': '100% 算力',
  'gpuservice.instance.slice.percentage.required': '请选择或输入百分比',
  'gpuservice.instance.slice.percentage.max': '比例需在 1% 到 {count}% 之间',
@@ -121,10 +124,15 @@ export default {
  'gpuservice.instance.ram': '内存',
  'gpuservice.instance.os': '系统',
  'gpuservice.instance.arch': '架构',
-'gpuservice.instanceType': 'GPU 实例类型',
+  'gpuservice.instanceType': 'GPU 实例类型',
  'gpuservice.instanceType.add': '添加实例类型',
  'gpuservice.instanceType.flavor': '规格',
  'gpuservice.instanceType.flavor.required': '请选择实例类型规格',
+  'gpuservice.instanceType.flavor.gpuGroup': 'GPU 算力',
+  'gpuservice.instanceType.flavor.cpuGroup': 'CPU 算力',
+  'gpuservice.instanceType.activate': '启用',
+  'gpuservice.instanceType.deactivate': '停用',
+  'gpuservice.instanceType.platform': '平台',
  'gpuservice.instanceType.product': '商品',
  'gpuservice.instanceType.unitCpu': '单位 CPU',
  'gpuservice.instanceType.unitCpu.tip': '每 GPU 对应多少 CPU',
@@ -154,9 +162,6 @@ export default {
  'gpuservice.instance.event.recentHourTip': '仅显示最近一小时的事件。',
  'gpuservice.instance.event.tab.instance': '实例事件',
  'gpuservice.instance.event.tab.volume': '存储卷事件',
-  'gpuservice.instance.recreate.confirm.title': '确认重新创建',
-  'gpuservice.instance.recreate.confirm.content':
-    '系统将先删除当前实例，然后使用当前配置重新创建。\n <span style="font-size: 13px;font-weight: 700">{name}</span>',
  'gpuservice.storage': '存储',
  'gpuservice.storage.add': '添加存储',
  'gpuservice.storage.edit': '编辑存储',
@@ -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 && (
@@ -186,23 +186,24 @@ const useClusterColumns = (
      {
        title: intl.formatMessage({ id: 'dashboard.totalgpus' }),
        dataIndex: 'gpus',
-        span: 2,
-        sorter: tableSorter(3),
        width: 100,
+        sorter: tableSorter(3),
        render: (value: number) => <span>{value}</span>
      },
      {
        title: intl.formatMessage({ id: 'clusters.table.deployments' }),
        dataIndex: 'models',
        sorter: tableSorter(4),
-        width: 100,
+        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),
-        width: 100,
        render: (value: number, record: ClusterListItem) => (
          <span>
            {record.ready_workers} / {record.workers}
@@ -213,6 +214,7 @@ const useClusterColumns = (
        title: intl.formatMessage({ id: 'common.table.status' }),
        dataIndex: 'state',
        span: spans.status,
+        minWidth: 80,
        align: 'center',
        render: (value: number, record: ClusterListItem) => (
          <StatusTag
@@ -52,3 +52,25 @@ export async function deleteGPUInstanceType(params: {
    params: { cluster_id: params.cluster_id }
  });
 }
+
+// PUT /gpu-instance-types/{name}/activate?cluster_id — activate an instance type.
+export async function activateGPUInstanceType(params: {
+  name: string;
+  cluster_id: number;
+}) {
+  return request(`${GPU_INSTANCE_TYPES_API}/${params.name}/activate`, {
+    method: 'PUT',
+    params: { cluster_id: params.cluster_id }
+  });
+}
+
+// PUT /gpu-instance-types/{name}/deactivate?cluster_id — deactivate an instance type.
+export async function deactivateGPUInstanceType(params: {
+  name: string;
+  cluster_id: number;
+}) {
+  return request(`${GPU_INSTANCE_TYPES_API}/${params.name}/deactivate`, {
+    method: 'PUT',
+    params: { cluster_id: params.cluster_id }
+  });
+}
@@ -1,14 +1,11 @@
 import useSubmitLock from '@/hooks/use-submit-lock';
-import Separator from '@/pages/llmodels/components/separator';
 import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { Typography, message } from 'antd';
+import { message } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { FlavorItem, FormData } from '../config/types';
 import GPUServiceInstanceTypeForm from '../forms';
 import useQueryFlavors from '../services/use-query-flavors';
-import styles from '../styles/instance-types.module.less';
-import FlavorList from './flavor-list';

 type AddInstanceTypeModalProps = {
  title: string;
@@ -18,28 +15,6 @@ type AddInstanceTypeModalProps = {
  onCancel: () => void;
 };

-const ColTitle: React.FC<{
-  children: React.ReactNode;
-  style?: React.CSSProperties;
-}> = ({ children, style }) => (
-  <Typography.Title
-    level={3}
-    style={{
-      fontSize: 14,
-      paddingTop: 10,
-      paddingBottom: 16,
-      margin: 0,
-      position: 'sticky',
-      top: 0,
-      zIndex: 100,
-      backgroundColor: 'var(--ant-color-bg-elevated)',
-      ...style
-    }}
-  >
-    {children}
-  </Typography.Title>
-);
-
 const AddInstanceTypeModal: React.FC<AddInstanceTypeModalProps> = ({
  title,
  open,
@@ -101,63 +76,37 @@ const AddInstanceTypeModal: React.FC<AddInstanceTypeModalProps> = ({
      mask={{ closable: false }}
      keyboard={false}
      styles={{
-        wrapper: { width: 'min(900px, calc(100vw - 220px))' },
+        wrapper: { width: 'min(600px, calc(100vw - 220px))' },
        body: { overflowY: 'hidden' }
      }}
      footer={false}
    >
-      <div className={styles.container}>
-        <div className={styles.colWrapper}>
-          <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
-            <div className={styles.panelBody}>
-              <div className={styles.stickyHead}>
-                <ColTitle
-                  style={{
-                    paddingBottom: 0
-                  }}
-                >
-                  {intl.formatMessage({ id: 'gpuservice.instanceType.flavor' })}
-                </ColTitle>
-              </div>
-              <FlavorList
-                value={selectedFlavor?.name}
-                dataList={flavorList}
-                loading={flavorLoading}
-                onChange={setSelectedFlavor}
-              />
-            </div>
-          </ColumnWrapper>
-          <Separator />
-        </div>
-        <div className={styles.formWrapper}>
-          <ColumnWrapper
-            styles={{ container: { paddingBlock: 0 } }}
-            footer={
-              <ModalFooter
-                onOk={handleSubmit}
-                onCancel={handleCancel}
-                loading={loading}
-                style={{
-                  padding: '16px 24px 8px',
-                  display: 'flex',
-                  justifyContent: 'flex-end'
-                }}
-              />
-            }
-          >
-            <ColTitle>
-              {intl.formatMessage({ id: 'common.title.config' })}
-            </ColTitle>
-            <GPUServiceInstanceTypeForm
-              ref={form}
-              open={open}
-              selectedFlavor={selectedFlavor}
-              onFinish={onFinish}
-              onFinishFailed={release}
-            />
-          </ColumnWrapper>
-        </div>
-      </div>
+      <ColumnWrapper
+        styles={{ container: { paddingBlock: 0 } }}
+        footer={
+          <ModalFooter
+            onOk={handleSubmit}
+            onCancel={handleCancel}
+            loading={loading}
+            style={{
+              padding: '16px 24px 8px',
+              display: 'flex',
+              justifyContent: 'flex-end'
+            }}
+          />
+        }
+      >
+        <GPUServiceInstanceTypeForm
+          ref={form}
+          open={open}
+          selectedFlavor={selectedFlavor}
+          flavorList={flavorList}
+          flavorLoading={flavorLoading}
+          onFlavorChange={setSelectedFlavor}
+          onFinish={onFinish}
+          onFinishFailed={release}
+        />
+      </ColumnWrapper>
    </GSDrawer>
  );
 };
@@ -0,0 +1,118 @@
+import { AutoTooltip, ThemeTag } from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Flex } from 'antd';
+import { formatMemoryDisplay } from '../../instances/config';
+import { manufactureColorMap } from '../../templates/config';
+import { formatManufacturer } from '../../utils';
+
+// The subset of a flavor / instance-type display shape the flavor renderers
+// read. Flavor specs satisfy it directly (minus sliceable, which the API
+// removed from flavors); the management list builds it from spec.acceleratable
+// + status.detail, deriving sliceable from slicedDetail.
+interface FlavorSpecLike {
+  manufacturer?: string | null;
+  product?: string | null;
+  memory?: string | null;
+  sliceable?: boolean;
+  acceleratable?: boolean;
+}
+
+// A flavor's title mirrors the flavor card: a generic (no product, no/`generic`
+// manufacturer, non-acceleratable) flavor reads as "CPU-only".
+export const getFlavorTitle = (
+  spec: FlavorSpecLike = {},
+  fallbackName?: string | null
+) => {
+  const manufacturer = spec.manufacturer || '';
+  const isCpuOnly =
+    !spec.acceleratable &&
+    !spec.product &&
+    (!manufacturer || manufacturer.toLowerCase() === 'generic');
+  return isCpuOnly ? 'CPU-only' : spec.product || fallbackName || '-';
+};
+
+// Secondary line, dot-separated: manufacturer · memory · sliceable. memory and
+// sliceable apply to accelerator (GPU) flavors only; sliceable stays a tag.
+// Returns null when a (generic) flavor has nothing to show.
+export const FlavorMeta: React.FC<{ spec?: FlavorSpecLike }> = ({
+  spec = {}
+}) => {
+  const intl = useIntl();
+  const manufacturer = spec.manufacturer || '';
+  const color = manufactureColorMap[manufacturer] ?? 'purple';
+  const memory = spec.acceleratable
+    ? formatMemoryDisplay(spec.memory ?? undefined)
+    : '';
+
+  const pieces: React.ReactNode[] = [];
+  if (manufacturer) {
+    pieces.push(
+      <ThemeTag
+        key="vendor"
+        color={color}
+        style={{ fontWeight: 400, marginInlineEnd: 0 }}
+      >
+        {formatManufacturer(manufacturer)}
+      </ThemeTag>
+    );
+  }
+  if (memory) {
+    pieces.push(<span key="memory">{memory}</span>);
+  }
+  if (!pieces.length) return null;
+
+  return (
+    <Flex
+      align="center"
+      gap={8}
+      style={{
+        minWidth: 0,
+        color: 'var(--ant-color-text-tertiary)',
+        fontSize: 12
+      }}
+    >
+      {pieces.flatMap((piece, index) =>
+        index === 0
+          ? [piece]
+          : [
+              <span
+                key={`dot-${index}`}
+                style={{ color: 'var(--ant-color-text-quaternary)' }}
+              >
+                ·
+              </span>,
+              piece
+            ]
+      )}
+    </Flex>
+  );
+};
+
+// Two-line flavor display: title on top, meta row below. Shared by the create
+// drawer's dropdown option and the management list's flavor cell.
+export const FlavorOption: React.FC<{
+  spec?: FlavorSpecLike;
+  fallbackName?: string | null;
+  maxWidth?: number | string;
+}> = ({ spec = {}, fallbackName, maxWidth = '100%' }) => (
+  <Flex vertical gap={4} style={{ minWidth: 0, padding: '2px 0' }}>
+    <AutoTooltip ghost minWidth={20} maxWidth={maxWidth}>
+      {getFlavorTitle(spec, fallbackName)}
+    </AutoTooltip>
+    <FlavorMeta spec={spec} />
+  </Flex>
+);
+
+// Single-line flavor display: title then meta inline. Used for the collapsed
+// selected value in the create drawer's Select.
+export const FlavorSelected: React.FC<{
+  spec?: FlavorSpecLike;
+  fallbackName?: string | null;
+}> = ({ spec = {}, fallbackName }) => (
+  <Flex align="center" gap={8} style={{ minWidth: 0 }}>
+    <AutoTooltip ghost minWidth={20} maxWidth={200}>
+      {getFlavorTitle(spec, fallbackName)}
+    </AutoTooltip>
+    <FlavorMeta spec={spec} />
+  </Flex>
+);
@@ -94,8 +94,10 @@ const FlavorList: React.FC<FlavorListProps> = ({
                  </ThemeTag>
                )}
              </Flex>
-              {/* Memory / sliceable only apply to accelerator (GPU) flavors;
-                  a non-acceleratable (generic) flavor has neither. */}
+              {/* Memory only applies to accelerator (GPU) flavors; a
+                  non-acceleratable (generic) flavor has none. (Sliceable is no
+                  longer a flavor field — it is observed per instance type on
+                  status.detail.slicedDetail.) */}
              {spec.acceleratable && (
                <Flex wrap gap={16}>
                  <MetaItem
@@ -105,17 +107,6 @@ const FlavorList: React.FC<FlavorListProps> = ({
                    })}
                    value={formatMemoryDisplay(spec.memory ?? undefined) ?? '-'}
                  />
-                  <MetaItem
-                    icon="icon-sliced"
-                    label={intl.formatMessage({
-                      id: 'gpuservice.instance.sliceable'
-                    })}
-                    value={
-                      spec.sliceable
-                        ? intl.formatMessage({ id: 'common.table.yes' })
-                        : intl.formatMessage({ id: 'common.table.no' })
-                    }
-                  />
                </Flex>
              )}
            </Flex>
@@ -9,7 +9,7 @@ import {
 import { useIntl } from '@umijs/max';
 import { Button } from 'antd';
 import _ from 'lodash';
-import { formatMemoryDisplay } from '../../instances/config';
+import { formatMemoryDisplay, isSliceableDetail } from '../../instances/config';
 import { manufactureColorMap } from '../../templates/config';
 import { ceilMilliToCore, parseQuantityToGi } from '../../utils';
 import {
@@ -31,12 +31,16 @@ const InstanceTypeCard: React.FC<InstanceTypeCardProps> = ({
 }) => {
  const intl = useIntl();
  const spec = data.spec || {};
+  // Observed hardware (manufacturer / memory / sliced capability, …) comes
+  // from status.detail and may be absent until the operator backfills status.
+  const detail = data.status?.detail || {};
  const unit = spec.unitResources || {};
  const phase = data.status?.phase || '';
-  const manufacturer = spec.manufacturer || '';
+  const manufacturer = detail.manufacturer || '';
  const manufacturerColor = manufactureColorMap[manufacturer] ?? 'purple';
+  const sliceable = isSliceableDetail(detail.slicedDetail);

-  const memoryText = formatMemoryDisplay(spec.memory ?? undefined);
+  const memoryText = formatMemoryDisplay(detail.memory ?? undefined);

  // Base resources, formatted into a single "·"-separated line. Falsy parts
  // (e.g. a CPU-only type without VRAM) drop out rather than showing "-".
@@ -71,7 +75,7 @@ const InstanceTypeCard: React.FC<InstanceTypeCardProps> = ({
        <div className={styles.header}>
          <span className={styles.product}>
            <AutoTooltip ghost minWidth={20}>
-              {spec.product || data.name || '-'}
+              {detail.product || data.name || '-'}
            </AutoTooltip>
          </span>
          <span className={styles.headerRight}>
@@ -115,13 +119,13 @@ const InstanceTypeCard: React.FC<InstanceTypeCardProps> = ({
              }}
            />
          ) : null}
-          {spec.clockSpeed ? <span>{spec.clockSpeed}</span> : null}
+          {detail.clockSpeed ? <span>{detail.clockSpeed}</span> : null}
          <span
            className={`${styles.tag} ${
-              spec.sliceable ? styles.tagSliceable : styles.tagPlain
+              sliceable ? styles.tagSliceable : styles.tagPlain
            }`}
          >
-            {spec.sliceable
+            {sliceable
              ? intl.formatMessage({ id: 'gpuservice.instance.sliceable' })
              : intl.formatMessage({
                  id: 'gpuservice.instanceType.notSliceable'
@@ -8,24 +8,24 @@ export const GPU_INSTANCE_TYPE_OS = 'linux';
 export const InstanceTypePhaseValueMap = {
  Active: 'Active',
  Inactive: 'Inactive',
-  Preparing: 'Preparing'
+  Draining: 'Draining'
 };

 export const InstanceTypePhaseLabelMap: Record<string, string> = {
  [InstanceTypePhaseValueMap.Active]: 'Active',
  [InstanceTypePhaseValueMap.Inactive]: 'Inactive',
-  [InstanceTypePhaseValueMap.Preparing]: 'Preparing'
+  [InstanceTypePhaseValueMap.Draining]: 'Draining'
 };

 export const status: Record<string, StatusType> = {
  [InstanceTypePhaseValueMap.Active]: StatusMaps.success,
  [InstanceTypePhaseValueMap.Inactive]: StatusMaps.inactive,
-  [InstanceTypePhaseValueMap.Preparing]: StatusMaps.transitioning
+  [InstanceTypePhaseValueMap.Draining]: StatusMaps.transitioning
 };

 export const ArchOptions = [
-  { label: 'amd64', value: 'amd64' },
-  { label: 'arm64', value: 'arm64' }
+  { label: 'AMD64', value: 'amd64' },
+  { label: 'ARM64', value: 'arm64' }
 ];

 // ``icon`` is narrowed to ``any`` so the inferred type doesn't reach into
@@ -1,16 +1,17 @@
+import {
+  InstanceTypeDetail,
+  InstanceTypeResource
+} from '../../instances/config/types';
+
 export interface UnitResources {
  cpu?: string | null;
  ram?: string | null;
 }

+// spec carries user-defined fields only; observed hardware (manufacturer,
+// memory, sliced capability, …) lives on status.detail.
 export interface InstanceTypeSpec {
-  manufacturer?: string | null;
-  product?: string | null;
-  family?: string | null;
-  memory?: string | null;
-  cores?: string | null;
-  clockSpeed?: string | null;
-  sliceable?: boolean;
+  displayName?: string | null;
  os?: string | null;
  arch?: string | null;
  acceleratable?: boolean;
@@ -21,8 +22,15 @@ export interface InstanceTypeSpec {
 }

 export interface InstanceTypeStatus {
+  // Observed hardware descriptor; absent until the operator backfills status.
+  detail?: InstanceTypeDetail | null;
  phase?: string | null;
  phaseMessage?: string | null;
+  // Per-mode resource accounting ({onceMaxRequest, remaining, capacity}).
+  accelerator?: InstanceTypeResource | null;
+  acceleratorShared?: InstanceTypeResource | null;
+  acceleratorSliced?: InstanceTypeResource | null;
+  cpu?: InstanceTypeResource | null;
 }

 // Row shape for the management list (GET /gpu-instance-types).
@@ -43,7 +51,6 @@ export interface FlavorItem {
    family?: string | null;
    memory?: string | null;
    cores?: string | null;
-    sliceable?: boolean;
    acceleratable?: boolean;
    acceleratorGroup?: string | null;
    generalGroup?: string | null;
@@ -54,6 +61,7 @@ export interface FlavorItem {
 export interface FormData {
  name: string;
  spec: {
+    displayName?: string | null;
    acceleratorGroup?: string | null;
    generalGroup?: string | null;
    acceleratable?: boolean;
@@ -8,8 +8,14 @@ import {
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import {
+  FlavorOption,
+  FlavorSelected,
+  getFlavorTitle
+} from '../components/flavor-display';
 import { ArchOptions, GPU_INSTANCE_TYPE_OS } from '../config';
 import { FlavorItem, FormData } from '../config/types';
+import styles from '../styles/instance-types.module.less';

 // RAM / storage are entered as a plain number in GB but stored/submitted as a
 // "Gi" quantity string. These drive the FormItem's submit (`normalize`) and
@@ -23,16 +29,27 @@ const giValueProps = (value?: string | null) => ({
 interface InstanceTypeFormProps {
  ref?: any;
  open: boolean;
-  // The flavor picked in the drawer's first column. Its acceleratorGroup /
+  // The flavor picked from the flavor Select. Its acceleratorGroup /
  // generalGroup / acceleratable are copied into the created instance type.
  selectedFlavor?: FlavorItem | null;
+  flavorList: FlavorItem[];
+  flavorLoading?: boolean;
+  onFlavorChange: (flavor: FlavorItem | null) => void;
  onFinish: (values: FormData) => Promise<void>;
  onFinishFailed?: (errorInfo: any) => void;
 }

 const GPUServiceInstanceTypeForm: React.FC<InstanceTypeFormProps> = forwardRef(
  (props, ref) => {
-    const { open, selectedFlavor, onFinish, onFinishFailed } = props;
+    const {
+      open,
+      selectedFlavor,
+      flavorList,
+      flavorLoading,
+      onFlavorChange,
+      onFinish,
+      onFinishFailed
+    } = props;
    const intl = useIntl();
    const { getRuleMessage } = useAppUtils();
    const [form] = Form.useForm<FormData>();
@@ -68,6 +85,36 @@ const GPUServiceInstanceTypeForm: React.FC<InstanceTypeFormProps> = forwardRef(
      }
    }));

+    // Split flavors into two groups: CPU compute (generic) and GPU compute
+    // (accelerator). Groups render as labeled sections in the dropdown.
+    const toFlavorOption = (flavor: FlavorItem) => ({
+      value: flavor.name,
+      label: getFlavorTitle(flavor.spec, flavor.name),
+      flavor
+    });
+    const cpuFlavors = flavorList.filter(
+      (flavor) => !flavor.spec?.acceleratable
+    );
+    const gpuFlavors = flavorList.filter(
+      (flavor) => flavor.spec?.acceleratable
+    );
+    const flavorOptions = [
+      cpuFlavors.length && {
+        label: intl.formatMessage({
+          id: 'gpuservice.instanceType.flavor.cpuGroup'
+        }),
+        title: 'cpu',
+        options: cpuFlavors.map(toFlavorOption)
+      },
+      gpuFlavors.length && {
+        label: intl.formatMessage({
+          id: 'gpuservice.instanceType.flavor.gpuGroup'
+        }),
+        title: 'gpu',
+        options: gpuFlavors.map(toFlavorOption)
+      }
+    ].filter(Boolean) as any;
+
    const handleFinish = async (values: FormData) => {
      // The hardware group / acceleratable flags are not user-editable; they
      // come from the chosen flavor. os is fixed to lowercase "linux". ram /
@@ -76,6 +123,7 @@ const GPUServiceInstanceTypeForm: React.FC<InstanceTypeFormProps> = forwardRef(
      await onFinish({
        name: values.name,
        spec: {
+          displayName: values.spec?.displayName?.trim() || null,
          acceleratorGroup: selectedFlavor?.spec?.acceleratorGroup ?? null,
          generalGroup: selectedFlavor?.spec?.generalGroup ?? null,
          acceleratable: selectedFlavor?.spec?.acceleratable ?? false,
@@ -117,6 +165,57 @@ const GPUServiceInstanceTypeForm: React.FC<InstanceTypeFormProps> = forwardRef(
          />
        </Form.Item>

+        <Form.Item<FormData>
+          name={['spec', 'displayName']}
+          rules={[
+            {
+              max: 63,
+              message: intl.formatMessage({
+                id: 'gpuservice.template.displayName.max'
+              })
+            }
+          ]}
+        >
+          <CInput.Input
+            trim={false}
+            label={intl.formatMessage({
+              id: 'gpuservice.template.displayName'
+            })}
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <SealSelect
+            label={intl.formatMessage({ id: 'gpuservice.instanceType.flavor' })}
+            required
+            showSearch
+            optionFilterProp="label"
+            classNames={{ popup: { root: styles.flavorDropdown } }}
+            loading={flavorLoading}
+            value={selectedFlavor?.name}
+            options={flavorOptions}
+            onChange={(val: string) =>
+              onFlavorChange(
+                flavorList.find((flavor) => flavor.name === val) ?? null
+              )
+            }
+            optionRender={(option: any) => {
+              const flavor: FlavorItem = option.data.flavor;
+              return (
+                <FlavorOption spec={flavor.spec} fallbackName={flavor.name} />
+              );
+            }}
+            labelRender={({ value }) => {
+              const flavor = flavorList.find((item) => item.name === value);
+              return flavor ? (
+                <FlavorSelected spec={flavor.spec} fallbackName={flavor.name} />
+              ) : (
+                ((value ?? '') as React.ReactNode)
+              );
+            }}
+          />
+        </Form.Item>
+
        <Form.Item>
          <CInput.Input
            disabled
@@ -3,22 +3,21 @@ import {
  AutoTooltip,
  DropdownButtons,
  icons,
-  StatusTag,
-  ThemeTag
+  StatusTag
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Space, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/lib/table';
 import _ from 'lodash';
 import { useMemo } from 'react';
-import { formatMemoryDisplay } from '../../instances/config';
-import { manufactureColorMap } from '../../templates/config';
+import { isSliceableDetail } from '../../instances/config';
+import { ceilMilliToCore, parseQuantityToGi } from '../../utils';
+import { FlavorOption } from '../components/flavor-display';
 import {
-  ceilMilliToCore,
-  formatManufacturer,
-  parseQuantityToGi
-} from '../../utils';
-import { InstanceTypePhaseLabelMap, status as phaseStatusMap } from '../config';
+  InstanceTypePhaseLabelMap,
+  InstanceTypePhaseValueMap,
+  status as phaseStatusMap
+} from '../config';
 import { ListItem } from '../config/types';

 interface ColumnsHookProps {
@@ -26,16 +25,36 @@ interface ColumnsHookProps {
 }

 // DropdownButtons reads `locale` / `props` at runtime; its `items` prop is
-// typed as antd's MenuProps['items'], so cast the config to satisfy it.
-const rowActions = [
-  {
+// typed as antd's MenuProps['items'], so cast the config to satisfy it. The
+// activate / deactivate action is chosen from the row's current phase: Active
+// types can be deactivated, Inactive ones activated (none while Preparing).
+const buildRowActions = (record: ListItem) => {
+  const phase = record.status?.phase;
+  const actions: any[] = [];
+  if (phase === InstanceTypePhaseValueMap.Active) {
+    actions.push({
+      label: 'gpuservice.instanceType.deactivate',
+      key: 'deactivate',
+      locale: true,
+      icon: icons.Disabled
+    });
+  } else if (phase === InstanceTypePhaseValueMap.Inactive) {
+    actions.push({
+      label: 'gpuservice.instanceType.activate',
+      key: 'activate',
+      locale: true,
+      icon: icons.Charger
+    });
+  }
+  actions.push({
    label: 'common.button.delete',
    key: 'delete',
    locale: true,
    icon: icons.DeleteOutlined,
    props: { danger: true }
-  }
-] as any;
+  });
+  return actions;
+};

 // Column header with an info tooltip (used for the per-GPU resource columns).
 const TitleWithTip: React.FC<{ title: string; tip: string }> = ({
@@ -64,61 +83,42 @@ const useInstanceTypeColumns = ({
        dataIndex: 'name',
        key: 'name',
        ellipsis: { showTitle: false },
-        render: (text: string) => (
-          <AutoTooltip ghost maxWidth={240} title={text}>
-            <span className="text-primary">{text || '-'}</span>
-          </AutoTooltip>
-        )
+        // Prefer the friendly display name, fall back to the resource name.
+        render: (text: string, record: ListItem) => {
+          const label = record.spec?.displayName || text;
+          return (
+            <AutoTooltip ghost minWidth={20} maxWidth={200} title={label}>
+              <span className="text-primary">{label || '-'}</span>
+            </AutoTooltip>
+          );
+        }
      },
      {
-        title: intl.formatMessage({ id: 'gpuservice.instanceType.product' }),
-        dataIndex: ['spec', 'product'],
+        // Flavor cell mirrors the create drawer's dropdown: product name on
+        // top, manufacturer · memory · sliceable on the meta line below.
+        // Observed hardware comes from status.detail (absent until the
+        // operator backfills status); sliceable is derived from slicedDetail.
+        title: intl.formatMessage({ id: 'gpuservice.instanceType.flavor' }),
+        dataIndex: ['status', 'detail', 'product'],
        key: 'product',
        ellipsis: { showTitle: false },
-        render: (text: string) => (
-          <AutoTooltip ghost maxWidth={200}>
-            {text || '-'}
-          </AutoTooltip>
-        )
+        render: (_text: string, record: ListItem) => {
+          const detail = record.status?.detail;
+          return (
+            <FlavorOption
+              spec={{
+                acceleratable: record.spec?.acceleratable,
+                manufacturer: detail?.manufacturer,
+                product: detail?.product,
+                memory: detail?.memory,
+                sliceable: isSliceableDetail(detail?.slicedDetail)
+              }}
+              fallbackName={record.name}
+              maxWidth={200}
+            />
+          );
+        }
      },
-      {
-        title: intl.formatMessage({ id: 'resources.table.vendor' }),
-        dataIndex: ['spec', 'manufacturer'],
-        key: 'manufacturer',
-        ellipsis: { showTitle: false },
-        render: (value: string) =>
-          value ? (
-            <ThemeTag
-              color={manufactureColorMap[value] ?? 'purple'}
-              style={{ fontWeight: 400, width: 'fit-content' }}
-            >
-              {formatManufacturer(value)}
-            </ThemeTag>
-          ) : (
-            '-'
-          )
-      },
-      {
-        title: intl.formatMessage({ id: 'gpuservice.instance.memory' }),
-        dataIndex: ['spec', 'memory'],
-        key: 'memory',
-        ellipsis: { showTitle: false },
-        // Non-acceleratable (generic) types have no VRAM concept → N/A.
-        render: (value: string, record: ListItem) =>
-          record.spec?.acceleratable
-            ? formatMemoryDisplay(value ?? undefined) || '-'
-            : 'N/A'
-      },
-      // {
-      //   title: intl.formatMessage({ id: 'gpuservice.instance.sliceable' }),
-      //   dataIndex: ['spec', 'sliceable'],
-      //   key: 'sliceable',
-      //   ellipsis: { showTitle: false },
-      //   render: (value: boolean) =>
-      //     value
-      //       ? intl.formatMessage({ id: 'common.table.yes' })
-      //       : intl.formatMessage({ id: 'common.table.no' })
-      // },
      {
        title: (
          <TitleWithTip
@@ -177,14 +177,22 @@ const useInstanceTypeColumns = ({
        }
      },
      {
-        title: intl.formatMessage({ id: 'gpuservice.instance.os' }),
+        title: intl.formatMessage({ id: 'gpuservice.instanceType.platform' }),
        key: 'os',
        ellipsis: { showTitle: false },
        render: (_text, record: ListItem) => {
          const os = _.capitalize(record.spec?.os || '');
          const arch = _.toUpper(record.spec?.arch || '');
          if (!os) return '-';
-          return arch ? `${os} (${arch})` : os;
+          return (
+            <AutoTooltip
+              ghost
+              maxWidth={240}
+              title={arch ? `${os}/${arch}` : os}
+            >
+              {arch ? `${os}/${arch}` : os}
+            </AutoTooltip>
+          );
        }
      },
      {
@@ -212,7 +220,7 @@ const useInstanceTypeColumns = ({
        ellipsis: { showTitle: false },
        render: (_text, record: ListItem) => (
          <DropdownButtons
-            items={rowActions}
+            items={buildRowActions(record)}
            onSelect={(val: string) => handleSelect(val, record)}
          />
        )
@@ -12,7 +12,11 @@ import { useMemoizedFn } from 'ahooks';
 import { ConfigProvider, Divider, Flex, Table, message } from 'antd';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import PageBox, { HeaderLeft } from '../../_components/page-box';
-import { deleteGPUInstanceType } from './apis';
+import {
+  activateGPUInstanceType,
+  deactivateGPUInstanceType,
+  deleteGPUInstanceType
+} from './apis';
 import AddInstanceTypeModal from './components/add-instance-type-modal';
 import { FormData, ListItem } from './config/types';
 import useCreateInstanceTypeModal from './hooks/use-create-instance-type-modal';
@@ -35,7 +39,8 @@ const GPUServiceInstanceTypes: React.FC = () => {
  const {
    dataList,
    loading: instanceTypesLoading,
-    fetchInstanceTypes
+    fetchInstanceTypes,
+    startWatch
  } = useQueryInstanceTypes();
  const { fetchData: createInstanceType } = useCreateInstanceType();
  const {
@@ -62,16 +67,18 @@ const GPUServiceInstanceTypes: React.FC = () => {
      if (firstK8s?.id != null) {
        setClusterId(firstK8s.id);
        await fetchInstanceTypes(firstK8s.id);
+        startWatch(firstK8s.id);
      }
      setLoaded(true);
    };
    init();
  }, []);

-  const handleClusterChange = useMemoizedFn((value: number) => {
+  const handleClusterChange = useMemoizedFn(async (value: number) => {
    setClusterId(value);
    setKeyword('');
-    fetchInstanceTypes(value);
+    await fetchInstanceTypes(value);
+    startWatch(value);
  });

  const handleRefresh = useMemoizedFn(() => {
@@ -120,9 +127,40 @@ const GPUServiceInstanceTypes: React.FC = () => {
    });
  });

+  const handleToggleActive = useMemoizedFn(
+    (record: ListItem, activate: boolean) => {
+      if (clusterId == null) return;
+      const action = activate
+        ? activateGPUInstanceType
+        : deactivateGPUInstanceType;
+      deleteModalRef.current?.show({
+        content: intl.formatMessage({ id: 'gpuservice.instanceType' }),
+        title: activate
+          ? 'common.title.activate.confirm'
+          : 'common.title.deactivate.confirm',
+        okText: activate
+          ? 'gpuservice.instanceType.activate'
+          : 'gpuservice.instanceType.deactivate',
+        operation: activate
+          ? 'common.activate.single.confirm'
+          : 'common.deactivate.single.confirm',
+        name: record.spec?.displayName || record.name,
+        async onOk() {
+          await action({ name: record.name, cluster_id: clusterId });
+          message.success(intl.formatMessage({ id: 'common.message.success' }));
+          fetchInstanceTypes(clusterId);
+        }
+      });
+    }
+  );
+
  const handleSelect = useMemoizedFn((val: string, record: ListItem) => {
    if (val === 'delete') {
      handleDelete(record);
+    } else if (val === 'activate') {
+      handleToggleActive(record, true);
+    } else if (val === 'deactivate') {
+      handleToggleActive(record, false);
    }
  });

@@ -207,6 +245,8 @@ const GPUServiceInstanceTypes: React.FC = () => {
          <Table
            columns={columns}
            dataSource={filteredList}
+            scroll={{ x: 'max-content' }}
+            className={'scroll-table'}
            loading={{
              spinning: instanceTypesLoading || clusterLoading,
              size: 'middle'
@@ -1,15 +1,49 @@
-import { createAxiosToken } from '@/hooks/use-chunk-request';
+import { WatchEventType } from '@/config';
+import useSetChunkRequest, {
+  createAxiosToken
+} from '@/hooks/use-chunk-request';
 import { useRequest } from 'ahooks';
 import { CancelTokenSource } from 'axios';
+import qs from 'query-string';
 import { useEffect, useRef, useState } from 'react';
-import { queryGPUInstanceTypes } from '../apis';
+import { GPU_INSTANCE_TYPES_API, queryGPUInstanceTypes } from '../apis';
 import { ListItem } from '../config/types';

+// Merge a batch of watch events into the current name-keyed list. Instance
+// types have no numeric id, so we upsert / remove by `name` rather than reuse
+// the shared id-based chunked-list helper.
+const mergeWatchEvents = (current: ListItem[], events: any[]) => {
+  let list = [...current];
+  events.forEach((event: any) => {
+    const collection: ListItem[] = event?.collection || [];
+    if (event?.type === WatchEventType.DELETE) {
+      const names = collection.map((item) => item.name);
+      list = list.filter((item) => !names.includes(item.name));
+    } else if (
+      event?.type === WatchEventType.CREATE ||
+      event?.type === WatchEventType.UPDATE
+    ) {
+      collection.forEach((item) => {
+        const index = list.findIndex((it) => it.name === item.name);
+        if (index > -1) {
+          list[index] = item;
+        } else {
+          list = [item, ...list];
+        }
+      });
+    }
+  });
+  return list;
+};
+
 // Cluster-scoped instance types for the management list. Action-driven:
 // call fetchInstanceTypes(clusterId) from the cluster picker / refresh, not
-// via an effect dependency.
+// via an effect dependency. startWatch(clusterId) opens a chunked watch that
+// keeps the list in sync with live create/update/delete events.
 export default function useQueryInstanceTypes() {
  const tokenRef = useRef<CancelTokenSource | null>(null);
+  const chunkRequestRef = useRef<any>(null);
+  const { setChunkRequest } = useSetChunkRequest();
  const [dataList, setDataList] = useState<ListItem[]>([]);

  const {
@@ -43,10 +77,27 @@ export default function useQueryInstanceTypes() {
    tokenRef.current?.cancel('CANCEL_PREVIOUS_REQUEST');
  };

+  const stopWatch = () => {
+    chunkRequestRef.current?.current?.cancel?.();
+  };
+
+  const startWatch = (clusterId: number) => {
+    stopWatch();
+    chunkRequestRef.current = setChunkRequest({
+      url: `${GPU_INSTANCE_TYPES_API}?${qs.stringify({
+        cluster_id: clusterId
+      })}`,
+      handler: (events: any[]) => {
+        setDataList((pre) => mergeWatchEvents(pre, events));
+      }
+    });
+  };
+
  useEffect(() => {
    return () => {
      cancel();
      tokenRef.current?.cancel();
+      stopWatch();
    };
  }, []);

@@ -55,6 +106,8 @@ export default function useQueryInstanceTypes() {
    loading,
    fetchInstanceTypes,
    cancelRequest,
+    startWatch,
+    stopWatch,
    setDataList
  };
 }
@@ -42,6 +42,24 @@
  min-height: 96px;
 }

+// ============ flavor select dropdown ============
+.flavorDropdown {
+  :global {
+    // tighten the indent of grouped options
+    .ant-select-item-option-grouped {
+      padding-inline-start: 12px;
+    }
+    // divider between options
+    .ant-select-item-option {
+      border-block-end: 1px solid var(--ant-color-border-secondary);
+
+      &:last-child {
+        border-block-end: none;
+      }
+    }
+  }
+}
+
 // ============ list card (Linear-style, minimal) ============
 .listCard {
  height: auto !important;
@@ -5,23 +5,19 @@ import useUserDirectory from '@/pages/gpu-service/hooks/use-user-directory';
 import Separator from '@/pages/llmodels/components/separator';
 import { getGPUStackPlugin } from '@/plugins';
 import { SearchOutlined } from '@ant-design/icons';
-import {
-  AlertBlockInfo,
-  ColumnWrapper,
-  GSDrawer,
-  ModalFooter
-} from '@gpustack/core-ui';
+import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
 import { useIntl, useModel } from '@umijs/max';
 import { Input, Typography } from 'antd';
-import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ListItem as TemplateItem } from '../../templates/config/types';
 import useQueryTemplates from '../../templates/services/use-query-templates';
+import { InstanceStatusValueMap } from '../config';
 import { FormData, InstanceTypeItem, ListItem } from '../config/types';
 import GPUServiceInstanceForm from '../forms';
 import TemplateSelector, { TemplateGroup } from '../forms/template-selector';
 import useQueryInstanceTypes from '../services/use-query-instance-types';
 import styles from '../styles/instances.module.less';
+import { saveInstanceDataInDescription } from '../utils/instance-description';
 import InstanceTypeList from './instance-type-list';

 type AddModalProps = {
@@ -29,7 +25,6 @@ type AddModalProps = {
  action: PageActionType;
  open: boolean;
  width?: number | string;
-  realAction?: string;
  clusterList?: Array<{
    label: string;
    value: number;
@@ -83,8 +78,7 @@ const AddModal: React.FC<AddModalProps> = ({
  data,
  onCancel,
  width,
-  clusterList = [],
-  realAction
+  clusterList = []
 }) => {
  const intl = useIntl();
  const { initialState } = useModel('@@initialState') || {};
@@ -103,6 +97,12 @@ const AddModal: React.FC<AddModalProps> = ({
    manufacturer: undefined
  });
  const [templateId, setTemplateId] = useState<number | undefined>();
+  // Re-selected instance type on a stopped-instance edit. Kept separate from
+  // `instanceTypeSelection` (the create card selection) so the two flows don't
+  // couple; starts empty each open (no default highlight).
+  const [editSelectedType, setEditSelectedType] = useState<string | undefined>(
+    undefined
+  );
  const [instanceKeyword, setInstanceKeyword] = useState('');
  const [templateKeyword, setTemplateKeyword] = useState('');
  const { loading, guard, run, release } = useSubmitLock();
@@ -166,9 +166,18 @@ const AddModal: React.FC<AddModalProps> = ({
  );
  // const readonly = action === PageAction.VIEW;
  const readonly = false;
-  const isRecreate = realAction === PageAction.CREATE;
-  const showResourceSelectors = action === PageAction.CREATE || isRecreate;
-  const shouldAutoSelectResource = action === PageAction.CREATE && !isRecreate;
+  const showResourceSelectors = action === PageAction.CREATE;
+  // Only a stopped instance can be re-typed on edit. It shows the instance-type
+  // column (but not the template column) beside the form; the create card
+  // columns render for CREATE.
+  const isStoppedEdit =
+    action === PageAction.EDIT &&
+    data?.status?.phase === InstanceStatusValueMap.Stopped;
+  const showInstanceTypeColumn = showResourceSelectors || isStoppedEdit;
+  // Editing a non-stopped instance is restricted: only displayName and the
+  // SSH public keys stay editable; the type / template / storage sections
+  // render disabled. A stopped instance edits everything.
+  const isRestrictedEdit = action === PageAction.EDIT && !isStoppedEdit;

  const findTemplateByManufacturer = (
    manufacturer: string | undefined,
@@ -179,24 +188,13 @@ const AddModal: React.FC<AddModalProps> = ({
      : undefined;
  };

-  const saveInstanceDataInDescription = (instanceType: InstanceTypeItem) => {
-    return JSON.stringify({
-      name: instanceType.name,
-      spec: {
-        ..._.omit(instanceType.spec, ['cache', 'cpu']),
-        cpu: _.pick(instanceType.spec?.cpu, [
-          'manufacturer',
-          'product',
-          'family'
-        ])
-      }
-    });
-  };
-
-  // GPU types carry their accelerator vendor; non-acceleratable (CPU) types
-  // all map to the single 'cpu' bucket used to match templates.
+  // GPU types carry their accelerator vendor on status.detail (observed — may
+  // be absent until the operator backfills status); non-acceleratable (CPU)
+  // types all map to the single 'cpu' bucket used to match templates.
  const manufacturerOf = (instanceType: InstanceTypeItem) =>
-    instanceType.spec.acceleratable ? instanceType.spec?.manufacturer : 'cpu';
+    instanceType.spec.acceleratable
+      ? (instanceType.status?.detail?.manufacturer ?? undefined)
+      : 'cpu';

  // apply the selection of instance type and template
  const applySelection = (
@@ -263,43 +261,12 @@ const AddModal: React.FC<AddModalProps> = ({
    );
  };

-  const findAggregateOf = (
-    candidateName: string | undefined,
-    clusterId: number | null | undefined,
-    instanceTypes: InstanceTypeItem[]
-  ): InstanceTypeItem | undefined => {
-    if (!candidateName) return undefined;
-    return instanceTypes.find((item) =>
-      (item.status?.tiers ?? []).some((tier) =>
-        (tier.candidates ?? []).some(
-          (c) => c.name === candidateName && Number(c.cluster) === clusterId
-        )
-      )
-    );
-  };
-
  // initial for first
  const applyAutoSelection = (
    instanceTypes: InstanceTypeItem[],
    templates: TemplateItem[],
    orgId?: number | null
  ) => {
-    // On edit / view, surface the persisted selection in the card list.
-    if (!shouldAutoSelectResource) {
-      const aggregate = findAggregateOf(
-        data?.spec?.type,
-        data?.clusterId,
-        instanceTypes
-      );
-      if (aggregate) {
-        setInstanceTypeSelection({
-          instanceType: aggregate.name,
-          manufacturer: manufacturerOf(aggregate)
-        });
-      }
-      return;
-    }
-
    // Scope to clusters the chosen org owns (admin "All" view).
    const owned = filterTypesByOwner(instanceTypes, orgId);

@@ -359,6 +326,7 @@ const AddModal: React.FC<AddModalProps> = ({
        manufacturer: undefined
      });
      setTemplateId(undefined);
+      setEditSelectedType(undefined);
      setInstanceKeyword('');
      setTemplateKeyword('');
      setScopeOrgId(undefined);
@@ -367,8 +335,12 @@ const AddModal: React.FC<AddModalProps> = ({

    if (action === PageAction.CREATE) {
      loadCreateResources();
+    } else if (action === PageAction.EDIT) {
+      // Edit has no card columns, but the change-type overlay still needs the
+      // full instance-type list to re-type a stopped instance.
+      fetchData({ page: -1 });
    }
-  }, [open, shouldAutoSelectResource, action]);
+  }, [open, action]);

  // filter instance types (already scoped to the chosen org's clusters)
  const filteredInstanceTypes = ownedInstanceTypes.filter((item) =>
@@ -506,6 +478,17 @@ const AddModal: React.FC<AddModalProps> = ({
    applySelection(item, template);
  };

+  // Stopped-edit re-type. Decoupled from applySelection (the create flow): it
+  // only snapshots the type into `description` and applies it to the form — no
+  // template selection or filtering.
+  const handleEditInstanceTypeChange = (item: InstanceTypeItem) => {
+    setEditSelectedType(item.name);
+    form.current?.setFieldsValue({
+      description: saveInstanceDataInDescription(item)
+    });
+    form.current?.applyInstanceType?.(item);
+  };
+
  const handleTemplateChange = (id: number, item: TemplateItem) => {
    setTemplateId(id);
    const formValues = form.current?.getFieldsValue();
@@ -543,104 +526,108 @@ const AddModal: React.FC<AddModalProps> = ({
      footer={false}
    >
      <div className={styles.container}>
+        {showInstanceTypeColumn && (
+          <div
+            className={styles.colWrapper}
+            // The 33% cap suits the 3-column create layout; in the 2-column
+            // stopped-edit layout, split the space evenly with the form column.
+            style={isStoppedEdit ? { flex: 1, maxWidth: 'none' } : undefined}
+          >
+            <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
+              <div className={styles.panelBody}>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 16,
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 10,
+                    backgroundColor: 'var(--ant-color-bg-elevated)'
+                  }}
+                >
+                  <ColTitle style={{ paddingBottom: 0 }}>
+                    {intl.formatMessage({
+                      id: 'gpuservice.instance.types'
+                    })}
+                  </ColTitle>
+                  <Input
+                    allowClear
+                    prefix={<SearchOutlined className="text-tertiary" />}
+                    placeholder={intl.formatMessage({
+                      id: 'gpuservice.instance.search.type.placeholder'
+                    })}
+                    value={instanceKeyword}
+                    onChange={(e) => setInstanceKeyword(e.target.value)}
+                  />
+                </div>
+                <InstanceTypeList
+                  // Edit (stopped) re-selection is decoupled from create's
+                  // card selection: separate highlight state + apply handler.
+                  value={
+                    isStoppedEdit
+                      ? editSelectedType
+                      : instanceTypeSelection.instanceType
+                  }
+                  dataList={filteredInstanceTypes}
+                  loading={instanceTypesLoading}
+                  onChange={
+                    isStoppedEdit
+                      ? handleEditInstanceTypeChange
+                      : handleInstanceTypeChange
+                  }
+                />
+              </div>
+            </ColumnWrapper>
+            <Separator></Separator>
+          </div>
+        )}
        {showResourceSelectors && (
-          <>
-            <div className={styles.colWrapper}>
-              <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
-                <div className={styles.panelBody}>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: 16,
-                      position: 'sticky',
-                      top: 0,
-                      zIndex: 10,
-                      backgroundColor: 'var(--ant-color-bg-elevated)'
-                    }}
-                  >
-                    <ColTitle style={{ paddingBottom: 0 }}>
-                      {intl.formatMessage({
-                        id: 'gpuservice.instance.types'
-                      })}
-                    </ColTitle>
-                    <Input
-                      allowClear
-                      prefix={<SearchOutlined className="text-tertiary" />}
-                      placeholder={intl.formatMessage({
-                        id: 'gpuservice.instance.search.type.placeholder'
-                      })}
-                      value={instanceKeyword}
-                      onChange={(e) => setInstanceKeyword(e.target.value)}
-                    />
-                  </div>
-                  <InstanceTypeList
-                    value={instanceTypeSelection.instanceType}
-                    dataList={filteredInstanceTypes}
-                    loading={instanceTypesLoading}
-                    onChange={handleInstanceTypeChange}
+          <div className={styles.colWrapper}>
+            <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
+              <div className={styles.panelBody}>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 16,
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 10,
+                    backgroundColor: 'var(--ant-color-bg-elevated)'
+                  }}
+                >
+                  <ColTitle style={{ paddingBottom: 0 }}>
+                    {intl.formatMessage({
+                      id: 'gpuservice.instance.templates'
+                    })}
+                  </ColTitle>
+                  <Input
+                    allowClear
+                    prefix={<SearchOutlined className="text-tertiary" />}
+                    placeholder={intl.formatMessage({
+                      id: 'gpuservice.instance.search.template.placeholder'
+                    })}
+                    value={templateKeyword}
+                    onChange={(e) => setTemplateKeyword(e.target.value)}
                  />
                </div>
-              </ColumnWrapper>
-              <Separator></Separator>
-            </div>
-            <div className={styles.colWrapper}>
-              <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
-                <div className={styles.panelBody}>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: 16,
-                      position: 'sticky',
-                      top: 0,
-                      zIndex: 10,
-                      backgroundColor: 'var(--ant-color-bg-elevated)'
-                    }}
-                  >
-                    <ColTitle style={{ paddingBottom: 0 }}>
-                      {intl.formatMessage({
-                        id: 'gpuservice.instance.templates'
-                      })}
-                    </ColTitle>
-                    <Input
-                      allowClear
-                      prefix={<SearchOutlined className="text-tertiary" />}
-                      placeholder={intl.formatMessage({
-                        id: 'gpuservice.instance.search.template.placeholder'
-                      })}
-                      value={templateKeyword}
-                      onChange={(e) => setTemplateKeyword(e.target.value)}
-                    />
-                  </div>
-                  <TemplateSelector
-                    value={templateId}
-                    loading={templateLoading || !initialized}
-                    groups={templateGroups}
-                    onChange={handleTemplateChange}
-                  />
-                </div>
-              </ColumnWrapper>
-              <Separator></Separator>
-            </div>
-          </>
+                <TemplateSelector
+                  value={templateId}
+                  loading={templateLoading || !initialized}
+                  groups={templateGroups}
+                  onChange={handleTemplateChange}
+                />
+              </div>
+            </ColumnWrapper>
+            <Separator></Separator>
+          </div>
        )}
        <div className={styles.formWrapper}>
          <ColumnWrapper
            styles={{ container: { paddingBlock: 0 } }}
            footer={
              <>
-                {isRecreate && open && (
-                  <div style={{ marginInline: 24, paddingTop: 8 }}>
-                    <AlertBlockInfo
-                      type="warning"
-                      contentStyle={{ paddingInline: 0 }}
-                      message={intl.formatMessage({
-                        id: 'gpuservice.instance.recreate.confirm.content'
-                      })}
-                    />
-                  </div>
-                )}
                <ModalFooter
                  onOk={handleSubmit}
                  onCancel={handleCancel}
@@ -664,9 +651,9 @@ const AddModal: React.FC<AddModalProps> = ({
              <GPUServiceInstanceForm
                ref={form}
                action={action}
-                realAction={realAction}
                currentData={data}
                disabled={readonly}
+                restrictedEdit={isRestrictedEdit}
                onFinish={onFinish}
                onFinishFailed={release}
                onScopeChange={handleScopeChange}
@@ -7,7 +7,11 @@ import styled from 'styled-components';
 import { manufactureColorMap } from '../../templates/config';
 import { formatManufacturer } from '../../utils';
 import { formatMemoryDisplay } from '../config';
-import { InstanceTypeItem as InstanceTypeItemModel } from '../config/types';
+import {
+  InstanceTypeItem as InstanceTypeItemModel,
+  InstanceTypeSnapshotSpec
+} from '../config/types';
+import { buildInstanceTypeSnapshotSpec } from '../utils/instance-description';

 const Title = styled.div`
  display: flex;
@@ -54,10 +58,14 @@ const Meta = styled.div<{ $columns?: number }>`

 interface InstanceTypeItemProps {
  item: InstanceTypeItemModel;
+  action?: React.ReactNode;
 }

 interface MetadataSectionProps {
-  spec: InstanceTypeItemModel['spec'];
+  // The flat snapshot / display model — built from a live item with
+  // buildInstanceTypeSnapshotSpec, or parsed back from a persisted
+  // `description` snapshot (readonly edit card).
+  spec: InstanceTypeSnapshotSpec;
  // status.onceMaxRequest.acceleratorSliced (max sliceable percentage). Shown
  // next to Max for sliceable types.
  slicedMaxPercentage?: number;
@@ -103,8 +111,14 @@ const CPUManufacturerTag: React.FC<{ manufacturer?: string }> = ({
  );
 };

-function getInstanceDerived(item: InstanceTypeItemModel) {
-  const spec = item.spec || {};
+// Derives the display fields from the flat snapshot spec (the UI document
+// format — built from a live item with buildInstanceTypeSnapshotSpec, or
+// parsed back from a persisted `description` snapshot). Observed hardware
+// (manufacturer / product / memory / cpu) originates from status.detail.
+function getInstanceDerived(
+  spec: InstanceTypeSnapshotSpec = {},
+  fallbackName?: string
+) {
  const acceleratable = spec.acceleratable;

  const cpuManufacturer = acceleratable
@@ -115,7 +129,9 @@ function getInstanceDerived(item: InstanceTypeItemModel) {
    acceleratable,
    isGPU: acceleratable,
    manufacturer: acceleratable ? spec.manufacturer || '' : 'cpu', // GPU manufacturer or 'cpu' for non-acceleratable types
-    displayName: acceleratable ? spec.product || item.name : 'CPU Only',
+    displayName: acceleratable
+      ? spec.displayName || spec.product || fallbackName
+      : spec.displayName || 'CPU-only',
    ramUnit: spec.unitResourcesParsed?.ram?.value,
    os: _.capitalize(spec.os) || '',
    arch: spec.arch,
@@ -158,9 +174,7 @@ export const InstanceMetadataSection: React.FC<MetadataSectionProps> = ({
 }) => {
  const intl = useIntl();

-  const { ramUnit, cpuUnitCores, isGPU, arch } = getInstanceDerived({
-    spec
-  } as InstanceTypeItemModel);
+  const { ramUnit, cpuUnitCores, isGPU, arch } = getInstanceDerived(spec);

  // Sliceable types append a "Sliceable {n}%" cell to the second row.
  const showSliceable = !!spec.sliceable && (slicedMaxPercentage ?? 0) > 0;
@@ -212,11 +226,16 @@ export const InstanceMetadataSection: React.FC<MetadataSectionProps> = ({
  );
 };

-const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({ item }) => {
-  const specData = item.spec || {};
+const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({
+  item,
+  action
+}) => {
+  // Fold the live (API-shaped) item into the flat display model: definition
+  // fields from spec, observed hardware from status.detail.
+  const specData = buildInstanceTypeSnapshotSpec(item);

  const { acceleratable, manufacturer, displayName, cpuManufacturer } =
-    getInstanceDerived(item);
+    getInstanceDerived(specData, item.name);

  const manufacturerColor = manufactureColorMap[manufacturer] ?? 'purple';
  const showManufacturerTag = acceleratable && !!manufacturer;
@@ -264,6 +283,7 @@ const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({ item }) => {
            name="InstanceTypeBillingBadge"
            context={{ instanceType: item }}
          />
+          {action && <div style={{ marginLeft: 8 }}>{action}</div>}
        </Flex>
      </Title>
      <InstanceMetadataSection
@@ -3,7 +3,15 @@ import { StatusType } from '@/config/types';
 import { IconFont, icons } from '@gpustack/core-ui';
 import _ from 'lodash';
 import React from 'react';
-import { ListItem } from '../config/types';
+import { AcceleratorSlicedDetail, ListItem } from '../config/types';
+
+// Whether a type can be sliced, per the API contract (replaces the removed
+// `spec.sliceable` boolean): logical (soft) slicing reports per-card capacity
+// or physical (e.g. MIG) profiles exist. Every level of slicedDetail may be
+// absent (exclude_none responses).
+export const isSliceableDetail = (detail?: AcceleratorSlicedDetail | null) =>
+  (detail?.logical?.count ?? 0) > 0 ||
+  (detail?.physical?.profiles?.length ?? 0) > 0;

 export const InstanceStatusValueMap = {
  Scheduling: 'Scheduling',
@@ -251,7 +259,7 @@ const parseQuantity = (value?: string | null): number => {
 // Returns the slider max for the accelerator count: the largest
 // tier.onceMaxRequest.accelerator across all tiers (not from candidates).
 export const getAcceleratorMax = (
-  tiers?: { onceMaxRequest: { accelerator?: string } }[] | null
+  tiers?: { onceMaxRequest: { accelerator?: string | null } }[] | null
 ) => {
  if (!tiers?.length) return 0;
  return tiers.reduce((acc, tier) => {
@@ -262,20 +270,25 @@ export const getAcceleratorMax = (

 // Picks the candidate (cluster + type name) that should fulfill a requested
 // accelerator count: the first candidate of the smallest tier whose
-// onceMaxRequest.accelerator is >= the requested count. Accelerated types are
-// not gated on CPU remaining (only CPU-only types are); in sliced mode the
-// candidate's acceleratorSliced remaining must also be > 0.
+// onceMaxRequest.accelerator is >= the requested count. Only Active candidates
+// are eligible. Accelerated types are not gated on CPU remaining (only CPU-only
+// types are); in sliced mode the candidate's acceleratorSliced remaining must
+// also be > 0.
 export const pickCandidateForAccelerator = <
  C extends {
    cluster: string;
    name: string;
+    phase?: string | null;
    cpu?: { remaining?: string | null } | null;
    acceleratorSliced?: { remaining?: string | null } | null;
  }
 >(
  tiers:
    | {
-        onceMaxRequest: { accelerator?: string; acceleratorSliced?: string };
+        onceMaxRequest: {
+          accelerator?: string | null;
+          acceleratorSliced?: string | null;
+        };
        candidates?: C[] | null;
      }[]
    | undefined
@@ -289,6 +302,8 @@ export const pickCandidateForAccelerator = <
  if (!tiers?.length) return null;

  const hasResources = (c: C) => {
+    // Only Active candidates can serve new instances.
+    if (c.phase !== InstanceTypePhaseValueMap.Active) return false;
    // Accelerated types are not gated on CPU remaining; CPU-only types are.
    if (!acceleratable && parseQuantity(c.cpu?.remaining) <= 0) return false;
    if (sliced && parseQuantity(c.acceleratorSliced?.remaining) <= 0)
@@ -131,76 +131,129 @@ export interface InstanceTypeResource {
 export interface InstanceTypeCandidate {
  cluster: string;
  name: string;
-  accelerator: InstanceTypeResource;
-  cpu: InstanceTypeResource;
+  accelerator?: InstanceTypeResource | null;
+  cpu?: InstanceTypeResource | null;
  // Shared-mode available resource (not shown in the GPU Instance form).
-  acceleratorShared: InstanceTypeResource;
+  acceleratorShared?: InstanceTypeResource | null;
  // Sliced-mode available resource.
-  acceleratorSliced: InstanceTypeResource;
+  acceleratorSliced?: InstanceTypeResource | null;
+  // This candidate's sliced (partitioning) capability.
+  acceleratorSlicedDetail?: AcceleratorSlicedDetail | null;
+  phase?: 'Active' | 'Inactive' | 'Draining' | null;
 }

-export interface InstanceTypeTierOnceMaxRequestResource {
-  accelerator?: string;
-  cpu: QuanityCPU;
-  ram: QuanityMemory;
-  localStorage: QuanityLocalStorage;
+// Per-mode maxima as plain number strings — the shape of the aggregated
+// status.onceMaxRequest / status.remaining AND of tier onceMaxRequest /
+// remaining (they are identical in the API). accelerator counts whole cards,
+// acceleratorShared / acceleratorSliced are percentages, cpu is cores. The
+// API carries no ram / localStorage here — RAM caps derive from
+// spec.unitResources, disk from spec.localStorage.
+export interface InstanceTypeOverviewResource {
+  accelerator?: `${number}` | null;
+  acceleratorShared?: `${number}` | null;
+  acceleratorSliced?: `${number}` | null;
+  cpu?: QuanityCPU | null;
 }

 export interface InstanceTypeTier {
-  onceMaxRequest: InstanceTypeTierOnceMaxRequestResource;
+  onceMaxRequest: InstanceTypeOverviewResource;
+  remaining?: InstanceTypeOverviewResource | null;
+  // The tier's aggregated sliced (partitioning) capability.
+  acceleratorSlicedDetail?: AcceleratorSlicedDetail | null;
  candidates?: InstanceTypeCandidate[] | null;
 }

-export interface InstanceTypeOnceMaxRequestResource {
-  accelerator?: `${number}` | null;
-  cpu: QuanityCPU;
-  ram: QuanityMemory;
-  localStorage: QuanityLocalStorage;
-  acceleratorShared: `${number}` | null;
-  acceleratorSliced: `${number}` | null;
-}
-
 export interface CPUCache {
-  l1i: string;
-  l1d: string;
-  l2: string;
-  l3: string;
+  l1i?: string | null;
+  l1d?: string | null;
+  l2?: string | null;
+  l3?: string | null;
 }

 export interface CPUInfo {
-  physicalCores: string;
-  threadsPerPhysicalCore: string;
-  logicalCores: string;
-  stepping: string | null;
-  clockSpeed: string | null;
-  maxClockSpeed: string | null;
-  cacheLine: string;
-  cache: CPUCache;
-  manufacturer: string;
-  product: string;
-  family: string;
+  physicalCores?: string | null;
+  threadsPerPhysicalCore?: string | null;
+  logicalCores?: string | null;
+  stepping?: string | null;
+  clockSpeed?: string | null;
+  maxClockSpeed?: string | null;
+  cacheLine?: string | null;
+  cache?: CPUCache | null;
+  manufacturer?: string | null;
+  product?: string | null;
+  family?: string | null;
 }

-export interface InstanceTypeSpec {
-  group: string;
-  acceleratable: boolean;
-  manufacturer: string;
+// Sliced (partitioning) capability descriptor. Replaces the removed
+// `spec.sliceable` boolean: a type is sliceable when logical (soft) slicing
+// reports capacity or physical (e.g. MIG) profiles exist — see
+// isSliceableDetail in ./index. Appears as status.detail.slicedDetail and as
+// tier / candidate `acceleratorSlicedDetail` in the aggregated view.
+export interface AcceleratorSlicedLogicalDetail {
+  coresPercentageOvercommit?: boolean;
+  // Max soft slices per card; 0 → soft slicing unsupported.
+  count?: number | null;
+}
+
+export interface AcceleratorSlicedPhysicalDetailProfile {
+  name?: string | null;
+  count?: number | null;
+}
+
+export interface AcceleratorSlicedPhysicalDetail {
+  profiles?: AcceleratorSlicedPhysicalDetailProfile[] | null;
+  count?: number | null;
+}
+
+export interface AcceleratorSlicedDetail {
+  logical?: AcceleratorSlicedLogicalDetail | null;
+  physical?: AcceleratorSlicedPhysicalDetail | null;
+}
+
+// status.detail — the observed hardware descriptor. The API moved these off
+// spec (spec keeps user-defined fields only). The whole object is absent until
+// the operator backfills status, and every response is exclude_none — treat
+// every key as possibly missing.
+export interface InstanceTypeDetail {
+  // Device identity.
+  manufacturer?: string | null;
  product?: string | null;
-  memory?: string | null;
  family?: string | null;
+  // Host node CPU (flat fields, as opposed to the nested `cpu` below).
+  physicalCores?: string | null;
+  threadsPerPhysicalCore?: string | null;
+  logicalCores?: string | null;
+  stepping?: string | null;
+  clockSpeed?: string | null;
+  maxClockSpeed?: string | null;
+  cacheLine?: string | null;
+  cache?: CPUCache | null;
+  // Accelerator hardware.
+  memory?: string | null;
+  cores?: string | null;
  computeCapability?: string | null;
-  sliced?: string | null;
-  sliceable?: boolean;
+  slicedDetail?: AcceleratorSlicedDetail | null;
+  // The accelerator's own CPU (distinct from the flat host CPU fields above).
+  cpu?: CPUInfo | null;
+}
+
+// Mirrors the API spec object exactly (user-defined fields only — observed
+// hardware lives on status.detail), plus two UI-computed enrichments filled by
+// use-query-instance-types whose names exist nowhere in the API.
+export interface InstanceTypeSpec {
+  displayName?: string | null;
+  acceleratorGroup?: string | null;
+  generalGroup?: string | null;
+  acceleratable?: boolean;
+  os?: string;
+  arch?: string;
  localStorage?: QuanityLocalStorage;
-  maxComputeUnitCount?: number;
  unitResources?: {
    cpu: QuanityCPU;
    ram: QuanityMemory;
  };
-  os?: string;
-  arch?: string;
-  cpu?: CPUInfo;
-  cache?: Record<string, string>;
+  // ---- UI-computed (not part of the API contract) ----
+  // spec.unitResources parsed to numbers.
  unitResourcesParsed?: {
    cpu: {
      cores?: number;
@@ -213,10 +266,31 @@ export interface InstanceTypeSpec {
      num: number;
    } | null;
  };
+  // Max requestable unit (card / core) count, derived from status.
+  maxComputeUnitCount?: number;
+}
+
+// Flat spec snapshot persisted in a GPU instance's `description` field at
+// create time (see utils/instance-description.ts) and reused as the display
+// model of the type card / metadata section. It merges the definition spec
+// with the observed hardware from status.detail and the derived `sliceable`.
+// The flat shape is a UI document format — do NOT confuse it with the API
+// InstanceTypeSpec; it stays flat for compatibility with snapshots persisted
+// by older instances.
+export interface InstanceTypeSnapshotSpec extends InstanceTypeSpec {
+  manufacturer?: string | null;
+  product?: string | null;
+  family?: string | null;
+  memory?: string | null;
+  sliceable?: boolean;
+  // Accelerator CPU identity only (from status.detail.cpu).
+  cpu?: Pick<CPUInfo, 'manufacturer' | 'product' | 'family'> | null;
 }

 export interface InstanceTypeStatus {
-  onceMaxRequest: InstanceTypeOnceMaxRequestResource;
+  detail?: InstanceTypeDetail | null;
+  onceMaxRequest: InstanceTypeOverviewResource;
+  remaining?: InstanceTypeOverviewResource | null;
  tiers?: InstanceTypeTier[] | null;
 }

@@ -35,7 +35,11 @@ import { DefaultImagePullPolicy } from '../../templates/config';
 import TemplateBasicForm, {
  BasicResourceMax
 } from '../../templates/forms/basic';
-import { pickCandidateForAccelerator, StorageModeValueMap } from '../config';
+import {
+  isSliceableDetail,
+  pickCandidateForAccelerator,
+  StorageModeValueMap
+} from '../config';
 import { FormContext } from '../config/form-context';
 import { FormData, InstanceTypeItem, ListItem } from '../config/types';
 import instanceStyles from '../styles/instances.module.less';
@@ -55,7 +59,7 @@ interface InstanceFormProps {
  ref?: any;
  open: boolean;
  action: PageActionType;
-  realAction?: PageActionType | string;
+  // Present on edit / view.
  currentData?: ListItem | null;
  namespace?: string;
  instanceTypeList?: InstanceTypeItem[];
@@ -63,6 +67,9 @@ interface InstanceFormProps {
  // surfaces a "no available instance type" message in the scheduling tab.
  noAvailableInstanceTypes?: boolean;
  disabled?: boolean;
+  // Editing a non-stopped instance: only displayName and the SSH public keys
+  // stay editable; the type / template / storage sections render disabled.
+  restrictedEdit?: boolean;
  // Fired when the create-scope picker retargets the form to another
  // org (or Global). Only emitted on genuine changes — never on the
  // initial mount, and never in builds where the picker isn't mounted
@@ -107,9 +114,9 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
  (props, ref) => {
    const {
      action,
-      realAction,
      currentData,
      disabled,
+      restrictedEdit,
      open,
      instanceTypeList = [],
      noAvailableInstanceTypes,
@@ -121,8 +128,9 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
    const { getRuleMessage } = useAppUtils();
    const [form] = Form.useForm<InstanceFormValues>();
    const scrollTabsRef = useRef<any>(null);
-    const formAction =
-      realAction === PageAction.CREATE ? PageAction.CREATE : action;
+    // Restricted (non-stopped) edit disables the type / template / storage
+    // sections; displayName and the SSH public keys keep following `disabled`.
+    const sectionDisabled = disabled || restrictedEdit;
    const sshEnabled = Form.useWatch('enable_ssh', form);
    const description = Form.useWatch(['description'], form);
    // `organization_id` is owned by the create-scope picker slot; it only
@@ -289,15 +297,15 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
      const wholeFactor = isGPUType ? accelerator : cpuCount;

      // Sliced mode: scale a single card's unit resources by the chosen
-      // percentage. Scale CPU in millicores and RAM in MiB so fractional
-      // slices stay precise and k8s-valid (integers) — e.g. 10% of a 4-core /
-      // 16Gi card → 400m / 1638Mi, not a rounded-up 1 core / 1Gi.
+      // percentage, submitted as whole cores / whole Gi (floored, min 1) so
+      // the payload matches what the disabled CPU / RAM inputs display —
+      // e.g. 10% of a 4-core / 16Gi card → "1" / "1Gi".
      if (sliced && unitResourcesParsed) {
        const cpuCores = unitResourcesParsed.cpu?.cores ?? 0;
        const ramValue = unitResourcesParsed.ram?.value ?? 0;
        return {
-          cpu: `${Math.max(1, _.floor((cpuCores * 1000 * percentage) / 100))}m`,
-          ram: `${Math.max(1, _.floor((ramValue * 1024 * percentage) / 100))}Mi`
+          cpu: `${Math.max(1, _.floor((cpuCores * percentage) / 100))}`,
+          ram: `${Math.max(1, _.floor((ramValue * percentage) / 100))}Gi`
        };
      }

@@ -335,37 +343,66 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
      form.setFieldsValue({
        spec: {
          resources: {
-            // Display the precise (rounded) fractional values — the inputs are
-            // disabled, so decimals are fine and match the submitted
-            // millicore / MiB allocation better than a floored integer.
+            // Floor the scaled unit resources to whole units, never below 1 —
+            // a small slice (e.g. 8 GB × 10%) still shows a usable 1 vCPU /
+            // 1 GB instead of 0. Display-only: the submit path recomputes
+            // both precisely in millicores / Mi.
            cpu:
              cpuCores != null && percentage > 0
-                ? _.round((cpuCores * percentage) / 100, 2)
+                ? Math.max(1, _.floor((cpuCores * percentage) / 100))
                : null,
            ram:
              ramValue != null && percentage > 0
-                ? _.round((ramValue * percentage) / 100, 2)
+                ? Math.max(1, _.floor((ramValue * percentage) / 100))
                : null
          }
        }
      } as any);
    };

-    // Single entry point for the sliced memory ratio: write the ratio (compute
-    // stays pinned at 100%) and rescale CPU / RAM off it. Reused by the slider
-    // onChange and by the sliced-mode defaults so both share one path.
+    // Whether the selected type allows the compute (cores) ratio to exceed
+    // the memory ratio. Without overcommit there is no cores selector and the
+    // cores ratio is locked to (mirrors) the memory ratio.
+    const coresOvercommit =
+      !!selectedInstanceType?.status?.detail?.slicedDetail?.logical
+        ?.coresPercentageOvercommit;
+
+    // Single entry point for the sliced memory ratio: write the ratio and
+    // rescale CPU / RAM off it. With cores overcommit the compute ratio must
+    // stay >= memory (bump it up when memory overtakes it); without it the
+    // compute ratio always mirrors memory. Reused by the slider onChange.
    const applySliceMemoryPercentage = (value: number) => {
+      const currentCores = _.toNumber(
+        form.getFieldValue([
+          'spec',
+          'resources',
+          'acceleratorSlicedCoresPercentage'
+        ])
+      );
+      const coresPercentage = coresOvercommit
+        ? Math.max(currentCores, value)
+        : value;
      form.setFieldsValue({
        spec: {
          resources: {
            acceleratorSlicedMemoryPercentage: value,
-            acceleratorSlicedCoresPercentage: 100
+            acceleratorSlicedCoresPercentage: coresPercentage
          }
        }
      } as any);
      applySlicedResourceScaling();
    };

+    // Compute (cores) ratio — a GPU-slice-only parameter that rides along on
+    // submit. It does not scale CPU / RAM (those track the memory ratio), so
+    // just write the field.
+    const applySliceCoresPercentage = (value: number) => {
+      form.setFieldValue(
+        ['spec', 'resources', 'acceleratorSlicedCoresPercentage'],
+        value
+      );
+    };
+
    const resolveAndApply = (
      instanceType: InstanceTypeItem | undefined,
      count: number,
@@ -405,12 +442,14 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(

      console.log('picked candidate', candidate, instanceType, count);

+      // The API carries no RAM max on onceMaxRequest — derive it from the
+      // per-unit RAM × the max requestable unit count (RAM always scales with
+      // the unit count). Disk max comes from spec.localStorage (UI-only cap).
+      const unitRamGi = instanceType.spec?.unitResourcesParsed?.ram?.value;
+      const maxUnits = instanceType.spec?.maxComputeUnitCount || 0;
      setOnceMaxRequest({
        cpu: ceilMilliToCore(candidate?.cpu?.onceMaxRequest)?.cores,
-        // candidate no longer carries ram/localStorage: memory max comes from
-        // the type-level onceMaxRequest.ram (already parsed to a Gi number by
-        // the query hook), disk max from spec.localStorage (UI-only cap).
-        memory: _.toNumber(instanceType.status?.onceMaxRequest?.ram) || null,
+        memory: unitRamGi && maxUnits ? unitRamGi * maxUnits : null,
        localStorage:
          parseQuantityToGi(instanceType.spec?.localStorage)?.value ?? null
      });
@@ -429,22 +468,33 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
    };

    // Whole-card (exclusive) vs sliced (percentage) mode. Only meaningful for
-    // sliceable accelerator types; derived (no persisted field) — on edit/
-    // recreate it is inferred from acceleratorSlicedMemoryPercentage > 0.
+    // sliceable accelerator types; derived (no persisted field) — on edit it
+    // is inferred from acceleratorSlicedMemoryPercentage > 0.
    const [sliceMode, setSliceMode] = useState<'whole' | 'sliced'>('whole');

    const handleAcceleratorChange = (count: number) => {
      resolveAndApply(selectedInstanceType, count, false);
    };

-    // Seed the sliced-mode default ratio for an instance type: 10% but never
-    // above the type's max sliceable ratio (status.onceMaxRequest
-    // .acceleratorSliced). Shares applySliceMemoryPercentage with the slider.
+    // Seed the sliced-mode defaults for an instance type: memory ratio at 10%
+    // (never above the type's max sliceable ratio, status.onceMaxRequest
+    // .acceleratorSliced), and the cores ratio defaulting to the same value
+    // (cores >= memory). Set both together so a fresh selection doesn't carry a
+    // stale cores value from a previous type.
    const applySlicedDefaults = (instanceType?: InstanceTypeItem) => {
      const slicedMax =
        _.toNumber(instanceType?.status?.onceMaxRequest?.acceleratorSliced) ||
        0;
-      applySliceMemoryPercentage(slicedMax ? Math.min(10, slicedMax) : 10);
+      const memoryPercentage = slicedMax ? Math.min(10, slicedMax) : 10;
+      form.setFieldsValue({
+        spec: {
+          resources: {
+            acceleratorSlicedMemoryPercentage: memoryPercentage,
+            acceleratorSlicedCoresPercentage: memoryPercentage
+          }
+        }
+      } as any);
+      applySlicedResourceScaling();
    };

    // Toggle between whole-card and sliced mode. Sliced fixes the accelerator
@@ -468,6 +518,40 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
      }
    };

+    // Apply a chosen instance type to the form: default to sliced mode for a
+    // sliceable type with no whole-card capacity, otherwise whole-card with a
+    // count of 1. Shared by the create card selection (imperative handle) and
+    // the edit change-type overlay.
+    const applyInstanceType = (instanceType?: InstanceTypeItem) => {
+      if (!instanceType) {
+        setSliceMode('whole');
+        resolveAndApply(undefined, 0);
+        return;
+      }
+
+      // A sliceable type with no whole-card capacity (Max < 1) defaults to
+      // sliced mode — whole mode would have nothing selectable.
+      const wholeMax = instanceType.spec?.maxComputeUnitCount ?? 0;
+      const slicedMax =
+        _.toNumber(instanceType.status?.onceMaxRequest?.acceleratorSliced) || 0;
+      const defaultSliced =
+        isSliceableDetail(instanceType.status?.detail?.slicedDetail) &&
+        wholeMax < 1 &&
+        slicedMax > 0;
+
+      if (defaultSliced) {
+        setSliceMode('sliced');
+        resolveAndApply(instanceType, 1, true);
+        applySlicedDefaults(instanceType);
+        return;
+      }
+
+      // Otherwise default to whole-card mode (a new type may not be
+      // sliceable); set count to 1 for all instance types: GPU or non-GPU.
+      setSliceMode('whole');
+      resolveAndApply(instanceType, 1);
+    };
+
    const onTargetChange = (key: string) => {
      scrollTabsRef.current?.handleTargetChange(key);
    };
@@ -502,11 +586,8 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
        return;
      }

-      if (
-        action === PageAction.EDIT ||
-        action === PageAction.VIEW ||
-        realAction === PageAction.CREATE
-      ) {
+      // Prefill from the source row on edit / view.
+      if (currentData) {
        console.log('currentData', currentData);
        const currentSpec = parseJsonSafe(
          currentData?.description || '{}',
@@ -517,8 +598,8 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
          ? _.toNumber(currentData?.spec?.resources?.accelerator)
          : _.toNumber(currentData?.spec?.resources?.cpu) || 0;

-        // Infer the mode from the persisted slice percentage (recreate keeps
-        // the section editable; edit/view render a readonly card).
+        // Infer the mode from the persisted slice percentage (edit/view
+        // render a readonly card).
        const persistedSliced =
          _.toNumber(
            currentData?.spec?.resources?.acceleratorSlicedMemoryPercentage
@@ -544,12 +625,12 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
        });

        // buildResourcesData above filled CPU / RAM for the whole card; rescale
-        // them off the persisted percentages when recreating a sliced instance.
+        // them off the persisted percentages for a sliced instance.
        if (persistedSliced) {
          applySlicedResourceScaling();
        }
      }
-    }, [action, currentData, form, open, realAction, instanceTypeList]);
+    }, [action, currentData, form, open, instanceTypeList]);

    const getUnitResources = () => {
      if (selectedInstanceType?.spec?.unitResourcesParsed) {
@@ -614,34 +695,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
        form.setFieldsValue(values as any);
      },
      getFieldsValue: () => form.getFieldsValue(),
-      applyInstanceType: (instanceType?: InstanceTypeItem) => {
-        if (!instanceType) {
-          setSliceMode('whole');
-          resolveAndApply(undefined, 0);
-          return;
-        }
-
-        // A sliceable type with no whole-card capacity (Max < 1) defaults to
-        // sliced mode — whole mode would have nothing selectable.
-        const wholeMax = instanceType.spec?.maxComputeUnitCount ?? 0;
-        const slicedMax =
-          _.toNumber(instanceType.status?.onceMaxRequest?.acceleratorSliced) ||
-          0;
-        const defaultSliced =
-          !!instanceType.spec?.sliceable && wholeMax < 1 && slicedMax > 0;
-
-        if (defaultSliced) {
-          setSliceMode('sliced');
-          resolveAndApply(instanceType, 1, true);
-          applySlicedDefaults(instanceType);
-          return;
-        }
-
-        // Otherwise default to whole-card mode (a new type may not be
-        // sliceable); set count to 1 for all instance types: GPU or non-GPU.
-        setSliceMode('whole');
-        resolveAndApply(instanceType, 1);
-      }
+      applyInstanceType
    }));

    const handleAddSSHKey = () => {
@@ -683,7 +737,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
      >
        <FormContext.Provider
          value={{
-            action: formAction,
+            action: action,
            currentData: currentData,
            isGPUType: isGPUType
          }}
@@ -727,7 +781,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
              storageMode: StorageModeValueMap.Temporary
            }}
          >
-            <Basic action={formAction} disabled={disabled} />
+            <Basic action={action} disabled={disabled} />
            <Form.Item name="clusterId" hidden>
              <CInput.Input />
            </Form.Item>
@@ -744,8 +798,8 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                  forceRender: true,
                  children: (
                    <InstanceTypeFormItem
-                      action={formAction}
-                      disabled={disabled}
+                      action={action}
+                      disabled={sectionDisabled}
                      selectedInstanceType={selectedInstanceType}
                      currentData={currentData as any}
                      onceMaxRequest={onceMaxRequest}
@@ -753,6 +807,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                      sliceMode={sliceMode}
                      onSliceModeChange={handleSliceModeChange}
                      onSliceMemoryPercentageChange={applySliceMemoryPercentage}
+                      onSliceCoresPercentageChange={applySliceCoresPercentage}
                      onGPUCountChange={handleAcceleratorChange}
                    />
                  )
@@ -766,7 +821,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                  children: (
                    <TemplateBasicForm
                      page="instance"
-                      disabled={disabled || formAction === PageAction.EDIT}
+                      disabled={sectionDisabled}
                      onceMaxRequest={onceMaxRequest}
                    />
                  )
@@ -778,10 +833,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                  }),
                  forceRender: true,
                  children: (
-                    <StorageVolume
-                      disabled={disabled || formAction === PageAction.EDIT}
-                      action={formAction}
-                    />
+                    <StorageVolume disabled={sectionDisabled} action={action} />
                  )
                }
              ]}
@@ -12,6 +12,7 @@ import { parseJsonSafe } from '../../utils';
 import InstanceTypeItem, {
  InstanceMetadataSection
 } from '../components/instance-type-item';
+import { isSliceableDetail } from '../config';
 import { FormContext } from '../config/form-context';
 import {
  FormData,
@@ -58,7 +59,22 @@ const InstanceTypePicker: React.FC<InstanceTypePickerProps> = ({
 };

 // Fixed 10-tick percentage scale (10..100) for the sliced (percentage) mode.
-const SLICE_PERCENT_TICKS = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+const SLICE_PERCENT_TICKS = [10, 20, 30, 50];
+
+// The paired VRAM + Compute selectors (cores overcommit) are grouped in a
+// bordered card; a lone "Percentage" selector (no overcommit) renders bare so
+// it matches the whole-card GPU Count block's styling.
+const SliceFieldWrapper: React.FC<{
+  withCard: boolean;
+  children: React.ReactNode;
+}> = ({ withCard, children }) =>
+  withCard ? (
+    <FieldBlock>
+      <SelectedCard style={{ padding: 0 }}>{children}</SelectedCard>
+    </FieldBlock>
+  ) : (
+    <>{children}</>
+  );

 interface InstanceTypeFormItemProps {
  action: PageActionType;
@@ -76,6 +92,8 @@ interface InstanceTypeFormItemProps {
  onSliceModeChange?: (mode: 'whole' | 'sliced') => void;
  // Commit a new sliced memory ratio (writes the field + rescales CPU / RAM).
  onSliceMemoryPercentageChange?: (value: number) => void;
+  // Commit a new sliced compute (cores) ratio (writes the field only).
+  onSliceCoresPercentageChange?: (value: number) => void;
  onGPUCountChange?: (value: number) => void;
 }

@@ -89,14 +107,21 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
  sliceMode = 'whole',
  onSliceModeChange,
  onSliceMemoryPercentageChange,
+  onSliceCoresPercentageChange,
  onGPUCountChange
 }) => {
  const intl = useIntl();
  const form = Form.useFormInstance();
  const { isGPUType } = useContext(FormContext);

+  // In edit mode the type card is read-only until a type is re-picked from the
+  // instance-type column (stopped instances only); once selected the section
+  // behaves like create (editable count / slice controls, live capacity
+  // labels).
+  const readonlyType = action === PageAction.EDIT && !selectedInstanceType;
+
  const maxComputeUnitCount = useMemo(() => {
-    if (action === PageAction.EDIT) {
+    if (readonlyType) {
      const description = parseJsonSafe(
        currentData?.description || '{}',
        {} as any
@@ -104,25 +129,19 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
      return description.spec?.maxComputeUnitCount || 0;
    }
    return selectedInstanceType?.spec?.maxComputeUnitCount || 0;
-  }, [action, currentData, selectedInstanceType]);
-
-  const isGPU = useMemo(() => {
-    if (action === PageAction.EDIT) {
-      return _.toNumber(currentData?.spec?.resources?.accelerator) > 0;
-    }
-    return selectedInstanceType?.spec?.acceleratable;
-  }, [selectedInstanceType, action]);
+  }, [readonlyType, currentData, selectedInstanceType]);

  const handleOnGPUCountChange = (value: number) => {
    onGPUCountChange?.(value);
  };

  // Sliced mode is only offered for sliceable accelerator types, and only when
-  // the section is editable (create / recreate; edit renders a readonly card).
+  // the section is editable (create, or edit after re-picking a type; a
+  // not-yet-re-typed edit renders a readonly card).
  const showModeSwitch =
-    action !== PageAction.EDIT &&
+    !readonlyType &&
    isGPUType &&
-    !!selectedInstanceType?.spec?.sliceable;
+    isSliceableDetail(selectedInstanceType?.status?.detail?.slicedDetail);

  const handleModeChange = (value: string) => {
    onSliceModeChange?.(value as 'whole' | 'sliced');
@@ -134,6 +153,21 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
    onSliceMemoryPercentageChange?.(value);
  };

+  // Compute (cores) percentage changed — forward the new value.
+  const handleCoresPercentageChange = (value: number) => {
+    onSliceCoresPercentageChange?.(value);
+  };
+
+  // The cores ratio must be >= the memory ratio, so ticks below the current
+  // memory percentage are disabled (min). Cores range is a fixed 10..100.
+  const slicedMemoryPercentage =
+    _.toNumber(
+      Form.useWatch(
+        ['spec', 'resources', 'acceleratorSlicedMemoryPercentage'],
+        form
+      )
+    ) || 1;
+
  // Max selectable ratio in sliced mode: status.onceMaxRequest.acceleratorSliced
  // (a percentage). Ticks above it stay visible but disabled.
  const slicedMaxPercentage =
@@ -141,10 +175,17 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
      selectedInstanceType?.status?.onceMaxRequest?.acceleratorSliced
    ) || 0;

+  // Whether the compute (cores) ratio may exceed the memory ratio. When the
+  // type doesn't support overcommit, cores are locked to the memory ratio —
+  // no cores selector, and the memory selector reads as a plain "Percentage".
+  const coresOvercommit =
+    !!selectedInstanceType?.status?.detail?.slicedDetail?.logical
+      ?.coresPercentageOvercommit;
+
  const modeSegmented = showModeSwitch ? (
    <Segmented
-      size="small"
-      shape="round"
+      size="middle"
+      type="rounded"
      style={{ fontSize: 12 }}
      value={sliceMode}
      disabled={disabled}
@@ -168,7 +209,7 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({

  // When the max ratio is below 10%, switch the ticks to a finer 1..10 scale
  // so small slices are still selectable; otherwise use the 10..100 scale.
-  const sliceTicks =
+  const sliceTicks: number[] =
    slicedMaxPercentage < 10
      ? [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      : SLICE_PERCENT_TICKS;
@@ -191,7 +232,7 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
  };

  const renderMemoryLabel = (): React.ReactNode => {
-    if (isGPUType || action === PageAction.EDIT || !onceMaxRequest?.memory) {
+    if (isGPUType || readonlyType || !onceMaxRequest?.memory) {
      return intl.formatMessage({ id: 'gpuservice.template.memory' });
    }

@@ -223,8 +264,8 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
            }}
          >
            {description.acceleratable
-              ? `${description.product} x ${currentData?.spec?.resources?.accelerator}`
-              : 'CPU'}
+              ? `${description.displayName || description.product} x ${currentData?.spec?.resources?.accelerator}`
+              : description.displayName || 'CPU'}
          </span>
          <InstanceMetadataSection spec={description}></InstanceMetadataSection>
        </Flex>
@@ -257,15 +298,21 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
            }
          ]}
        >
-          {action === PageAction.CREATE && (
+          {readonlyType ? (
+            renderInstanceType()
+          ) : (
            <InstanceTypePicker
              selectedInstanceType={selectedInstanceType}
              noAvailable={noAvailableTypes}
            />
          )}
-          {action === PageAction.EDIT && renderInstanceType()}
        </Form.Item>
      </FieldBlock>
+      {showModeSwitch && (
+        <div>
+          <div style={{ marginBlock: 8 }}>{modeSegmented}</div>
+        </div>
+      )}
      {!noAvailableTypes && (
        <Form.Item<FormData>
          key={isGPUType ? 'accelerator' : 'cpu'}
@@ -275,7 +322,7 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
              : ['spec', 'resources', 'cpu']
          }
          preserve
-          hidden={action === PageAction.EDIT || isSliced}
+          hidden={readonlyType || isSliced}
          normalize={(value) => (value != null ? _.toString(value) : undefined)}
          getValueProps={(value) => ({
            value: value != null ? _.toNumber(value) : undefined
@@ -316,8 +363,7 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
            max={maxComputeUnitCount}
            step={1}
            required
-            labelExtra={sliceMode === 'whole' ? modeSegmented : undefined}
-            disabled={disabled || action === PageAction.EDIT}
+            disabled={disabled || readonlyType}
            label={`${intl.formatMessage({ id: 'common.max.count' }, { label: numberSelectionLabel.label })} (${intl.formatMessage(
              {
                id: 'common.max'
@@ -328,73 +374,142 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
        </Form.Item>
      )}
      {!noAvailableTypes && isSliced && (
-        <FieldBlock>
-          <Form.Item<FormData>
-            name={['spec', 'resources', 'acceleratorSlicedMemoryPercentage']}
-            getValueProps={(value) => ({
-              value: value != null ? _.toNumber(value) : undefined
-            })}
-            rules={[
-              {
-                required: true,
-                validator: (_, value) => {
-                  const num = Number(value);
-                  if (value == null || value === '' || Number.isNaN(num)) {
-                    return Promise.reject(
-                      new Error(
-                        intl.formatMessage({
-                          id: 'gpuservice.instance.slice.percentage.required'
-                        })
-                      )
-                    );
-                  }
-                  if (num > slicedMaxPercentage || num <= 0) {
-                    return Promise.reject(
-                      new Error(
-                        intl.formatMessage(
-                          {
-                            id: 'gpuservice.instance.slice.percentage.max'
-                          },
-                          { count: slicedMaxPercentage }
-                        )
-                      )
-                    );
-                  }
-                  return Promise.resolve();
-                }
-              }
-            ]}
-          >
-            <NumberSelection
-              min={1}
-              max={slicedMaxPercentage}
-              step={1}
-              maxCount={sliceTicks.length}
-              presetValues={sliceTicks}
-              alwaysShowInput
-              required
-              disabled={disabled}
-              onChange={handleMemoryPercentageChange}
-              labelExtra={modeSegmented}
-              label={intl.formatMessage({
-                id: 'gpuservice.instance.slice.memoryPercentage'
+        <SliceFieldWrapper withCard={coresOvercommit}>
+          <>
+            <Form.Item<FormData>
+              name={['spec', 'resources', 'acceleratorSlicedMemoryPercentage']}
+              // Grouped with the compute selector inside one card — tighten
+              // the default 24px gap between the pair.
+              style={coresOvercommit ? { marginBottom: 0 } : undefined}
+              getValueProps={(value) => ({
+                value: value != null ? _.toNumber(value) : undefined
              })}
-            />
-          </Form.Item>
-          {/* Compute (cores) percentage is fixed at 100. Kept in the form via a
-              hidden item so it rides along on submit. */}
-          <Form.Item<FormData>
-            name={['spec', 'resources', 'acceleratorSlicedCoresPercentage']}
-            hidden
-          >
-            <InputNumber />
-          </Form.Item>
-        </FieldBlock>
+              rules={[
+                {
+                  required: true,
+                  validator: (_, value) => {
+                    const num = Number(value);
+                    if (value == null || value === '' || Number.isNaN(num)) {
+                      return Promise.reject(
+                        new Error(
+                          intl.formatMessage({
+                            id: 'gpuservice.instance.slice.percentage.required'
+                          })
+                        )
+                      );
+                    }
+                    if (num > slicedMaxPercentage || num <= 0) {
+                      return Promise.reject(
+                        new Error(
+                          intl.formatMessage(
+                            {
+                              id: 'gpuservice.instance.slice.percentage.max'
+                            },
+                            { count: slicedMaxPercentage }
+                          )
+                        )
+                      );
+                    }
+                    return Promise.resolve();
+                  }
+                }
+              ]}
+            >
+              <NumberSelection
+                min={1}
+                max={slicedMaxPercentage}
+                step={1}
+                maxCount={sliceTicks.length}
+                presetValues={sliceTicks}
+                alwaysShowInput
+                required
+                disabled={disabled}
+                // Inside the card the selector drops its own border; the bare
+                // (no-overcommit) variant keeps it, like the GPU Count block.
+                style={coresOvercommit ? { border: 'none' } : undefined}
+                onChange={handleMemoryPercentageChange}
+                label={intl.formatMessage({
+                  // Without cores overcommit this single ratio drives both
+                  // VRAM and compute, so drop the "VRAM" qualifier.
+                  id: coresOvercommit
+                    ? 'gpuservice.instance.slice.memoryPercentage'
+                    : 'gpuservice.instance.slice.percentage'
+                })}
+              />
+            </Form.Item>
+            {/* Compute (cores) percentage. Fixed 10..100 ticks; ticks below the
+              chosen memory ratio are disabled (cores must be >= memory). Only
+              types with cores overcommit get the selector — without it the
+              ratio is locked to the memory percentage (the parent mirrors it),
+              carried by a hidden field so it still rides the submit. */}
+            {coresOvercommit ? (
+              <Form.Item<FormData>
+                name={['spec', 'resources', 'acceleratorSlicedCoresPercentage']}
+                style={{ marginBottom: 0 }}
+                getValueProps={(value) => ({
+                  value: value != null ? _.toNumber(value) : undefined
+                })}
+                rules={[
+                  {
+                    required: true,
+                    validator: (_, value) => {
+                      const num = Number(value);
+                      if (value == null || value === '' || Number.isNaN(num)) {
+                        return Promise.reject(
+                          new Error(
+                            intl.formatMessage({
+                              id: 'gpuservice.instance.slice.percentage.required'
+                            })
+                          )
+                        );
+                      }
+                      if (num < slicedMemoryPercentage || num > 100) {
+                        return Promise.reject(
+                          new Error(
+                            intl.formatMessage(
+                              { id: 'gpuservice.instance.slice.cores.min' },
+                              { count: slicedMemoryPercentage }
+                            )
+                          )
+                        );
+                      }
+                      return Promise.resolve();
+                    }
+                  }
+                ]}
+              >
+                <NumberSelection
+                  min={slicedMemoryPercentage}
+                  max={100}
+                  step={10}
+                  maxCount={SLICE_PERCENT_TICKS.length}
+                  presetValues={SLICE_PERCENT_TICKS}
+                  alwaysShowInput
+                  required
+                  disabled={disabled}
+                  onChange={handleCoresPercentageChange}
+                  style={{ border: 'none' }}
+                  label={intl.formatMessage({
+                    id: 'gpuservice.instance.slice.coresPercentage'
+                  })}
+                />
+              </Form.Item>
+            ) : (
+              <Form.Item<FormData>
+                name={['spec', 'resources', 'acceleratorSlicedCoresPercentage']}
+                style={{ marginBottom: 0 }}
+                hidden
+              >
+                <InputNumber />
+              </Form.Item>
+            )}
+          </>
+        </SliceFieldWrapper>
      )}
-      {/* Edit renders a readonly card (no sliced UI), so register the slice
-          percentages as hidden fields — otherwise their persisted values are
-          dropped from the submit payload. */}
-      {action === PageAction.EDIT && (
+      {/* A not-yet-re-typed edit renders a readonly card (no sliced UI), so
+          register the slice percentages as hidden fields — otherwise their
+          persisted values are dropped from the submit payload. */}
+      {readonlyType && (
        <>
          <Form.Item<FormData>
            name={['spec', 'resources', 'acceleratorSlicedMemoryPercentage']}
@@ -3,6 +3,7 @@ import type { PageActionType } from '@/config/types';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import { useIntl } from '@umijs/max';
 import { useState } from 'react';
+import { InstanceStatusValueMap } from '../config';
 import type { ListItem } from '../config/types';

 const useCreateInstance = () => {
@@ -14,30 +15,26 @@ const useCreateInstance = () => {
    title: string;
    currentData?: ListItem | null;
    width?: number | string;
-    realAction?: string;
  }>({
    action: PageAction.CREATE,
    title: '',
    open: false,
    width: undefined,
-    currentData: null,
-    realAction: undefined
+    currentData: null
  });

  const openModal = (
    action: PageActionType,
    title: string,
    currentData?: ListItem | null,
-    width?: number | string,
-    realAction?: string
+    width?: number | string
  ) => {
    setOpenModalStatus({
      action,
      title,
      open: true,
      currentData,
-      width,
-      realAction
+      width
    });
    saveScrollHeight();
  };
@@ -52,11 +49,14 @@ const useCreateInstance = () => {
  };

  const openEditInstanceModal = (row: ListItem) => {
+    // A stopped instance can be re-typed, so it needs the two-column layout
+    // (instance-type list + form); other statuses edit in a single column.
+    const isStopped = row.status?.phase === InstanceStatusValueMap.Stopped;
    openModal(
      PageAction.EDIT,
      intl.formatMessage({ id: 'gpuservice.instance.edit' }),
      row,
-      600
+      isStopped ? 'min(1040px, calc(100vw - 220px))' : 600
    );
  };

@@ -69,23 +69,12 @@ const useCreateInstance = () => {
    );
  };

-  const openRecreateInstanceModal = (row: ListItem) => {
-    openModal(
-      PageAction.EDIT,
-      intl.formatMessage({ id: 'common.button.recreate' }),
-      row,
-      'calc(100vw - 220px)',
-      PageAction.CREATE
-    );
-  };
-
  const closeModal = () => {
    setOpenModalStatus({
      ...openModalStatus,
      title: '',
      open: false,
-      currentData: null,
-      realAction: undefined
+      currentData: null
    });
    restoreScrollHeight();
  };
@@ -97,7 +86,6 @@ const useCreateInstance = () => {
    openCreateInstanceModal,
    openEditInstanceModal,
    openViewInstanceModal,
-    openRecreateInstanceModal,
    closeInstanceModal: closeModal
  };
 };
@@ -86,7 +86,6 @@ const GPUService: React.FC = () => {
    openCreateInstanceModal,
    openEditInstanceModal,
    openViewInstanceModal,
-    openRecreateInstanceModal,
    closeInstanceModal
  } = useCreateInstance();
  const { openViewLogsModal, closeViewLogsModal, openViewLogsModalStatus } =
@@ -136,13 +135,7 @@ const GPUService: React.FC = () => {

  const handleModalOk = async (data: FormData) => {
    try {
-      if (openInstanceModalStatus.realAction === PageAction.CREATE) {
-        await deleteGPUServiceInstance(openInstanceModalStatus.currentData!.id);
-        await new Promise((resolve) => {
-          setTimeout(resolve, 300);
-        });
-        await createInstance({ data });
-      } else if (openInstanceModalStatus.action === PageAction.EDIT) {
+      if (openInstanceModalStatus.action === PageAction.EDIT) {
        await updateInstance({
          id: openInstanceModalStatus.currentData!.id,
          data
@@ -243,8 +236,6 @@ const GPUService: React.FC = () => {
      openEditInstanceModal(row);
    } else if (val === 'delete') {
      handleDelete({ ...row });
-    } else if (val === 'recreate') {
-      openRecreateInstanceModal(row);
    } else if (val === 'viewlog') {
      openViewLogsModal(row);
    } else if (val === 'viewevent') {
@@ -391,7 +382,6 @@ const GPUService: React.FC = () => {
        title={openInstanceModalStatus.title}
        data={openInstanceModalStatus.currentData}
        width={openInstanceModalStatus.width}
-        realAction={openInstanceModalStatus.realAction}
        clusterList={clusterList}
        onCancel={closeInstanceModal}
        onOk={handleModalOk}
@@ -2,7 +2,7 @@ import { useQueryData } from '@gpustack/core-ui';
 import React from 'react';
 import { ceilMilliToCore, parseQuantityToGi } from '../../utils';
 import { queryGPUServiceInstanceTypes } from '../apis';
-import { getAcceleratorMax } from '../config';
+import { getAcceleratorMax, isSliceableDetail } from '../config';
 import { InstanceTypeItem } from '../config/types';

 type InstanceType = InstanceTypeItem & {
@@ -40,7 +40,7 @@ export default function useQueryInstanceTypes() {
    // Sliceable types stay selectable as long as either whole-card or sliced
    // capacity remains; unavailable only when both status.onceMaxRequest
    // .accelerator and .acceleratorSliced are 0.
-    if (item.spec?.sliceable) {
+    if (isSliceableDetail(item.status?.detail?.slicedDetail)) {
      const wholeMax = Number(item.status?.onceMaxRequest?.accelerator) || 0;
      const slicedMax =
        Number(item.status?.onceMaxRequest?.acceleratorSliced) || 0;
@@ -77,17 +77,11 @@ export default function useQueryInstanceTypes() {
        },
        status: {
          ...item.status,
+          // Normalize cpu (possibly millicores) to a whole-core count string;
+          // the other onceMaxRequest fields are plain number strings already.
          onceMaxRequest: {
            ...rawMax,
-            cpu: rawMax?.cpu
-              ? `${ceilMilliToCore(rawMax.cpu)?.cores || 0}`
-              : '',
-            ram: rawMax?.ram
-              ? `${parseQuantityToGi(rawMax.ram)?.value || 0}`
-              : '',
-            localStorage: rawMax?.localStorage
-              ? `${parseQuantityToGi(rawMax.localStorage)?.value || 0}`
-              : ''
+            cpu: rawMax?.cpu ? `${ceilMilliToCore(rawMax.cpu)?.cores || 0}` : ''
          }
        },

@@ -0,0 +1,35 @@
+import _ from 'lodash';
+import { isSliceableDetail } from '../config';
+import { InstanceTypeItem, InstanceTypeSnapshotSpec } from '../config/types';
+
+// Build the flat snapshot spec from a live (API-shaped) instance type:
+// definition fields from spec, observed hardware from status.detail, plus the
+// derived `sliceable`. This flat shape is the UI document format persisted in
+// the instance's `description` (older instances already carry it flat) and
+// doubles as the display model of the type card / metadata section.
+export const buildInstanceTypeSnapshotSpec = (
+  instanceType: InstanceTypeItem
+): InstanceTypeSnapshotSpec => {
+  const detail = instanceType.status?.detail;
+  return {
+    ...instanceType.spec,
+    ..._.pick(detail, ['manufacturer', 'product', 'family', 'memory']),
+    sliceable: isSliceableDetail(detail?.slicedDetail),
+    // Accelerator CPU identity only — the full CPU descriptor is too bulky to
+    // persist and the UI only shows who made it.
+    cpu: _.pick(detail?.cpu, ['manufacturer', 'product', 'family'])
+  };
+};
+
+// Serialize the chosen instance type into the instance's `description` field —
+// a persisted spec snapshot the form reads back to render the type card and
+// derive unit resources. Shared by the create flow (card selection) and the
+// edit flow (change-type overlay).
+export const saveInstanceDataInDescription = (
+  instanceType: InstanceTypeItem
+): string => {
+  return JSON.stringify({
+    name: instanceType.name,
+    spec: buildInstanceTypeSnapshotSpec(instanceType)
+  });
+};
@@ -11,10 +11,10 @@
 * with ``buildInstanceTypeRecordFromMiB`` and feed it here.
 */
 import _ from 'lodash';
-import { parseJsonSafe, parseQuantityToGi } from '../../utils';
+import { ceilMilliToCore, parseJsonSafe, parseQuantityToGi } from '../../utils';
 import InstanceTypeCell from '../components/instance-type-cell';
 import { formatMemoryDisplay } from '../config';
-import { InstanceTypeSpec, ListItem } from '../config/types';
+import { InstanceTypeSnapshotSpec, ListItem } from '../config/types';

 // Minimal shape of the ``useIntl()`` result we depend on — keeps this module
 // free of an intl package import.
@@ -25,7 +25,7 @@ const toGB = (v?: string | number) =>

 const buildResourcesData = (
  instanceType: {
-    spec: InstanceTypeSpec;
+    spec: InstanceTypeSnapshotSpec;
  },
  options: {
    count: number;
@@ -54,7 +54,7 @@ const getSliceMemoryPercentage = (record: ListItem) =>
  _.toNumber(record.spec?.resources?.acceleratorSlicedMemoryPercentage) || 0;

 const formatResources = (
-  instanceTypeSpec: { spec: InstanceTypeSpec },
+  instanceTypeSpec: { spec: InstanceTypeSnapshotSpec },
  record: ListItem
 ) => {
  const resources = buildResourcesData(instanceTypeSpec, {
@@ -77,25 +77,28 @@ const formatResources = (

  const sliceMemoryPercentage = getSliceMemoryPercentage(record);

-  // Sliced: CPU / RAM carry the already-scaled values on spec.resources, and
-  // VRAM is the per-card memory scaled by the memory percentage (floored,
-  // min 1) — not the whole card's size.
+  // Sliced: CPU / RAM carry the already-scaled values on spec.resources —
+  // whole cores / whole Gi for instances created by the current form; parse
+  // (instead of echoing the raw quantity) so legacy instances persisted as
+  // millicores / Mi (e.g. "400m" / "1638Mi") render as whole units too. VRAM
+  // is the per-card memory scaled by the memory percentage (floored, min 1) —
+  // not the whole card's size.
  if (sliceMemoryPercentage > 0) {
-    const vramGi = parseQuantityToGi(
-      (instanceTypeSpec.spec as any)?.memory
-    )?.value;
+    const vramGi = parseQuantityToGi(instanceTypeSpec.spec?.memory)?.value;
    const vram =
      vramGi != null
        ? `${Math.max(1, _.floor((vramGi * sliceMemoryPercentage) / 100))} GB`
        : undefined;
+    const cpuCores = ceilMilliToCore(
+      _.toString(record.spec?.resources?.cpu) || null
+    )?.cores;
+    const ramGi = parseQuantityToGi(
+      _.toString(record.spec?.resources?.ram) || null
+    )?.value;

    return {
-      cpu: record.spec?.resources?.cpu
-        ? `${record.spec?.resources?.cpu} vCPU`
-        : '-',
-      ram: record.spec?.resources?.ram
-        ? toGB(record.spec?.resources?.ram)
-        : '-',
+      cpu: cpuCores != null ? `${Math.max(1, cpuCores)} vCPU` : '-',
+      ram: ramGi != null ? `${Math.max(1, ramGi)} GB` : '-',
      vram,
      localStorage: record.spec?.resources?.localStorage
        ? toGB(record.spec?.resources?.localStorage)
@@ -105,7 +108,7 @@ const formatResources = (

  // VRAM = per-card GPU memory (a single card's size; not aggregated across
  // cards — the model's marquee spec).
-  const vram = formatMemoryDisplay((instanceTypeSpec.spec as any)?.memory);
+  const vram = formatMemoryDisplay(instanceTypeSpec.spec?.memory ?? undefined);

  return {
    cpu: resources.cpu ? `${resources.cpu} vCPU` : '-',
@@ -131,7 +134,7 @@ export const renderInstanceType = (
    // Types breakdown only wants CPU + RAM, for example.
    categories?: SpecCategory[];
    // Override the primary label (default: derived "<product> x <count>" /
-    // "CPU Only"). The Instance Types breakdown keeps its plain product name.
+    // "CPU-only"). The Instance Types breakdown keeps its plain product name.
    title?: string;
  }
 ) => {
@@ -142,13 +145,17 @@ export const renderInstanceType = (
  const accelerator = record.spec?.resources?.accelerator;
  const sliceMemoryPercentage = getSliceMemoryPercentage(record);
  const isSliced = description.acceleratable && sliceMemoryPercentage > 0;
+  // Type label (primary cell label and the popover's "Type" row) prefers the
+  // user-defined displayName persisted in the description snapshot, falling
+  // back to the hardware product.
+  const typeLabel = description.displayName || description.product;
  const title =
    options.title ??
    (description.acceleratable
      ? isSliced
-        ? `${description.product} (${sliceMemoryPercentage}%)`
-        : `${description.product} x ${accelerator}`
-      : 'CPU Only');
+        ? `${typeLabel} (${sliceMemoryPercentage}%)`
+        : `${typeLabel} x ${accelerator}`
+      : description.displayName || 'CPU-only');

  const volume = (record.spec as any)?.volume;
  // Spec popover grouped by category (GPU / CPU / Memory / Disk), mirroring
@@ -179,7 +186,7 @@ export const renderInstanceType = (
            ],
        [
          intl.formatMessage({ id: 'gpuservice.instance.section.type' }),
-          description.product
+          typeLabel
        ],
        [
          intl.formatMessage({ id: 'gpuservice.instance.memory' }),
@@ -251,7 +258,7 @@ const mibToGiQuantity = (mib?: number): string | undefined =>
 export interface InstanceTypeMiB {
  name?: string;
  product?: string;
-  // accelerator (GPU card) count; 0/undefined → CPU-only ("CPU Only").
+  // accelerator (GPU card) count; 0/undefined → CPU-only.
  gpuCount?: number;
  // Per-card values.
  unitCpuMilli?: number;
@@ -93,7 +93,7 @@ export interface ResourceBreakdownItem extends ResourceBreakdownSummary {
  unit_memory_mib?: number;
  vram_mib?: number;
  // Instance totals (requested cpu/ram) — the real size, so CPU instance types
-  // show "CPU Only · 2 vCPU · 4 GB" instead of just the per-unit spec.
+  // show "CPU-only · 2 vCPU · 4 GB" instead of just the per-unit spec.
  cpu_milli?: number;
  memory_mib?: number;
  // Per-instance rows also carry the card count + ephemeral disk so the
@@ -382,7 +382,7 @@ function flattenItem(
  if (it.creator_deleted != null) flat.user_deleted = !!it.creator_deleted;
  // Instance-type grouped trend: the series label (``group``) defaults to the
  // raw flavor slug. Instance Types are grouped by actual shape, so label each
-  // series by that shape — "<product> x <cards>" / "CPU Only · 3 vCPU · 6 GB" —
+  // series by that shape — "<product> x <cards>" / "CPU-only · 3 vCPU · 6 GB" —
  // matching the table and keeping every shape a distinct series (#5700).
  // ``groupBy`` is the unmapped frontend dimension; the instance-type axis is
  // ``gpu_type`` (→ backend ``instance_type`` via GROUP_BY_MAP).
@@ -39,7 +39,7 @@ const useInstancesColumns = (groupKey: GroupKey) => {
      }
    ];
    // Instance Types breakdown: the pretty product name (or flavor slug for
-    // older rows; "CPU Only" when no GPU cards) plus a CPU + RAM spec popover —
+    // older rows; "CPU-only" when no GPU cards) plus a CPU + RAM spec popover —
    // rendered through the canonical renderer so the formatting matches the GPU
    // Instances list, but limited to the CPU/RAM categories.
    const instanceTypeColType = {
@@ -64,7 +64,7 @@ const useInstancesColumns = (groupKey: GroupKey) => {
            intl,
            categories: ['cpu', 'ram'],
            // Each row is one shape: GPU "<product> x <cards>", CPU
-            // "CPU Only · <spec>".
+            // "CPU-only · <spec>".
            title: instanceTypeSeriesLabel(row)
          }
        );
@@ -95,7 +95,7 @@ const useInstancesColumns = (groupKey: GroupKey) => {
            persistentMib: row.persistent_mib
          }),
          // Label by shape directly (consistent with the Instance Types
-          // column); avoids renderInstanceType's "CPU Only" fallback when a
+          // column); avoids renderInstanceType's "CPU-only" fallback when a
          // GPU row has vram but a missing/zero gpu_count.
          { intl, title: instanceTypeSeriesLabel(row) }
        );
@@ -32,16 +32,16 @@ export const formatCpuSpec = (
  return parts.join(' · ');
 };

-// CPU instance-type label: "CPU Only" plus its real size when known, e.g.
-// "CPU Only · 2 vCPU · 4 GB". Used by both the table column and the trend
+// CPU instance-type label: "CPU-only" plus its real size when known, e.g.
+// "CPU-only · 2 vCPU · 4 GB". Used by both the table column and the trend
 // legend so they read identically.
 export const cpuOnlyLabel = (row?: Partial<ResourceBreakdownItem>): string => {
  const spec = formatCpuSpec(row?.cpu_milli, row?.memory_mib);
-  return spec ? `CPU Only · ${spec}` : 'CPU Only';
+  return spec ? `CPU-only · ${spec}` : 'CPU-only';
 };

 // Instance Types are grouped by actual shape, so each row is one concrete
-// type: a GPU shows "<product> x <cards>", a CPU shows "CPU Only · <spec>".
+// type: a GPU shows "<product> x <cards>", a CPU shows "CPU-only · <spec>".
 // One label for the table column and the trend legend so they read the same
 // and each shape is a distinct series. (" x " matches the GPU Instances list.)
 export const instanceTypeSeriesLabel = (
Author	SHA1	Message	Date
jialin	e919b22d98	feat(gpu-service): restrict non-stopped instance edit, drop recreate - non-stopped edit: only displayName and SSH public keys editable; type/template/storage sections disabled (stopped edit keeps all editable) - remove recreate feature and the realAction prop it required: entry, delete-then-create submit path, warning banner, locale keys	2026-07-23 10:24:54 +08:00
jialin	89a74ed26a	style(cluster): col width	2026-07-22 16:21:12 +08:00
jialin	fe4dbf087f	feat(gpu-service): align instance-type/flavor contract with status.detail API - spec keeps definition fields only; observed hardware read from status.detail - sliceable derived from slicedDetail (logical count / physical profiles) - flat snapshot format isolated in instance-description for back-compat - drop flavor.spec.sliceable; onceMaxRequest realigned (no ram/localStorage) - lock compute ratio to memory ratio when coresPercentageOvercommit is false - sliced mode submits whole cores / Gi; displayName-first type labels	2026-07-22 15:52:17 +08:00
jialin	cbd9fc4946	fix: preset 10,20,30,50 for ratios	2026-07-22 15:52:17 +08:00
jialin	74f1399e3c	feat(gpu-service): add sliced compute ratio, confirm activate/deactivate, watch instance types - add configurable compute (cores) percentage in sliced mode (cores >= memory) - confirm instance-type activate/deactivate via DeleteModal - live-sync instance types list via chunked watch	2026-07-22 15:52:17 +08:00
jialin	96d194a4f4	feat(gpu-service): allow re-typing stopped instances on edit - Add instance-type column to edit drawer for stopped instances - Extract saveInstanceDataInDescription into shared util - Floor sliced unit resources; keep CPU >= 1 core - Expose applyInstanceType for both create and edit flows	2026-07-22 15:52:17 +08:00
jialin	e9d585cc90	fix(gpu-service): only pick Active candidates for accelerator Gate pickCandidateForAccelerator on phase === Active using InstanceTypePhaseValueMap so a phase-value change stays in sync.	2026-07-22 15:52:17 +08:00
jialin	3fff1c10f2	feat(gpu-service): instance-type activate/deactivate, displayName, unified flavor display - add activate/deactivate row actions (phase-driven) with new PUT APIs - add displayName field; list shows displayName \|\| name - rename list OS column title to Platform - share a two-line flavor renderer between the create dropdown and the list - normalize 'CPU Only' label to 'CPU-only'	2026-07-22 15:52:17 +08:00
jialin	2763594ae3	feat(gpu-service): use grouped flavor select in instance type create drawer	2026-07-22 15:52:17 +08:00
jialin	1655549f31	feat(gpu-service): add sliceable tag and horizontal scroll to instance types table	2026-07-22 15:52:17 +08:00