refactor: Cleanup

tools/server/webui/src/lib/components/app/actions/index.ts

@@ -6,17 +6,14 @@
  *
  */
 
-/** Styled button for action triggers with icon support. */
-export { default as ActionButton } from './ActionButton.svelte';
+/** Styled icon button for action triggers with tooltip. */
+export { default as ActionIcon } from './ActionIcon.svelte';
 
 /** Code block actions component (copy, preview). */
-export { default as CodeBlockActions } from '../actions/CodeBlockActions.svelte';
+export { default as ActionIconsCodeBlock } from './ActionIconsCodeBlock.svelte';
 
-/** Copy-to-clipboard button with success feedback. */
-export { default as CopyToClipboardIcon } from './CopyToClipboardIcon.svelte';
+/** Copy-to-clipboard icon button with click handler. */
+export { default as ActionIconCopyToClipboard } from './ActionIconCopyToClipboard.svelte';
 
-/** Remove/delete button with X icon. */
-export { default as RemoveButton } from './RemoveButton.svelte';
-
-/** Display for keyboard shortcut hints (e.g., "⌘ + Enter"). */
-export { default as KeyboardShortcutInfo } from './KeyboardShortcutInfo.svelte';
+/** Remove/delete icon button with X icon. */
+export { default as ActionIconRemove } from './ActionIconRemove.svelte';

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpPrompt.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ChatMessageMcpPromptContent, RemoveButton } from '$lib/components/app';
+	import { ChatMessageMcpPromptContent, ActionIconRemove } from '$lib/components/app';
 	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
 	import { McpPromptVariant } from '$lib/enums';
 
@@ -34,7 +34,7 @@
 		<div
 			class="absolute top-8 right-2 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
 		>
-			<RemoveButton id={prompt.name} onRemove={() => onRemove?.()} />
+			<ActionIconRemove id={prompt.name} onRemove={() => onRemove?.()} />
 		</div>
 	{/if}
 </div>

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResource.svelte

@@ -11,7 +11,7 @@
 	} from '$lib/constants/mcp-resource';
 	import { MimeTypePrefix, MimeTypeIncludes, UriPattern } from '$lib/enums';
 	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { RemoveButton } from '../../actions';
+	import { ActionIconRemove } from '$lib/components/app';
 
 	interface Props {
 		attachment: MCPResourceAttachment;
@@ -93,7 +93,7 @@
 			</span>
 
 			{#if onRemove}
-				<RemoveButton class="bg-transparent " id={attachment.id} {onRemove} />
+				<ActionIconRemove class="bg-transparent " id={attachment.id} {onRemove} />
 			{/if}
 		</button>
 	</Tooltip.Trigger>

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentThumbnailFile.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { RemoveButton } from '$lib/components/app';
+	import { ActionIconRemove } from '$lib/components/app';
 	import { formatFileSize, getFileTypeLabel, getPreviewText, isTextFile } from '$lib/utils';
 	import { AttachmentType } from '$lib/enums';
 
@@ -104,7 +104,7 @@
 			onclick={onClick}
 		>
 			<div class="absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100">
-				<RemoveButton {id} {onRemove} />
+				<ActionIconRemove {id} {onRemove} />
 			</div>
 
 			<div class="pr-8">
@@ -158,7 +158,7 @@
 
 		{#if !readonly}
 			<div class="absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100">
-				<RemoveButton {id} {onRemove} />
+				<ActionIconRemove {id} {onRemove} />
 			</div>
 		{/if}
 	</button>

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentThumbnailImage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { RemoveButton } from '$lib/components/app';
+	import { ActionIconRemove } from '$lib/components/app';
 
 	interface Props {
 		id: string;
@@ -58,7 +58,7 @@
 		<div
 			class="absolute top-1 right-1 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
 		>
-			<RemoveButton {id} {onRemove} class="text-white" />
+			<ActionIconRemove {id} {onRemove} class="text-white" />
 		</div>
 	{/if}
 </div>

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentInput.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { MCPPromptInfo } from '$lib/types';
 	import { fly } from 'svelte/transition';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
 
 	type PromptArgument = NonNullable<MCPPromptInfo['arguments']>[number];
 
@@ -34,10 +36,7 @@
 </script>
 
 <div class="relative grid gap-1">
-	<label
-		for="arg-{argument.name}"
-		class="mb-1 flex items-center gap-2 text-sm text-muted-foreground"
-	>
+	<Label for="arg-{argument.name}" class="mb-1 text-muted-foreground">
 		<span>
 			{argument.name}
 
@@ -49,9 +48,9 @@
 		{#if isLoadingSuggestions}
 			<span class="text-xs text-muted-foreground/50">...</span>
 		{/if}
-	</label>
+	</Label>
 
-	<input
+	<Input
 		id="arg-{argument.name}"
 		type="text"
 		{value}
@@ -62,7 +61,6 @@
 		placeholder={argument.description || argument.name}
 		required={argument.required}
 		autocomplete="off"
-		class="w-full rounded-lg border border-border/50 bg-background px-3 py-2 text-sm focus:border-primary focus:outline-none"
 	/>
 
 	{#if isAutocompleteActive && suggestions.length > 0}

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte

@@ -7,10 +7,12 @@
 	import { DatabaseService } from '$lib/services';
 	import { SYSTEM_MESSAGE_PLACEHOLDER } from '$lib/constants/ui';
 	import { MessageRole, AttachmentType } from '$lib/enums';
-	import ChatMessageAssistant from './ChatMessageAssistant.svelte';
-	import ChatMessageUser from './ChatMessageUser.svelte';
-	import ChatMessageSystem from './ChatMessageSystem.svelte';
-	import ChatMessageMcpPrompt from './ChatMessageMcpPrompt.svelte';
+	import {
+		ChatMessageAssistant,
+		ChatMessageUser,
+		ChatMessageSystem,
+		ChatMessageMcpPrompt
+	} from '$lib/components/app/chat';
 	import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
 	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
 

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Edit, Copy, RefreshCw, Trash2, ArrowRight } from '@lucide/svelte';
 	import {
-		ActionButton,
+		ActionIcon,
 		ChatMessageBranchingControls,
 		DialogConfirmation
 	} from '$lib/components/app';
@@ -72,21 +72,21 @@
 		<div
 			class="pointer-events-auto inset-0 flex items-center gap-1 opacity-100 transition-all duration-150"
 		>
-			<ActionButton icon={Copy} tooltip="Copy" onclick={onCopy} />
+			<ActionIcon icon={Copy} tooltip="Copy" onclick={onCopy} />
 
 			{#if onEdit}
-				<ActionButton icon={Edit} tooltip="Edit" onclick={onEdit} />
+				<ActionIcon icon={Edit} tooltip="Edit" onclick={onEdit} />
 			{/if}
 
 			{#if role === MessageRole.ASSISTANT && onRegenerate}
-				<ActionButton icon={RefreshCw} tooltip="Regenerate" onclick={() => onRegenerate()} />
+				<ActionIcon icon={RefreshCw} tooltip="Regenerate" onclick={() => onRegenerate()} />
 			{/if}
 
 			{#if role === MessageRole.ASSISTANT && onContinue}
-				<ActionButton icon={ArrowRight} tooltip="Continue" onclick={onContinue} />
+				<ActionIcon icon={ArrowRight} tooltip="Continue" onclick={onContinue} />
 			{/if}
 
-			<ActionButton icon={Trash2} tooltip="Delete" onclick={onDelete} />
+			<ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />
 		</div>
 	</div>
 

tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte

@@ -34,7 +34,7 @@
 	import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
 	import githubLightCss from 'highlight.js/styles/github.css?inline';
 	import { mode } from 'mode-watcher';
-	import { CodeBlockActions, DialogCodePreview } from '$lib/components/app';
+	import { ActionIconsCodeBlock, DialogCodePreview } from '$lib/components/app';
 	import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
 	import type { DatabaseMessage } from '$lib/types/database';
 
@@ -604,7 +604,7 @@
 		<div class="code-block-wrapper streaming-code-block relative">
 			<div class="code-block-header">
 				<span class="code-language">{incompleteCodeBlock.language || 'text'}</span>
-				<CodeBlockActions
+				<ActionIconsCodeBlock
 					code={incompleteCodeBlock.code}
 					language={incompleteCodeBlock.language || 'text'}
 					disabled={true}

tools/server/webui/src/lib/components/app/dialogs/DialogModelInformation.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Dialog from '$lib/components/ui/dialog';
 	import * as Table from '$lib/components/ui/table';
-	import { BadgeModality, CopyToClipboardIcon } from '$lib/components/app';
+	import { BadgeModality, ActionIconCopyToClipboard } from '$lib/components/app';
 	import { serverStore } from '$lib/stores/server.svelte';
 	import { modelsStore, modelOptions, modelsLoading } from '$lib/stores/models.svelte';
 	import { formatFileSize, formatParameters, formatNumber } from '$lib/utils';
@@ -73,7 +73,7 @@
 											{modelName}
 										</span>
 
-										<CopyToClipboardIcon
+										<ActionIconCopyToClipboard
 											text={modelName || ''}
 											canCopy={!!modelName}
 											ariaLabel="Copy model name to clipboard"
@@ -97,7 +97,7 @@
 										{serverProps.model_path}
 									</span>
 
-									<CopyToClipboardIcon
+									<ActionIconCopyToClipboard
 										text={serverProps.model_path}
 										ariaLabel="Copy model path to clipboard"
 									/>

tools/server/webui/src/lib/components/app/misc/index.ts

@@ -35,3 +35,11 @@ export { default as HorizontalScrollCarousel } from './HorizontalScrollCarousel.
  * Useful for long names or paths in constrained spaces.
  */
 export { default as TruncatedText } from './TruncatedText.svelte';
+
+/**
+ * **KeyboardShortcutInfo** - Keyboard shortcut hint display
+ *
+ * Displays keyboard shortcut hints (e.g., "⌘ + Enter").
+ * Supports special keys like shift, cmd, and custom text.
+ */
+export { default as KeyboardShortcutInfo } from './KeyboardShortcutInfo.svelte';

tools/server/webui/src/lib/components/app/models/ModelBadge.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Package } from '@lucide/svelte';
-	import { BadgeInfo, CopyToClipboardIcon } from '$lib/components/app';
+	import { BadgeInfo, ActionIconCopyToClipboard } from '$lib/components/app';
 	import { modelsStore } from '$lib/stores/models.svelte';
 	import { serverStore } from '$lib/stores/server.svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -34,7 +34,7 @@
 		{model}
 
 		{#if showCopyIcon}
-			<CopyToClipboardIcon text={model || ''} ariaLabel="Copy model name" />
+			<ActionIconCopyToClipboard text={model || ''} ariaLabel="Copy model name" />
 		{/if}
 	</BadgeInfo>
 {/snippet}