ui : give models one mark

The mark was Package through MODEL_SELECTOR_ICON in the selector, the
sidebar and the slash command, but Box in the manager title and the selector
footers, Boxes for the compat groups, and a bare Package in the badge. It
lives with the other icon constants as MODEL_ICON now, and every one of
those places reads it.

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

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerCommand.svelte

@@ -5,7 +5,7 @@
 		ChatFormPickerListItem,
 		ChatFormPickerPopover
 	} from '$lib/components/app/chat';
-	import { MODEL_SELECTOR_ICON } from '$lib/constants';
+	import { MODEL_ICON } from '$lib/constants';
 	import { ChatFormCommandAction } from '$lib/enums';
 	import { usePickerNavigation } from '$lib/hooks/use-picker-navigation.svelte';
 	import type { ChatFormCommand } from '$lib/types';
@@ -28,7 +28,7 @@
 
 	const commandIcon: Record<ChatFormCommandAction, typeof Sparkles> = {
 		[ChatFormCommandAction.CWD]: FolderOpen,
-		[ChatFormCommandAction.MODEL]: MODEL_SELECTOR_ICON,
+		[ChatFormCommandAction.MODEL]: MODEL_ICON,
 		[ChatFormCommandAction.PROMPT]: Sparkles
 	};
 

tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { ArrowLeft, Box, Compass, Server } from '@lucide/svelte';
+	import { ArrowLeft, Compass, Server } from '@lucide/svelte';
 	import ModelsDiscover from '$lib/components/app/models/discover/ModelsDiscover.svelte';
 	import ModelsManager from '$lib/components/app/models/ModelsManager/ModelsManager.svelte';
 	import ModelsManagerModelProviders from '$lib/components/app/models/ModelsManager/ModelsManagerModelProviders.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
+	import { MODEL_ICON } from '$lib/constants';
 	import { uiStore } from '$lib/stores';
 	import { untrack } from 'svelte';
 
@@ -104,7 +105,7 @@
 			>
 				<!-- the marks cross-fade in one grid cell, so the title never shifts -->
 				<span class="grid h-5 w-5 shrink-0 place-items-center">
-					<Box
+					<MODEL_ICON
 						class="col-start-1 row-start-1 h-5 w-5 transition-opacity duration-150 {view ===
 						'manage'
 							? 'opacity-100'

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

@@ -2,7 +2,7 @@
 	import ModelsDiscoverAvatar from './discover/ModelsDiscoverAvatar.svelte';
 	import { BackendIcon } from '$lib/components/app/backends';
 	import { Logo } from '$lib/components/app/misc';
-	import { HF_BASE_MODEL_TAG_REGEX, LOCAL_BACKEND_ID, MODEL_SELECTOR_ICON } from '$lib/constants';
+	import { HF_BASE_MODEL_TAG_REGEX, LOCAL_BACKEND_ID, MODEL_ICON } from '$lib/constants';
 	import { HuggingFaceService, ModelsService } from '$lib/services';
 	import type { ModelOption } from '$lib/types/models';
 	import { orgOf } from '$lib/utils';
@@ -118,7 +118,7 @@
 				{#if isLocal}
 					<Logo class={size} style="--size: 100%" />
 				{:else}
-					<MODEL_SELECTOR_ICON class={size} />
+					<MODEL_ICON class={size} />
 				{/if}
 			{/snippet}
 		</BackendIcon>

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import ModelId from './ModelId.svelte';
-	import { Package } from '@lucide/svelte';
 	import { ActionIconCopyToClipboard, BadgeInfo } from '$lib/components/app';
 	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { MODEL_ICON } from '$lib/constants';
 	import { modelsStore, serverStore } from '$lib/stores';
 
 	interface Props {
@@ -29,7 +29,7 @@
 {#snippet badgeContent(triggerProps?: Record<string, unknown>)}
 	<BadgeInfo {...triggerProps ?? {}} class={className} {onclick}>
 		{#snippet icon()}
-			<Package class="h-3 w-3" />
+			<MODEL_ICON class="h-3 w-3" />
 		{/snippet}
 
 		{#if model}

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

@@ -13,7 +13,6 @@
 	import {
 		ArrowDown,
 		ArrowUp,
-		Boxes,
 		ChevronDown,
 		ChevronUp,
 		Download,
@@ -44,7 +43,7 @@
 	import ModelsSelectorDownloadItem from '$lib/components/app/models/ModelsSelector/ModelsSelectorDownloadItem.svelte';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
-	import { FAMILY_ROW_WINDOW, MODEL_ROW_WINDOW } from '$lib/constants';
+	import { FAMILY_ROW_WINDOW, MODEL_ICON, MODEL_ROW_WINDOW } from '$lib/constants';
 	import { ModelCapability, ModelDownloadConfirmAction, ServerModelStatus } from '$lib/enums';
 	import {
 		backendsModelsStore,
@@ -719,7 +718,7 @@
 					{:else if group.kind === 'local' || group.key === 'llama-compat'}
 						<Logo class="shrink-0" style="--size: 0.875rem" />
 					{:else if group.kind === 'compat'}
-						<Boxes class="h-3.5 w-3.5 shrink-0" />
+						<MODEL_ICON class="h-3.5 w-3.5 shrink-0" />
 					{/if}
 				{/snippet}
 

tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ModelLoadHighlight from '../ModelLoadHighlight.svelte';
-	import { Box, ChevronDown, Loader2 } from '@lucide/svelte';
+	import { ChevronDown, Loader2 } from '@lucide/svelte';
 	import {
 		DropdownMenuSearchable,
 		ModelId,
@@ -12,11 +12,7 @@
 	import type { ModelItem } from '$lib/components/app/navigation/utils';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
-	import {
-		DROPDOWN_MENU_CONTENT_SEARCH_SELECTOR,
-		MODEL_SELECTOR_ICON,
-		SETTINGS_KEYS
-	} from '$lib/constants';
+	import { DROPDOWN_MENU_CONTENT_SEARCH_SELECTOR, MODEL_ICON, SETTINGS_KEYS } from '$lib/constants';
 	import { KeyboardKey, ServerModelStatus } from '$lib/enums';
 	import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
 	import { modelsStore, settingsStore, uiStore } from '$lib/stores';
@@ -205,7 +201,7 @@
 				]}
 				style="max-width: min(calc(100cqw - 10rem), 48rem)"
 			>
-				<MODEL_SELECTOR_ICON class="h-3.5 w-3.5 shrink-0" />
+				<MODEL_ICON class="h-3.5 w-3.5 shrink-0" />
 			</span>
 		{:else}
 			<button
@@ -377,7 +373,7 @@
 							     scrollport, past the option list. -->
 							<DropdownMenu.Group class="px-2">
 								<DropdownMenu.Item class="gap-2" onSelect={handleManageModels}>
-									<Box class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+									<MODEL_ICON class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
 
 									Manage models
 								</DropdownMenu.Item>

tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ModelLoadHighlight from '../ModelLoadHighlight.svelte';
-	import { Box, ChevronDown, Loader2 } from '@lucide/svelte';
+	import { ChevronDown, Loader2 } from '@lucide/svelte';
 	import {
 		ModelId,
 		ModelsSelectorList,
@@ -9,7 +9,7 @@
 	} from '$lib/components/app';
 	import { DialogBackendForm } from '$lib/components/app/backends';
 	import * as Sheet from '$lib/components/ui/sheet';
-	import { SETTINGS_KEYS } from '$lib/constants';
+	import { MODEL_ICON, SETTINGS_KEYS } from '$lib/constants';
 	import { ServerModelStatus } from '$lib/enums';
 	import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
 	import { modelsStore, settingsStore, uiStore } from '$lib/stores';
@@ -215,7 +215,7 @@
 								onclick={handleManageModels}
 								type="button"
 							>
-								<Box class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+								<MODEL_ICON class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
 
 								Manage models
 							</button>

tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorTriggerIcon.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ModelAvatar from '../ModelAvatar.svelte';
-	import { MODEL_SELECTOR_ICON } from '$lib/constants';
+	import { MODEL_ICON } from '$lib/constants';
 	import type { ModelOption } from '$lib/types/models';
 
 	interface Props {
@@ -15,9 +15,9 @@
 {#if option}
 	<ModelAvatar class={className} {option} showQuantBadge={false} showRepoOrgAvatar size={className}>
 		{#snippet fallback()}
-			<MODEL_SELECTOR_ICON class={className} />
+			<MODEL_ICON class={className} />
 		{/snippet}
 	</ModelAvatar>
 {:else}
-	<MODEL_SELECTOR_ICON class={className} />
+	<MODEL_ICON class={className} />
 {/if}

tools/ui/src/lib/constants/icons.constants.ts

@@ -1,5 +1,5 @@
 /**
- * Icon mappings for file types and model modalities
+ * Icon mappings for file types, models and model modalities
  * Centralized configuration to ensure consistent icon usage across the app
  */
 
@@ -10,6 +10,7 @@ import {
 	Image as ImageIcon,
 	Lightbulb as ReasoningIcon,
 	Mic as AudioIcon,
+	Package as ModelIcon,
 	Video as VideoIcon,
 	Wrench as ToolUseIcon
 } from '@lucide/svelte';
@@ -27,6 +28,9 @@ export const FILE_TYPE_ICONS = {
 
 export const DEFAULT_FILE_ICON = FileIcon;
 
+/** The mark for a model, wherever one is listed. */
+export const MODEL_ICON = ModelIcon;
+
 export const MODALITY_ICONS = {
 	[ModelModality.AUDIO]: AudioIcon,
 	[ModelModality.VIDEO]: VideoIcon,

tools/ui/src/lib/constants/ui.constants.ts

@@ -1,4 +1,5 @@
-import { Package, Search, Settings, SquarePen } from '@lucide/svelte';
+import { MODEL_ICON } from './icons.constants';
+import { Search, Settings, SquarePen } from '@lucide/svelte';
 import McpLogo from '$lib/components/app/mcp/McpLogo.svelte';
 import { SidebarAction, ToolSource } from '$lib/enums';
 import type { DesktopIconStripItem } from '$lib/types';
@@ -48,9 +49,6 @@ export const DEFAULT_MOBILE_BREAKPOINT = 768;
 /** Orgs whose avatar is dark and needs inverting in dark mode. */
 export const DARK_INVERT_AVATAR_ORGS = ['openai'];
 
-/** Icon used for the model selector and the `/model` slash command. */
-export const MODEL_SELECTOR_ICON = Package;
-
 /** Models listed per remote provider before the "+ X more" line; search covers the rest. */
 export const REMOTE_PROVIDER_MODEL_LIMIT = 12;
 
@@ -84,7 +82,7 @@ export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
 	{ icon: Search, keys: ['cmd', 'k'], tooltip: 'Search' },
 	{
 		action: SidebarAction.MANAGE_MODELS,
-		icon: MODEL_SELECTOR_ICON,
+		icon: MODEL_ICON,
 		tooltip: 'Models'
 	},
 	{