diff --git a/tools/server/webui/docs/high-level-architecture.md b/tools/server/webui/docs/high-level-architecture.mmd
similarity index 89%
rename from tools/server/webui/docs/high-level-architecture.md
rename to tools/server/webui/docs/high-level-architecture.mmd
index 724478b3c2..36e1413818 100644
--- a/tools/server/webui/docs/high-level-architecture.md
+++ b/tools/server/webui/docs/high-level-architecture.mmd
@@ -1,10 +1,9 @@
-```mermaid
 flowchart TB
-    subgraph Routes["📍 Routes"]
-        R1["/ (+page.svelte)"]
-        R2["/chat/[id]"]
-        RL["+layout.svelte"]
-    end
+subgraph Routes["📍 Routes"]
+R1["/ (+page.svelte)"]
+R2["/chat/[id]"]
+RL["+layout.svelte"]
+end
 
     subgraph Components["🧩 Components"]
         direction TB
@@ -12,13 +11,12 @@ flowchart TB
             C_Sidebar["ChatSidebar"]
             C_Screen["ChatScreen"]
         end
-        subgraph ChatComponents["Chat"]
+        subgraph ChatUIComponents["Chat UI"]
             C_Form["ChatForm"]
             C_Messages["ChatMessages"]
             C_Message["ChatMessage"]
-        end
-        subgraph ControlComponents["Controls"]
-            C_SelectorModel["SelectorModel"]
+            C_Attach["ChatAttachments"]
+            C_ModelsSelector["ModelsSelector"]
             C_Settings["ChatSettings"]
         end
     end
@@ -47,9 +45,9 @@ flowchart TB
             S2Utils["<b>Utilities:</b><br/>setTitleUpdateConfirmationCallback()"]
         end
         subgraph S3["modelsStore"]
-            S3State["<b>State:</b><br/>models, routerModels<br/>selectedModelId<br/>selectedModelName<br/>loading, updating, error<br/>modelUsage<br/>modelLoadingStates<br/>modelPropsCache<br/>modelPropsFetching"]
-            S3Getters["<b>Computed Getters:</b><br/>selectedModel<br/>loadedModelIds<br/>loadingModelIds"]
-            S3Modal["<b>Modalities:</b><br/>getModelModalities()<br/>modelSupportsVision()<br/>modelSupportsAudio()<br/>getModelProps()<br/>updateModelModalities()"]
+            S3State["<b>State:</b><br/>models, routerModels<br/>selectedModelId<br/>selectedModelName<br/>loading, updating, error<br/>modelUsage<br/>modelLoadingStates<br/>modelPropsCache<br/>modelPropsFetching<br/>propsCacheVersion"]
+            S3Getters["<b>Computed Getters:</b><br/>selectedModel<br/>loadedModelIds<br/>loadingModelIds<br/>singleModelName"]
+            S3Modal["<b>Modalities:</b><br/>getModelModalities()<br/>modelSupportsVision()<br/>modelSupportsAudio()<br/>getModelModalitiesArray()<br/>getModelProps()<br/>updateModelModalities()"]
             S3Status["<b>Status Queries:</b><br/>isModelLoaded()<br/>isModelOperationInProgress()<br/>getModelStatus()<br/>isModelPropsFetching()"]
             S3Fetch["<b>Data Fetching:</b><br/>fetch()<br/>fetchRouterModels()<br/>fetchModelProps()<br/>fetchModalitiesForLoadedModels()"]
             S3Select["<b>Model Selection:</b><br/>selectModelById()<br/>selectModelByName()<br/>clearSelection()<br/>findModelByName()<br/>findModelById()<br/>hasModel()"]
@@ -59,7 +57,7 @@ flowchart TB
         end
         subgraph S4["serverStore"]
             S4State["<b>State:</b><br/>props<br/>loading, error<br/>role<br/>fetchPromise"]
-            S4Getters["<b>Getters:</b><br/>modelName<br/>supportedModalities<br/>supportsVision<br/>supportsAudio<br/>defaultParams<br/>contextSize<br/>slotsEndpointAvailable<br/>isRouterMode<br/>isModelMode"]
+            S4Getters["<b>Getters:</b><br/>defaultParams<br/>contextSize<br/>slotsEndpointAvailable<br/>isRouterMode<br/>isModelMode"]
             S4Data["<b>Data Handling:</b><br/>fetch()<br/>getErrorMessage()<br/>clear()"]
             S4Utils["<b>Utilities:</b><br/>detectRole()"]
         end
@@ -103,26 +101,24 @@ flowchart TB
                 RE22["selectedModelOption()"]
                 RE23["loadedModelIds()"]
                 RE24["loadingModelIds()"]
+                RE25["propsCacheVersion()"]
+                RE26["singleModelName()"]
             end
             subgraph ServerExports["serverStore"]
-                RE25["serverProps()"]
-                RE26["serverLoading()"]
-                RE27["serverError()"]
-                RE28["serverRole()"]
-                RE29["modelName()"]
-                RE30["supportedModalities()"]
-                RE31["supportsVision()"]
-                RE32["supportsAudio()"]
-                RE33["slotsEndpointAvailable()"]
-                RE34["defaultParams()"]
-                RE35["contextSize()"]
-                RE36["isRouterMode()"]
-                RE37["isModelMode()"]
+                RE27["serverProps()"]
+                RE28["serverLoading()"]
+                RE29["serverError()"]
+                RE30["serverRole()"]
+                RE31["slotsEndpointAvailable()"]
+                RE32["defaultParams()"]
+                RE33["contextSize()"]
+                RE34["isRouterMode()"]
+                RE35["isModelMode()"]
             end
             subgraph SettingsExports["settingsStore"]
-                RE38["config()"]
-                RE39["theme()"]
-                RE40["isInitialized()"]
+                RE36["config()"]
+                RE37["theme()"]
+                RE38["isInitialized()"]
             end
         end
     end
@@ -181,8 +177,10 @@ flowchart TB
     %% Component hierarchy
     C_Screen --> C_Form & C_Messages & C_Settings
     C_Messages --> C_Message
-    C_Message --> C_SelectorModel
-    C_Form --> C_SelectorModel
+    C_Message --> C_ModelsSelector
+    C_Form --> C_ModelsSelector
+    C_Form --> C_Attach
+    C_Message --> C_Attach
 
     %% Components use Stores
     C_Screen --> S1 & S2
@@ -190,7 +188,7 @@ flowchart TB
     C_Message --> S1 & S2 & S3
     C_Form --> S1 & S3
     C_Sidebar --> S2
-    C_SelectorModel --> S3 & S4
+    C_ModelsSelector --> S3 & S4
     C_Settings --> S5
 
     %% Stores export Reactive State
@@ -233,8 +231,9 @@ flowchart TB
 
     class R1,R2,RL routeStyle
     class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message componentStyle
-    class C_SelectorModel,C_Settings componentStyle
-    class LayoutComponents,ChatComponents,ControlComponents componentGroupStyle
+    class C_ModelsSelector,C_Settings componentStyle
+    class C_Attach componentStyle
+    class LayoutComponents,ChatUIComponents componentGroupStyle
     class S1,S2,S3,S4,S5 storeStyle
     class S1State,S2State,S3State,S4State,S5State stateStyle
     class S1Msg,S1Regen,S1Edit,S1Stream,S1LoadState,S1ProcState,S1Error,S1Utils methodStyle
@@ -251,4 +250,3 @@ flowchart TB
     class SV5Extract,SV5Merge,SV5Info,SV5Diff serviceMStyle
     class ST1,ST2,ST3,ST5,ST6,ST7 storageStyle
     class API1,API2,API3,API4 apiStyle
-```
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
index a59ef89636..4d834e72c3 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
@@ -5,7 +5,7 @@
 		ChatFormActionFileAttachments,
 		ChatFormActionRecord,
 		ChatFormActionSubmit,
-		SelectorModel
+		ModelsSelector
 	} from '$lib/components/app';
 	import { FileTypeCategory } from '$lib/enums';
 	import { getFileTypeCategory } from '$lib/utils/file-type';
@@ -153,7 +153,7 @@
 		return '';
 	});
 
-	let selectorModelRef: SelectorModel | undefined = $state(undefined);
+	let selectorModelRef: ModelsSelector | undefined = $state(undefined);
 
 	export function openModelSelector() {
 		selectorModelRef?.open();
@@ -178,7 +178,7 @@
 		{onFileUpload}
 	/>
 
-	<SelectorModel
+	<ModelsSelector
 		bind:this={selectorModelRef}
 		currentModel={conversationModel}
 		forceForegroundText={true}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
index 71b0f79813..a092b2b019 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import {
-		BadgeModelName,
+		ModelBadge,
 		ChatMessageActions,
 		ChatMessageStatistics,
 		ChatMessageThinkingBlock,
 		CopyToClipboardIcon,
 		MarkdownContent,
-		SelectorModel
+		ModelsSelector
 	} from '$lib/components/app';
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
 	import { useModelChangeValidation } from '$lib/hooks/use-model-change-validation.svelte';
@@ -248,14 +248,14 @@
 		{#if displayedModel()}
 			<span class="inline-flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
 				{#if isRouter}
-					<SelectorModel
+					<ModelsSelector
 						currentModel={displayedModel()}
 						onModelChange={handleModelChange}
 						disabled={isLoading()}
 						upToMessageId={message.id}
 					/>
 				{:else}
-					<BadgeModelName model={displayedModel() || undefined} onclick={handleCopyModel} />
+					<ModelBadge model={displayedModel() || undefined} onclick={handleCopyModel} />
 				{/if}
 
 				{#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
diff --git a/tools/server/webui/src/lib/components/app/index.ts b/tools/server/webui/src/lib/components/app/index.ts
index bcc1f41c53..b87f292cbe 100644
--- a/tools/server/webui/src/lib/components/app/index.ts
+++ b/tools/server/webui/src/lib/components/app/index.ts
@@ -55,14 +55,14 @@ export { default as ActionButton } from './misc/ActionButton.svelte';
 export { default as ActionDropdown } from './misc/ActionDropdown.svelte';
 export { default as BadgeChatStatistic } from './misc/BadgeChatStatistic.svelte';
 export { default as BadgeInfo } from './misc/BadgeInfo.svelte';
-export { default as BadgeModelName } from './misc/BadgeModelName.svelte';
+export { default as ModelBadge } from './models/ModelBadge.svelte';
 export { default as BadgeModality } from './misc/BadgeModality.svelte';
 export { default as ConversationSelection } from './misc/ConversationSelection.svelte';
 export { default as CopyToClipboardIcon } from './misc/CopyToClipboardIcon.svelte';
 export { default as KeyboardShortcutInfo } from './misc/KeyboardShortcutInfo.svelte';
 export { default as MarkdownContent } from './misc/MarkdownContent.svelte';
 export { default as RemoveButton } from './misc/RemoveButton.svelte';
-export { default as SelectorModel } from './misc/SelectorModel.svelte';
+export { default as ModelsSelector } from './models/ModelsSelector.svelte';
 
 // Server
 
diff --git a/tools/server/webui/src/lib/components/app/misc/BadgeModelName.svelte b/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte
similarity index 100%
rename from tools/server/webui/src/lib/components/app/misc/BadgeModelName.svelte
rename to tools/server/webui/src/lib/components/app/models/ModelBadge.svelte
diff --git a/tools/server/webui/src/lib/components/app/misc/SelectorModel.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
similarity index 100%
rename from tools/server/webui/src/lib/components/app/misc/SelectorModel.svelte
rename to tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte