ui : give the table its modalities, size, parameters and last used columns

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash

tools/ui/src/lib/components/app/models/ModelCapabilities.svelte

@@ -78,5 +78,5 @@
 </script>
 
 <span bind:this={el} class={className}>
-	<ModelCapabilityIcons modalities={option.modalities} {supportsThinking} {supportsToolUse} />
+	<ModelCapabilityIcons hideModalities {supportsThinking} {supportsToolUse} />
 </span>

tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import {
+		formatLastUsed,
 		isLocalOption,
 		type ModelOverride,
+		modelParamsLabel,
 		type ModelQuantGroup,
+		modelSizeLabel,
 		type ModelsTableGroup
 	} from './utils';
 	import {
@@ -25,6 +28,7 @@
 		Logo,
 		ModelAvatar,
 		ModelCapabilities,
+		ModelCapabilityIcons,
 		ModelContext,
 		ModelId,
 		ModelLoadControl,
@@ -166,7 +170,8 @@
 			}
 		];
 	}
-	const rowGrid = 'grid grid-cols-[minmax(0,1fr)_11rem_6rem_3rem_4.5rem] items-center gap-4';
+	const rowGrid =
+		'grid grid-cols-[minmax(0,1fr)_11rem_5rem_6rem_5rem_5rem_4.5rem_3rem_4.5rem] items-center gap-4';
 
 	function stateOf(option: ModelOption): ServerModelStatus | null {
 		const model = modelsStore.routerModels.find((m) => m.id === option.model);
@@ -220,6 +225,30 @@
 	</span>
 {/snippet}
 
+{#snippet modalities(option: ModelOption)}
+	<span class="flex justify-center justify-self-center">
+		<ModelCapabilityIcons hideCapabilities modalities={option.modalities} />
+	</span>
+{/snippet}
+
+{#snippet size(option: ModelOption)}
+	{@const label = modelSizeLabel(option)}
+
+	<span class="justify-self-end text-sm text-muted-foreground">{label ?? '—'}</span>
+{/snippet}
+
+{#snippet parameters(option: ModelOption)}
+	{@const label = modelParamsLabel(option)}
+
+	<span class="justify-self-end text-sm text-muted-foreground">{label ?? '—'}</span>
+{/snippet}
+
+{#snippet lastUsed(option: ModelOption)}
+	<span class="justify-self-end text-sm text-muted-foreground">
+		{formatLastUsed(modelsStore.recentModelUsage[option.id])}
+	</span>
+{/snippet}
+
 {#snippet row(option: ModelOption, indent = 0)}
 	{@const favorite = isFavorite(option)}
 	{@const canLoad = getBackendCapabilities(getBackend(option.backendId)).loadUnload}
@@ -251,6 +280,7 @@
 				class="min-w-0 flex-1"
 				hideCapabilities
 				hideModalities
+				hideParameters
 				modalities={option.modalities}
 				modelId={option.model}
 				tags={option.tags}
@@ -260,8 +290,16 @@
 
 		<ModelContext class="justify-self-end" configured={configuredContext(option)} {option} />
 
+		{@render modalities(option)}
+
 		{@render capabilities(option)}
 
+		{@render size(option)}
+
+		{@render parameters(option)}
+
+		{@render lastUsed(option)}
+
 		{@render statusDot(option)}
 
 		<div class="flex items-center justify-center justify-self-center">
@@ -309,6 +347,7 @@
 						class="min-w-0"
 						hideCapabilities
 						hideModalities
+						hideParameters
 						hideQuantization
 						modalities={entry.base.modalities}
 						modelId={entry.base.model}
@@ -322,8 +361,16 @@
 
 			<span></span>
 
+			<span></span>
+
 			{@render capabilities(entry.base)}
 
+			<span></span>
+
+			{@render parameters(entry.base)}
+
+			<span></span>
+
 			<span class="justify-self-center">
 				<span
 					class="block h-2.5 w-2.5 rounded-full {anyLoaded
@@ -372,8 +419,16 @@
 
 			<ModelContext class="justify-self-end" configured={configuredContext(option)} {option} />
 
+			{@render modalities(option)}
+
 			{@render capabilities(option)}
 
+			{@render size(option)}
+
+			{@render parameters(option)}
+
+			{@render lastUsed(option)}
+
 			{@render statusDot(option)}
 
 			<div class="flex items-center justify-center justify-self-center">
@@ -440,6 +495,14 @@
 
 		<span></span>
 
+		<span></span>
+
+		<span></span>
+
+		<span></span>
+
+		<span></span>
+
 		<span
 			class="flex justify-center {expanded
 				? 'opacity-0 group-hover:opacity-100 [@media(pointer:coarse)]:opacity-100'
@@ -512,8 +575,16 @@
 
 		<span class="text-right whitespace-nowrap">Context</span>
 
+		<span class="text-center">Modalities</span>
+
 		<span class="text-center">Capabilities</span>
 
+		<span class="text-right">Size</span>
+
+		<span class="text-right">Parameters</span>
+
+		<span class="text-right whitespace-nowrap">Last used</span>
+
 		<span class="text-center">Status</span>
 
 		<span class="text-center">Actions</span>