webui: Spring Cleaning Refactor v1

[allozaur]

Overview

• Storybook config cleanup
• Components decoupling and rearrangments + renaming with DRY/KISS refactors
• Better Hooks coverage

Additional information

Requirements

• I have read and agree with the contributing guidelines
• AI usage disclosure: YES, code analysis, DRY-ing code, re-generating improved markup etc.

[Copilot]

Pull request overview

This PR performs a broad refactor and re-organization of the SvelteKit WebUI, focusing on component restructuring, Storybook cleanup, and expanded hook/component coverage. It introduces new navigation and attachment-preview flows, consolidates settings UI into tabbed sections, and refactors markdown rendering with new remark/rehype plugins.

Changes:

• Refactors sidebar/navigation and settings UI structure (new SidebarNavigation, settings tabs, routing cleanup).
• Reworks attachments preview/selection UX (unified preview dialog + new attachments list/preview components).
• Reorganizes markdown rendering (plugins moved under MarkdownContent/plugins/* and new security/RTL/attachment-image behaviors).

Reviewed changes

Copilot reviewed 141 out of 167 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
tools/server/webui/tsconfig.json	Adds explicit include globs for TS/Svelte/Storybook/tests.
tools/server/webui/tests/stories/SidebarNavigation.stories.svelte	Updates Storybook story to new SidebarNavigation component.
tools/server/webui/tests/stories/ChatMessage.stories.svelte	Updates import path for refactored ChatMessage component location.
tools/server/webui/src/routes/settings/import-export/+page.svelte	Removes standalone import/export settings route page.
tools/server/webui/src/routes/+layout.svelte	Swaps ChatSidebar for SidebarNavigation; adds conversation navigation shortcuts + API key recheck helper.
tools/server/webui/src/lib/utils/viewport.ts	Adds viewport helper for fade-in-view optimization.
tools/server/webui/src/lib/utils/index.ts	Re-exports MCP attachment predicates from attachment-display utilities.
tools/server/webui/src/lib/utils/convert-files-to-extra.ts	Adds optional size metadata to produced attachment extras.
tools/server/webui/src/lib/utils/attachment-display.ts	Refactors MCP prompt/resource detection to predicates over display items; adds attachment size passthrough.
tools/server/webui/src/lib/types/index.ts	Removes ChatAttachmentPreviewItem export.
tools/server/webui/src/lib/types/database.d.ts	Adds optional size to database attachment extra types.
tools/server/webui/src/lib/types/chat.d.ts	Removes MCP boolean flags from display items; removes ChatAttachmentPreviewItem type.
tools/server/webui/src/lib/services/parameter-sync.service.ts	Updates doc comment to new indicator component naming.
tools/server/webui/src/lib/services/index.ts	Updates docs to new indicator component naming.
tools/server/webui/src/lib/hooks/use-tools-panel.svelte.ts	Updates docs to renamed add/tools UI components.
tools/server/webui/src/lib/hooks/use-message-edit-context.svelte.ts	Adds message-role defaults and disables assistant-branch options in this hook.
tools/server/webui/src/lib/hooks/use-keyboard-shortcuts.svelte.ts	Adds prev/next conversation shortcuts; expands key handling.
tools/server/webui/src/lib/hooks/use-draft-messages.svelte.ts	Removes early returns to allow draft behavior for “new chat” key.
tools/server/webui/src/lib/hooks/use-attachment-menu.svelte.ts	Updates docs to renamed add menu components.
tools/server/webui/src/lib/enums/keyboard.ts	Adds arrow keys + o key constant.
tools/server/webui/src/lib/enums/index.ts	Re-exports new PdfViewMode.
tools/server/webui/src/lib/enums/chat.ts	Adds PdfViewMode enum.
tools/server/webui/src/lib/contexts/message-edit.context.ts	Expands edit context for assistant branching + role metadata.
tools/server/webui/src/lib/constants/ui.ts	Removes Import/Export icon-strip entry.
tools/server/webui/src/lib/constants/settings-sections.ts	Adds Import/Export as a settings section/tab with icon.
tools/server/webui/src/lib/constants/attachment-menu.ts	Updates attachment tooltip text.
tools/server/webui/src/lib/components/ui/button/button.svelte	Adjusts styling variants (shadow + dark secondary tweaks).
tools/server/webui/src/lib/components/app/settings/index.ts	Updates exports/paths; renames import/export panel to chat tab; adds new settings subcomponents exports.
tools/server/webui/src/lib/components/app/settings/SettingsChat/SettingsChatToolsTab.svelte	New tools tab UI for grouped tool enablement + permissions.
tools/server/webui/src/lib/components/app/settings/SettingsChat/SettingsChatParameterSourceIndicator.svelte	Minor markup tweak (spacing).
tools/server/webui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte	Refactors import/export tab header/icon handling.
tools/server/webui/src/lib/components/app/settings/SettingsChat/SettingsChatFooter.svelte	New shared footer with reset confirmation and save handling.
tools/server/webui/src/lib/components/app/settings/SettingsChat/SettingsChatFields.svelte	Updates to local indicator component import + usage.
tools/server/webui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte	Wires tools/import-export tabs and new footer/fields components.
tools/server/webui/src/lib/components/app/navigation/index.ts	Adds exports/docs for new SidebarNavigation component set.
tools/server/webui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationSearch.svelte	New search wrapper component for sidebar filtering.
tools/server/webui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte	Renames icon snippet param to IconComponent.
tools/server/webui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte	Replaces old chat sidebar bits with new sidebar navigation structure.
tools/server/webui/src/lib/components/app/navigation/DesktopIconStrip.svelte	Updates ActionIcon import path.
tools/server/webui/src/lib/components/app/models/ModelsSelectorSheet.svelte	Removes cn usage; refactors classes and styling.
tools/server/webui/src/lib/components/app/models/ModelsSelectorOption.svelte	Removes cn; improves propagation handling via ActionIcon option.
tools/server/webui/src/lib/components/app/models/ModelsSelectorDropdown.svelte	Removes cn; refactors classes and keyboard event naming.
tools/server/webui/src/lib/components/app/models/ModelId.svelte	Changes alias display behavior; always shows org prefix when present.
tools/server/webui/src/lib/components/app/misc/index.ts	Exports new CodeBlockActions component.
tools/server/webui/src/lib/components/app/misc/HorizontalScrollCarousel.svelte	Updates button background styling.
tools/server/webui/src/lib/components/app/misc/ConversationSelection.svelte	Renames event variable to event.
tools/server/webui/src/lib/components/app/misc/CodeBlockActions.svelte	New code-block actions bar (copy + optional preview).
tools/server/webui/src/lib/components/app/mcp/index.ts	Renames resource browser export to McpResourcesBrowser.
tools/server/webui/src/lib/components/app/mcp/McpServerForm.svelte	Replaces class directives with array-based class expression.
tools/server/webui/src/lib/components/app/mcp/McpResourcesBrowser/mcp-resources-browser.ts	New tree builder/sorter utilities for MCP resources.
tools/server/webui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserServerItem.svelte	Switches to new resources-browser helpers and removes cn usage.
tools/server/webui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserHeader.svelte	New header (search + refresh) for resources browser.
tools/server/webui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserEmptyState.svelte	New empty/loading state component.
tools/server/webui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowser.svelte	Renames components; removes cn; adds search/filter wiring.
tools/server/webui/src/lib/components/app/mcp/McpResourcePreview.svelte	Removes cn usage.
tools/server/webui/src/lib/components/app/mcp/McpConnectionLogs.svelte	Removes cn; renames icon const to IconComponent.
tools/server/webui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte	Renames click prop to onclick; removes cn.
tools/server/webui/src/lib/components/app/dialogs/index.ts	Renames/introduces dialogs; unifies attachments preview dialog; adds file upload error dialog; renames MCP resources dialog export.
tools/server/webui/src/lib/components/app/dialogs/DialogModelInformation.svelte	Updates modality badge component name.
tools/server/webui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte	Updates to McpResourcesBrowser component name.
tools/server/webui/src/lib/components/app/dialogs/DialogMcpResourcePreview.svelte	Minor spacing adjustments.
tools/server/webui/src/lib/components/app/dialogs/DialogFileUploadError.svelte	New alert dialog for upload compatibility failures.
tools/server/webui/src/lib/components/app/dialogs/DialogConversationSelection.svelte	Minor spacing adjustment.
tools/server/webui/src/lib/components/app/dialogs/DialogConfirmation.svelte	Minor spacing adjustments and icon const rename.
tools/server/webui/src/lib/components/app/dialogs/DialogCodePreview.svelte	Minor spacing adjustments.
tools/server/webui/src/lib/components/app/dialogs/DialogChatError.svelte	Minor spacing adjustments.
tools/server/webui/src/lib/components/app/dialogs/DialogChatAttachmentsViewAll.svelte	Removes old “view all attachments” dialog.
tools/server/webui/src/lib/components/app/dialogs/DialogChatAttachmentsPreview.svelte	New unified attachment preview dialog with keyboard navigation dispatch.
tools/server/webui/src/lib/components/app/dialogs/DialogChatAttachmentPreview.svelte	Removes old single-item attachment preview dialog.
tools/server/webui/src/lib/components/app/content/index.ts	Updates MarkdownContent export path.
tools/server/webui/src/lib/components/app/content/MarkdownContent/plugins/remark/literal-html.ts	New remark plugin to convert raw HTML to literal text (escape execution).
tools/server/webui/src/lib/components/app/content/MarkdownContent/plugins/rehype/resolve-attachment-images.ts	New rehype plugin to resolve <img src="attachment-name"> to base64 URLs.
tools/server/webui/src/lib/components/app/content/MarkdownContent/plugins/rehype/rehype-rtl-support.ts	New rehype plugin adding dir="auto" for RTL/LTR mixed content.
tools/server/webui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-links.ts	New rehype plugin to add target/rel security attrs to links.
tools/server/webui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-code-blocks.ts	Refactors code-block header button generation helpers.
tools/server/webui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte	Moves markdown plugins local; swaps ActionIconsCodeBlock to CodeBlockActions.
tools/server/webui/src/lib/components/app/content/CollapsibleContentBlock.svelte	Renames icon prop to IconComponent; minor spacing.
tools/server/webui/src/lib/components/app/chat/ChatSidebar/handle-mobile-sidebar-item-click.ts	Removes old helper from ChatSidebar package.
tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte	Replaces class directive with array-based class expression.
tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte	Removes helper text; reorders handlers; keeps draft + submit logic.
tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte	Introduces DialogFileUploadError component and tidies imports/context setup.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte	Consolidates imports; minor state formatting.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatisticsBadge.svelte	Renames icon prop to IconComponent.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte	Swaps to ChatMessageStatisticsBadge import/usage.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageEditForm.svelte	Unifies edit form for user/assistant; adds assistant branch-after-edit UI and wiring.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageBranchingControls.svelte	Removes old branching controls component.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte	Renames permission/continue card components.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIconsBranchingControls.svelte	New action-icon style branching controls component.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIcons.svelte	Switches branching controls to new component.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardPermissionRequest.svelte	Fixes imports to use exported ChatMessageActionCard component.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardContinueRequest.svelte	New “continue?” action card for agentic turn limit.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCard.svelte	Renames icon prop to IconComponent.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserPending.svelte	Consolidates imports via app barrel exports.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserBubble.svelte	New bubble component extracting user message rendering logic.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUser.svelte	Switches to ChatMessageActionIcons and new bubble component.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte	Switches actions component to ChatMessageActionIcons; import tidy.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPrompt.svelte	Switches actions component to ChatMessageActionIcons.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte	Replaces bespoke assistant edit UI with shared ChatMessageEditForm; cleans imports.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte	Adds raw assistant edit content derivation; expands edit context fields; updates navigation behaviors.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormTextarea.svelte	Replaces class directive with array-based class expression.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickers.svelte	New wrapper coordinating prompt/resource pickers + keyboard delegation.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpResources.svelte	Logging tag rename; event prop casing consistency.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentInput.svelte	New argument input component with autocomplete UI.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentForm.svelte	New argument form component for prompt parameter collection.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte	Updates logs and event prop casing; reorders Badge import.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerPopover.svelte	Renames event var in onOpenAutoFocus handler.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItemSkeleton.svelte	New skeleton list item component.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItem.svelte	Renames click callback prop to onclick.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerList.svelte	Refactors conditional padding using array class expression.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerItemHeader.svelte	New shared header layout for picker items (favicon + label + text).
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormMcpResourcesList.svelte	Switches to renamed MCP resource list item component.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormHelperText.svelte	Removes helper text component.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormFileInputInvisible.svelte	Minor spacing adjustment.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte	Removes cn usage; refactors conditional error styling.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte	New component centralizing model selection and modality detection.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionMcpServersSubmenu.svelte	Removes old MCP servers submenu component.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionsAdd.svelte	New responsive add-menu wrapper (dropdown vs sheet).
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddToolsSubmenu.svelte	Minor markup spacing changes.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte	Refactors sheet trigger via snippet; replaces MCP/tools submenus with links.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte	Refactors trigger via snippet; swaps to new add submenus.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddButton.svelte	New reusable add button with tooltip.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsViewAll.svelte	Removes old attachments view-all component.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewThumbnailStrip.svelte	New thumbnail strip for multi-item preview navigation.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewNavButtons.svelte	New prev/next overlay buttons.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewFileInfo.svelte	New sticky file info header for preview dialog.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemUnavailable.svelte	New “preview unavailable” state component.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemText.svelte	New text preview component using SyntaxHighlightedCode.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemImage.svelte	New image preview component.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemAudio.svelte	New audio preview component.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItem.svelte	New dispatcher selecting appropriate preview renderer by file type.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailImage.svelte	Refactors thumbnail remove action to use ActionIcon; renames click prop casing.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpResource.svelte	Refactors remove action to ActionIcon; removes cn; updates click prop casing.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpPrompt.svelte	Refactors remove action to ActionIcon.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItem.svelte	New unified renderer for attachment display items (MCP prompt/resource/image/file/pdf).
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsList.svelte	New list component wiring preview dialog and MCP resource preview.
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentThumbnailFile.svelte	Removes old thumbnail file component.
tools/server/webui/src/lib/components/app/badges/index.ts	Removes BadgeChatStatistic export; renames BadgeModality export to BadgesModality.
tools/server/webui/src/lib/components/app/badges/BadgesModality.svelte	New modality badges component (vision/audio).
tools/server/webui/src/lib/components/app/badges/BadgeModality.svelte	Removes old modality badge implementation.
tools/server/webui/src/lib/components/app/badges/BadgeInfo.svelte	Removes cn; uses array class expression.
tools/server/webui/src/lib/components/app/actions/index.ts	Removes old code-block/remove action exports; clarifies copy component docs.
tools/server/webui/src/lib/components/app/actions/ActionIconsCodeBlock.svelte	Removes old code-block actions component.
tools/server/webui/src/lib/components/app/actions/ActionIconRemove.svelte	Removes old remove icon component.
tools/server/webui/src/lib/components/app/actions/ActionIconCopyToClipboard.svelte	Refactors to wrap ActionIcon; shifts props to export let.
tools/server/webui/src/lib/components/app/actions/ActionIcon.svelte	Adds stopPropagation option; renames ariaLabel handling; supports optional icon.
tools/server/webui/src/lib/components/app/SKILL.md	Adds local “app component” conventions document.
tools/server/webui/src/lib/actions/fade-in-view.svelte.ts	Uses new viewport helper for skip-if-visible logic.
tools/server/webui/src/app.d.ts	Removes ChatAttachmentPreviewItem from global types list.
tools/server/webui/package-lock.json	Bumps bits-ui to 2.18.0.
tools/server/webui/.storybook/preview.ts	Updates decorator import paths to new folder structure.
tools/server/webui/.storybook/decorators/TooltipProviderDecorator.svelte	Fixes relative import path after decorators folder move.
tools/server/webui/.storybook/decorators/ModeWatcherDecorator.svelte	Adds new decorator ensuring theme class is applied in Storybook.

Files not reviewed (1)

• tools/server/webui/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.