webui: Server tools

[allozaur]

Close #20677

Overview

Additional information

• Redesigned Macro UI/UX (Sidebar Navigation, moved dialog-based panels for Settings, MCP, Import/Export to full routes)
• New "Tools" tab in settings + Chat Actions subdropdown menu
• Built-in tools implementation along with Built-in/MCP/Custom JSON abstractions/categories for tools
• New permissiosn store and Tool usage approval UI/UX
• Components architecture refactor
• "Do you want to continue" Yes/No action when Agentic Turns limit is reached
• Queue / Steering features for Chat Messages
• Draft Messages per-convo

Requirements

• I have read and agree with the contributing guidelines
• AI usage disclosure: Yes, code generation, planning etc.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR introduces a redesigned WebUI “server tools” experience: new tools abstractions (built-in/MCP/custom), permissions/approvals, and a reworked settings + navigation architecture (new settings routes, sidebar behavior, agentic UX changes).

Changes:

• Added /tools client integration (proxy + ToolsService) and new tools types/enums/constants.
• Refactored settings into route-based pages/layouts (chat sections, MCP servers, import/export) and added new UI hooks/components (keyboard shortcuts, tools panel, icon strip).
• Improved chat flow UX: pending/queued messages, steering messages for agentic runs, and new action cards for permission/continue prompts.

Reviewed changes

Copilot reviewed 129 out of 137 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tools/server/webui/vite.config.ts	Proxies /tools to backend for local dev.
tools/server/webui/tests/unit/agentic-sections.test.ts	Updates unit test for new deriveAgenticSections signature/behavior.
tools/server/webui/tests/stories/ChatSidebar.stories.svelte	Wraps sidebar stories in Sidebar.Provider (new sidebar context behavior).
tools/server/webui/tests/stories/ChatSettings.stories.svelte	Removes ChatSettings story (settings moved to full routes).
tools/server/webui/tests/client/components/TestWrapper.svelte	Adjusts page route import for new (chat) layout grouping.
tools/server/webui/src/routes/settings/mcp/+page.svelte	Adds settings MCP route page wrapper.
tools/server/webui/src/routes/settings/import-export/+page.svelte	Adds settings import/export route page wrapper.
tools/server/webui/src/routes/settings/chat/[section]/+page.svelte	Adds chat settings section route page with param-based initial section.
tools/server/webui/src/routes/settings/+layout.svelte	Adds settings layout with mobile close behavior.
tools/server/webui/src/routes/chat/[id]/+page.svelte	Removes ChatScreen from per-chat page (moved to (chat) layout).
tools/server/webui/src/routes/+page.svelte	Removes ChatScreen from root page and uses APP_NAME for <title>.
tools/server/webui/src/routes/+layout.svelte	Major app layout refactor: sidebar trigger behavior, keyboard shortcuts hook, new desktop icon strip, settings nav hook integration.
tools/server/webui/src/routes/(chat)/+layout.svelte	New (chat) layout that renders ChatScreen for both home + chat routes.
tools/server/webui/src/lib/utils/index.ts	Re-exports new CSS utility.
tools/server/webui/src/lib/utils/css.ts	Adds remToPx helper used by resizable sidebar.
tools/server/webui/src/lib/utils/agentic.ts	Adjusts tool-call pending display based on streaming state.
tools/server/webui/src/lib/types/tools.d.ts	Introduces shared tools grouping types.
tools/server/webui/src/lib/types/mcp.d.ts	Adds server built-in tool info type and ToolSource import.
tools/server/webui/src/lib/types/index.ts	Re-exports new types (tools + steering message + builtin tool info).
tools/server/webui/src/lib/types/agentic.d.ts	Adds permission request state + steering message type.
tools/server/webui/src/lib/stores/settings.svelte.ts	Improves cleanup of config keys when server defaults match and keys aren’t webui settings.
tools/server/webui/src/lib/stores/settings-referrer.svelte.ts	Adds a tiny store to track “return to” URL for settings navigation.
tools/server/webui/src/lib/stores/permissions.svelte.ts	Adds localStorage-backed permissions store for “always allow tool” decisions.
tools/server/webui/src/lib/stores/draft-messages.svelte.ts	Adds in-memory draft messages store keyed by conversation id.
tools/server/webui/src/lib/stores/conversations.svelte.ts	Refactors download filename logic and replaces file-input string literals with enums.
tools/server/webui/src/lib/stores/chat.svelte.ts	Adds queued pending messages + steering message re-send logic and exposes new selectors/actions.
tools/server/webui/src/lib/services/tools.service.ts	Adds API integration for listing/executing built-in tools.
tools/server/webui/src/lib/services/parameter-sync.service.ts	Removes autoShowSidebarOnNewChat from sync list.
tools/server/webui/src/lib/services/chat.service.ts	Safer stream parsing by extracting choice first.
tools/server/webui/src/lib/hooks/use-tools-panel.svelte.ts	Adds shared tools panel UI logic (grouping/collapse/favicons/enabled counts).
tools/server/webui/src/lib/hooks/use-settings-navigation.svelte.ts	Adds settings-navigation state + referrer tracking.
tools/server/webui/src/lib/hooks/use-scroll-carousel.svelte.ts	Adds carousel/scroll helper for mobile settings header.
tools/server/webui/src/lib/hooks/use-models-selector.svelte.ts	Adds shared model-selection logic for dropdown + sheet.
tools/server/webui/src/lib/hooks/use-message-edit-context.svelte.ts	Adds reusable message edit context setup (shared edit/save/cancel).
tools/server/webui/src/lib/hooks/use-keyboard-shortcuts.svelte.ts	Centralizes global keyboard shortcuts logic.
tools/server/webui/src/lib/hooks/use-draft-messages.svelte.ts	Adds save/restore logic for per-conversation draft messages.
tools/server/webui/src/lib/hooks/use-attachment-menu.svelte.ts	Adds shared logic for attachment menus (enabled/visible + callbacks).
tools/server/webui/src/lib/enums/ui.ts	Adds TooltipSide + HtmlInputType enums.
tools/server/webui/src/lib/enums/tools.ts	Adds ToolSource/permission/response field enums.
tools/server/webui/src/lib/enums/index.ts	Re-exports new/expanded enums (attachment menu, tools, ui, selection mode).
tools/server/webui/src/lib/enums/chat.ts	Adds ConversationSelectionMode enum.
tools/server/webui/src/lib/enums/attachment.ts	Adds attachment menu enums (IDs, enabled/visible conditions, actions).
tools/server/webui/src/lib/contexts/processing-info.context.ts	Adds processing info context used to control UI positioning/visibility.
tools/server/webui/src/lib/contexts/index.ts	Switches chat-settings dialog context to config context + adds processing context exports.
tools/server/webui/src/lib/contexts/chat-settings-dialog.context.ts	Removes old settings-dialog context (settings now route-based).
tools/server/webui/src/lib/contexts/chat-settings-config.context.ts	Adds settings config context to share local settings state + handlers.
tools/server/webui/src/lib/constants/ui.ts	Adds APP_NAME and desktop sidebar icon-strip item definitions.
tools/server/webui/src/lib/constants/tools.ts	Adds tool group/server labels for UI.
tools/server/webui/src/lib/constants/settings-sections.ts	Adds Agentic + Tools sections and builds new route-based chat sections config.
tools/server/webui/src/lib/constants/settings-keys.ts	Removes autoShowSidebarOnNewChat key.
tools/server/webui/src/lib/constants/settings-config.ts	Changes default showThoughtInProgress to true.
tools/server/webui/src/lib/constants/mcp.ts	Increases max displayed MCP avatars count.
tools/server/webui/src/lib/constants/localstorage-keys.ts	Adds tool-related localStorage keys and reorders exports.
tools/server/webui/src/lib/constants/index.ts	Exports new attachment-menu + tools constants modules.
tools/server/webui/src/lib/constants/context-keys.ts	Renames/remaps context keys and adds processing info key.
tools/server/webui/src/lib/constants/chat-form.ts	Adds NEW_CHAT_DRAFT_KEY.
tools/server/webui/src/lib/constants/attachment-menu.ts	Centralizes attachment menu item definitions and tooltip text.
tools/server/webui/src/lib/constants/api-endpoints.ts	Adds API_TOOLS endpoints.
tools/server/webui/src/lib/constants/agentic.ts	Removes TURN_LIMIT_MESSAGE constant (replaced by UI card).
tools/server/webui/src/lib/components/ui/tooltip/tooltip-trigger.svelte	Adds cursor styling to tooltip triggers.
tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte	Major sidebar refactor including floating variant behavior + desktop resizing handle.
tools/server/webui/src/lib/components/ui/sidebar/sidebar-trigger.svelte	Updates trigger styles and icon based on open state.
tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte	Adds CSS variables for min/max width and uses reactive sidebar width.
tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-button.svelte	Adjusts padding for menu button base styles.
tools/server/webui/src/lib/components/ui/sidebar/sidebar-footer.svelte	Adjusts footer padding.
tools/server/webui/src/lib/components/ui/sidebar/context.svelte.ts	Adds sidebarWidth + isResizing; simplifies toggle behavior.
tools/server/webui/src/lib/components/ui/sidebar/constants.ts	Splits width into min/max constants.
tools/server/webui/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte	Improves sub-menu styling and adds max-height scrolling.
tools/server/webui/src/lib/components/ui/button/button.svelte	Tweaks destructive/outline button styling classes.
tools/server/webui/src/lib/components/ui/button-group/index.ts	Adds button-group UI export surface.
tools/server/webui/src/lib/components/ui/button-group/button-group-separator.svelte	Adds separator component for grouped buttons.
tools/server/webui/src/lib/components/ui/button-group/button-group-root.svelte	Adds root wrapper for button group styling.
tools/server/webui/src/lib/components/app/settings/index.ts	Adds route-based settings component exports.
tools/server/webui/src/lib/components/app/settings/SettingsMcpServers.svelte	New full-page MCP servers UI replacing dialog/tab-based settings.
tools/server/webui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte	New mobile “carousel” header for settings sections.
tools/server/webui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte	New desktop settings sidebar navigation component.
tools/server/webui/src/lib/components/app/settings/SettingsChat.svelte	New full settings page managing local config + save/reset behavior + tools tab.
tools/server/webui/src/lib/components/app/navigation/index.ts	Exports new DesktopIconStrip component.
tools/server/webui/src/lib/components/app/navigation/DesktopIconStrip.svelte	Adds collapsed-sidebar icon strip with shortcuts and tooltips.
tools/server/webui/src/lib/components/app/models/index.ts	Renames ModelsSelector export to ModelsSelectorDropdown and updates docs.
tools/server/webui/src/lib/components/app/models/ModelsSelectorSheet.svelte	Refactors to use shared useModelsSelector hook.
tools/server/webui/src/lib/components/app/models/ModelsSelectorOption.svelte	Renames prop showOrgName to hideOrgName.
tools/server/webui/src/lib/components/app/models/ModelsSelectorList.svelte	Updates snippet args to match hideOrgName semantics.
tools/server/webui/src/lib/components/app/models/ModelId.svelte	Adds hideOrgName and hideQuantization options.
tools/server/webui/src/lib/components/app/misc/ConversationSelection.svelte	Replaces custom search input with shared SearchInput component.
tools/server/webui/src/lib/components/app/mcp/index.ts	Repoints McpServersSettings export to new settings page and removes selector export.
tools/server/webui/src/lib/components/app/mcp/McpServersSettings.svelte	Removes old MCP servers settings component.
tools/server/webui/src/lib/components/app/mcp/McpServersSelector.svelte	Removes old MCP servers selector dropdown.
tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte	Adjusts header spacing slightly.
tools/server/webui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte	Adds tooltip + clickable behavior and fallback icon when none enabled.
tools/server/webui/src/lib/components/app/index.ts	Exports new settings module from app barrel.
tools/server/webui/src/lib/components/app/forms/SearchInput.svelte	Adds isCancelAlwaysVisible and improves clear button affordance.
tools/server/webui/src/lib/components/app/dialogs/index.ts	Replaces chat settings dialog export with MCP add-server dialog export.
tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte	Removes old MCP settings dialog wrapper.
tools/server/webui/src/lib/components/app/dialogs/DialogMcpServerAddNew.svelte	Adds dialog to add MCP server.
tools/server/webui/src/lib/components/app/dialogs/DialogChatSettings.svelte	Removes old chat settings dialog wrapper.
tools/server/webui/src/lib/components/app/chat/index.ts	Updates exports/import paths; adds new chat action cards + tools submenu; removes old settings components.
tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarConversationItem.svelte	Removes mobile click handler from conversation title span.
tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarActions.svelte	Refactors sidebar actions to use shared items + SearchInput and adds activateSearch API.
tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte	Refactors sidebar header/layout; adds close button; improves search UX and integration.
tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsToolsTab.svelte	Adds tools settings tab UI.
tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte	Refactors import/export tab UI + uses enums and shared section rendering.
tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFooter.svelte	Makes footer sticky-ish and adjusts layout.
tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte	Adjusts field width constraints for improved layout.
tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenProcessingInfo.svelte	Switches visibility decision to processing-info context.
tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenHeader.svelte	Removes old fixed header (replaced by new nav patterns).
tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte	Integrates draft saving/restoration and tweaks submit gating.
tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte	Major chat screen layout changes: welcome screen merged, processing context provided, keyboard shortcuts via hook.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte	Adds pending user message UI (queued/steering) and simplifies message rendering structure.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUserPending.svelte	Adds new pending-message bubble with actions (edit/delete/send immediately).
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUserBubble.svelte	Extracts reusable user bubble rendering (attachments + markdown/text).
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte	Uses ChatMessageUserBubble instead of duplicating bubble logic.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessagePermissionRequest.svelte	Adds permission request action card for tool approvals.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageContinueRequest.svelte	Adds “continue?” action card when agentic turn limit is reached.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte	Adds permission/continue request rendering and improves tool-call result UX.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActionCard.svelte	Adds reusable action-card shell for decision prompts.
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte	Wraps each message with fadeInView instead of per-list wrapper.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte	Updates model selector usage, removes MCP selector, updates settings navigation, and adjusts stop/send gating.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionToolsSubmenu.svelte	Adds tools submenu in chat form dropdown.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte	Removes isLoading prop and simplifies disabled logic.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAttachmentsSheet.svelte	Removes old mobile attachments sheet implementation (moved/refactored).
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAttachmentsDropdown.svelte	Refactors attachment dropdown to use centralized menu config + hooks and adds tools submenu.
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte	Allows submitting while streaming (pending message behavior) by removing isLoading gate.
tools/server/webui/src/lib/components/app/actions/ActionIcon.svelte	Adds typed button props and configurable tooltip side; modifies hover styles.
tools/server/webui/src/app.css	Minor sidebar CSS variable tweaks for background shades.

Files not reviewed (1)

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

Comments suppressed due to low confidence (5)

tools/server/webui/src/lib/components/app/navigation/DesktopIconStrip.svelte:1

• showIcons is created via $derived(...) but is later mutated (showIcons = false and showIcons = !sidebarOpen). Derived values should be immutable; this should be a $state value (and updated via an effect when sidebarOpen changes) or computed purely from sidebarOpen without assignments.
  tools/server/webui/src/lib/stores/permissions.svelte.ts:1
• This store touches localStorage during construction. In SvelteKit SSR (or any non-browser environment), localStorage is undefined and will throw before the try block can help if evaluation happens in a non-browser context. Guard construction with $app/environment’s browser (or typeof localStorage !== 'undefined') and no-op on the server.
  tools/server/webui/src/lib/hooks/use-draft-messages.svelte.ts:1
• The hook returns early when chatId is falsy, which prevents drafts from being saved/restored for “new chat” (where page.params.id is typically undefined). Since the store already supports an explicit NEW_CHAT_DRAFT_KEY fallback, the hook should allow undefined chat IDs and pass them through so drafts work on the new-chat screen too.
  tools/server/webui/src/lib/hooks/use-draft-messages.svelte.ts:1
• The hook returns early when chatId is falsy, which prevents drafts from being saved/restored for “new chat” (where page.params.id is typically undefined). Since the store already supports an explicit NEW_CHAT_DRAFT_KEY fallback, the hook should allow undefined chat IDs and pass them through so drafts work on the new-chat screen too.
  tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte:1
• Resize listeners are only removed on pointerup. If the pointer is canceled (e.g., OS gesture, window blur, pointercancel), listeners may remain attached and sidebar.isResizing may stay true. Add handling for pointercancel (and optionally lostpointercapture) to ensure cleanup always happens.

---

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

[sebagallo]

awesome work, no comparison at all compared to the previous impl.!
Some notes:

• It would be nice to be able to view the tools' descriptions (I know they take real estate on the screen, but it would be nice to know which params a tool is using and the description of course, bonus would be the ability to override the description, but I understand it might be out of scope)
• A toggle for enable/disable all, always allow all (per mcp server). It gets really tiring having to click through some of the mcp servers with for example 40 tools, of which I might need only 3, or if I inversely would like to always allow all the tools of that specific server.
• And last, the always allow wording during a chat only enables the tools for the current chat (good), but the way it's worded it makes it look like tools will be enabled globally (for future chats also)

[allozaur]

awesome work, no comparison at all compared to the previous impl.! Some notes:

* It would be nice to be able to view the tools' descriptions (I know they take real estate on the screen, but it would be nice to know which params a tool is using and the description of course, bonus would be the ability to override the description, but I understand it might be out of scope)

* A toggle for enable/disable all, always allow all (per mcp server). It gets really tiring having to click through some of the mcp servers with for example 40 tools, of which I might need only 3, or if I inversely would like to always allow all the tools of that specific server.

* And last, the always allow wording during a chat only enables the tools for the current chat (good), but the way it's worded it makes it look like tools will be enabled globally (for future chats also)

thanks for the kind feedback, i think we can cover most of it still in this PR. anything else would be addressed in the follow up PR(s)

[Copilot]

Pull request overview

Copilot reviewed 130 out of 138 changed files in this pull request and generated no new comments.

Files not reviewed (1)

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

Comments suppressed due to low confidence (4)

tools/server/webui/src/lib/stores/permissions.svelte.ts:1

• This store reads from localStorage during module initialization/constructor. In a SvelteKit SSR context, localStorage is not defined and will throw at import time. Please guard all localStorage access behind a browser check (e.g., $app/environment browser, or typeof localStorage !== 'undefined') and/or defer initialization to a client-only code path.
  tools/server/webui/src/lib/components/app/navigation/DesktopIconStrip.svelte:1
• showIcons is declared with $derived(...) but then immediately assigned to (showIcons = false) and later mutated in onMount(). In Svelte 5 runes, $derived values are not meant to be assigned/mutated and this is likely to be a compile-time error or break reactivity. Use $state(false) for showIcons and update it in an $effect reacting to sidebarOpen, or keep it purely derived and remove manual assignments.
  tools/server/webui/src/lib/components/ui/tooltip/tooltip-trigger.svelte:1
• Because {...restProps} is spread after the class attribute, any consumer-provided class in restProps may override cursor-pointer entirely (Svelte resolves duplicate attributes by last-one-wins semantics). To ensure cursor-pointer is always applied while still supporting custom classes, merge classes explicitly (e.g., using the project’s cn() helper) rather than relying on separate class + spread.
  tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte:1
• The resize logic captures the pointer but never releases it, and it doesn’t handle pointercancel / lostpointercapture. This can leave sidebar.isResizing stuck if the interaction is interrupted. Consider calling target.releasePointerCapture(e.pointerId) on pointer up, and register cleanup for pointercancel/lostpointercapture to reliably remove listeners and reset isResizing.

---

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

[ngxson]

Nice work!

[Jikilan]

unable to GET from /tools. has anyone facing the same issue?

https://github.com/ggml-org/llama.cpp/issues/22510

[Green-Sky]

#22510
Looks like the webui throws errors when tools are disabled (default).