feat: per-page extra-columns slot for list tables

Add `usePluginListColumns(pageKey)` so a registered plugin can splice
extra columns into a list page's columns hook keyed by page id. The
slot is wired into 11 list pages (Models, Model Routes, Clusters,
Cloud Credentials, MaaS Providers, Model Files, Model Instances,
GPU Service Instances / Public Keys / Storage / Storage Types) so any
consumer of the seam reaches every org-scoped list without per-page
plumbing.

The slot accepts either a static array or a hook function — the hook
form lets the registrant use React hooks to decide visibility without
the host having to evaluate it. Columns carry a `placement`:
`after-name` is the default (sits next to the row's identifying
column); `before-time` / `before-operation` are kept for back-compat
with the existing per-page `modelRoutes.extraColumns` slot.

SealTable-grid pages (Models / Model Routes / Clusters) absorb the
plugin column's span by shrinking the widest right-side columns so
the 24-unit grid stays balanced. Model Routes' `CREATE_TIME_MIN_SPAN`
drops from 3 to 2 because with two plugin columns active the grid
was 1 unit over and the action dropdown wrapped onto a new row; the
date string ellipsizes cleanly at the lower min.

ListItem types for Model Instances, MaaS Providers, Cloud Credentials,
and Model Files gain an optional `owner_principal_id` field — the
backend already emits it (denormalized from the parent resource), the
TS types just hadn't declared it.

The GPU Instances page splices the plugin column right before the
Cluster column (rather than after Name); the two read together since
Cluster narrows down to one Org.

src/pages/llmodels/config/types.ts

@@ -145,6 +145,9 @@ export interface DistributedServers {
 export interface ModelInstanceListItem {
   backend?: string;
   cluster_id: number;
+  // Inherited from the parent Model's owner_principal_id on the
+  // wire so per-row tenant filtering works without joining.
+  owner_principal_id?: number | null;
   backend_version?: string;
   source: string;
   categories?: string[];

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

@@ -2,6 +2,7 @@
 import { systemConfigAtom } from '@/atoms/system';
 import { OPENAI_COMPATIBLE, tableSorter } from '@/config/settings';
 import { TargetStatusValueMap } from '@/pages/model-routes/config';
+import { usePluginListColumns } from '@/plugins/list-extra-columns';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import {
   AutoTooltip,
@@ -105,6 +106,7 @@ const useModelsColumns = ({
 }: ModelsColumnsHookProps & { targetList: any[] }): TableColumnProps[] => {
   const intl = useIntl();
   const systemConfig = useAtomValue(systemConfigAtom);
+  const pluginCols = usePluginListColumns('llmodels');
 
   const setModelActionList = useMemoizedFn((record: any) => {
     return _.filter(ActionList, (action: any) => {
@@ -150,6 +152,30 @@ const useModelsColumns = ({
   };
 
   return useMemo(() => {
+    // Two prebuilt span maps for the 24-unit SealTable grid: one for
+    // the default layout, one for when a plugin contributes an extra
+    // column (currently always the 4-span Organization cell). Width
+    // absorbed comes from the widest non-name columns (`source`,
+    // `replicas`, `created_at`). See the matching map in
+    // `use-cluster-columns.tsx` for rationale.
+    const SPANS_DEFAULT = {
+      source: 5,
+      replicas: 4,
+      createTime: 4
+    };
+    const SPANS_WITH_PLUGIN = {
+      source: 3,
+      replicas: 3,
+      createTime: 3
+    };
+    const spans = pluginCols.length > 0 ? SPANS_WITH_PLUGIN : SPANS_DEFAULT;
+    const pluginRendered = pluginCols.map((c) => ({
+      title: intl.formatMessage({ id: c.titleId }),
+      dataIndex: c.key,
+      key: c.key,
+      span: c.span ?? 4,
+      render: (_text: any, record: ListItem) => c.render(record)
+    }));
     return [
       {
         title: intl.formatMessage({ id: 'common.table.name' }),
@@ -173,6 +199,7 @@ const useModelsColumns = ({
           </Flex>
         )
       },
+      ...pluginRendered,
       {
         title: intl.formatMessage({ id: 'clusters.title' }),
         dataIndex: 'cluster_id',
@@ -193,7 +220,7 @@ const useModelsColumns = ({
         dataIndex: 'source',
         key: 'source',
         sorter: tableSorter(3),
-        span: 5,
+        span: spans.source,
         render: (text: string, record: ListItem) => (
           <span className="flex flex-column" style={{ width: '100%' }}>
             <AutoTooltip ghost>{generateSource(record)}</AutoTooltip>
@@ -216,7 +243,7 @@ const useModelsColumns = ({
         key: 'replicas',
         align: 'left',
         sorter: tableSorter(4),
-        span: 4,
+        span: spans.replicas,
         editable: {
           valueType: 'number',
           title: intl.formatMessage({ id: 'models.table.replicas.edit' })
@@ -241,7 +268,7 @@ const useModelsColumns = ({
         dataIndex: 'created_at',
         key: 'created_at',
         sorter: tableSorter(5),
-        span: 4,
+        span: spans.createTime,
         render: (text: number) => (
           <AutoTooltip ghost>
             {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -261,7 +288,14 @@ const useModelsColumns = ({
         )
       }
     ];
-  }, [sortOrder, clusterList, intl, handleSelect, setModelActionList]);
+  }, [
+    sortOrder,
+    clusterList,
+    intl,
+    handleSelect,
+    setModelActionList,
+    pluginCols
+  ]);
 };
 
 export default useModelsColumns;

src/pages/llmodels/instance-view/use-instance-columns.tsx

@@ -1,6 +1,7 @@
 // columns.ts
 import { tableSorter } from '@/config/settings';
 import { ListItem as workerListItem } from '@/pages/resources/config/types';
+import { usePluginListColumns } from '@/plugins/list-extra-columns';
 import { convertFileSize } from '@/utils';
 import { ThunderboltFilled } from '@ant-design/icons';
 import { AutoTooltip, IconFont } from '@gpustack/core-ui';
@@ -67,6 +68,7 @@ const useInstancesColumns = (options: {
   const intl = useIntl();
   const { workerList, clusterList, modelList, handleSelect, onCellClick } =
     options;
+  const pluginCols = usePluginListColumns('modelInstances');
 
   const renderWorkerCell = (text: number, record: ListItem) => {
     if (text) {
@@ -84,6 +86,12 @@ const useInstancesColumns = (options: {
   };
 
   return useMemo(() => {
+    const pluginRendered = pluginCols.map((c) => ({
+      title: intl.formatMessage({ id: c.titleId }),
+      key: c.key,
+      ellipsis: { showTitle: false },
+      render: (_text: any, record: ListItem) => c.render(record)
+    }));
     return [
       {
         title: intl.formatMessage({ id: 'common.table.name' }),
@@ -118,6 +126,7 @@ const useInstancesColumns = (options: {
           </>
         )
       },
+      ...pluginRendered,
       {
         title: intl.formatMessage({ id: 'clusters.title' }),
         dataIndex: 'cluster_id',
@@ -202,7 +211,15 @@ const useInstancesColumns = (options: {
         )
       }
     ];
-  }, [handleSelect, onCellClick, workerList, clusterList, modelList]);
+  }, [
+    handleSelect,
+    onCellClick,
+    workerList,
+    clusterList,
+    modelList,
+    intl,
+    pluginCols
+  ]);
 };
 
 export default useInstancesColumns;