-
+ * ```
+ */
+export { default as MarkdownContent } from './MarkdownContent.svelte';
+
+/**
+ * **SyntaxHighlightedCode** - Code syntax highlighting
+ *
+ * Renders code with syntax highlighting using highlight.js.
+ * Supports theme switching and scrollable containers.
+ *
+ * **Features:**
+ * - Auto language detection with fallback
+ * - Dark/light theme auto-switching
+ * - Scrollable container with configurable max dimensions
+ * - Monospace font styling
+ * - Preserves whitespace and formatting
+ *
+ * @example
+ * ```svelte
+ *
+ * ```
+ */
+export { default as SyntaxHighlightedCode } from './SyntaxHighlightedCode.svelte';
+
+/**
+ * **CollapsibleContentBlock** - Expandable content card
+ *
+ * Reusable collapsible card with header, icon, and auto-scroll.
+ * Used for tool calls and reasoning blocks in chat messages.
+ *
+ * **Features:**
+ * - Collapsible content with smooth animation
+ * - Custom icon and title display
+ * - Optional subtitle/status text
+ * - Auto-scroll during streaming (pauses on user scroll)
+ * - Configurable max height with overflow scroll
+ *
+ * @example
+ * ```svelte
+ *
+ * {reasoningContent}
+ *
+ * ```
+ */
+export { default as CollapsibleContentBlock } from './CollapsibleContentBlock.svelte';
+
+/** Code block actions component (copy, preview). */
+export { default as CodeBlockActions } from './CodeBlockActions.svelte';
diff --git a/tools/server/webui/src/lib/components/app/misc/CodePreviewDialog.svelte b/tools/server/webui/src/lib/components/app/dialogs/DialogCodePreview.svelte
similarity index 100%
rename from tools/server/webui/src/lib/components/app/misc/CodePreviewDialog.svelte
rename to tools/server/webui/src/lib/components/app/dialogs/DialogCodePreview.svelte
diff --git a/tools/server/webui/src/lib/components/app/dialogs/index.ts b/tools/server/webui/src/lib/components/app/dialogs/index.ts
index 9516120406..c9b664326a 100644
--- a/tools/server/webui/src/lib/components/app/dialogs/index.ts
+++ b/tools/server/webui/src/lib/components/app/dialogs/index.ts
@@ -136,6 +136,44 @@ export { default as DialogConfirmation } from './DialogConfirmation.svelte';
*/
export { default as DialogConversationTitleUpdate } from './DialogConversationTitleUpdate.svelte';
+/**
+ *
+ * CONTENT PREVIEW DIALOGS
+ *
+ * Dialogs for previewing and displaying content in full-screen or modal views.
+ *
+ */
+
+/**
+ * **DialogCodePreview** - Full-screen code/HTML preview
+ *
+ * Full-screen dialog for previewing HTML or code in an isolated iframe.
+ * Used by MarkdownContent component for previewing rendered HTML blocks
+ * from code blocks in chat messages.
+ *
+ * **Architecture:**
+ * - Uses ShadCN Dialog with full viewport layout
+ * - Sandboxed iframe execution (allow-scripts only)
+ * - Clears content when closed for security
+ *
+ * **Features:**
+ * - Full viewport iframe preview
+ * - Sandboxed execution environment
+ * - Close button with mix-blend-difference for visibility over any content
+ * - Automatic content cleanup on close
+ * - Supports HTML preview with proper isolation
+ *
+ * @example
+ * ```svelte
+ *
+ * ```
+ */
+export { default as DialogCodePreview } from './DialogCodePreview.svelte';
+
/**
*
* ATTACHMENT DIALOGS
diff --git a/tools/server/webui/src/lib/components/app/misc/KeyValuePairs.svelte b/tools/server/webui/src/lib/components/app/forms/KeyValuePairs.svelte
similarity index 100%
rename from tools/server/webui/src/lib/components/app/misc/KeyValuePairs.svelte
rename to tools/server/webui/src/lib/components/app/forms/KeyValuePairs.svelte
diff --git a/tools/server/webui/src/lib/components/app/misc/SearchInput.svelte b/tools/server/webui/src/lib/components/app/forms/SearchInput.svelte
similarity index 100%
rename from tools/server/webui/src/lib/components/app/misc/SearchInput.svelte
rename to tools/server/webui/src/lib/components/app/forms/SearchInput.svelte
diff --git a/tools/server/webui/src/lib/components/app/forms/index.ts b/tools/server/webui/src/lib/components/app/forms/index.ts
new file mode 100644
index 0000000000..b0280a20a9
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/forms/index.ts
@@ -0,0 +1,30 @@
+/**
+ *
+ * FORMS & INPUTS
+ *
+ * Form-related utility components.
+ *
+ */
+
+/**
+ * **SearchInput** - Search field with clear button
+ *
+ * Input field optimized for search with clear button and keyboard handling.
+ * Supports placeholder, autofocus, and change callbacks.
+ */
+export { default as SearchInput } from './SearchInput.svelte';
+
+/**
+ * **KeyValuePairs** - Editable key-value list
+ *
+ * Dynamic list of key-value pairs with add/remove functionality.
+ * Used for HTTP headers, metadata, and configuration.
+ *
+ * **Features:**
+ * - Add new pairs with button
+ * - Remove individual pairs
+ * - Customizable placeholders and labels
+ * - Empty state message
+ * - Auto-resize value textarea
+ */
+export { default as KeyValuePairs } from './KeyValuePairs.svelte';
diff --git a/tools/server/webui/src/lib/components/app/index.ts b/tools/server/webui/src/lib/components/app/index.ts
index 589828daaa..56bd8a4852 100644
--- a/tools/server/webui/src/lib/components/app/index.ts
+++ b/tools/server/webui/src/lib/components/app/index.ts
@@ -1,6 +1,11 @@
+export * from './actions';
+export * from './badges';
export * from './chat';
+export * from './content';
export * from './dialogs';
+export * from './forms';
export * from './mcp';
export * from './misc';
export * from './models';
+export * from './navigation';
export * from './server';
diff --git a/tools/server/webui/src/lib/components/app/misc/index.ts b/tools/server/webui/src/lib/components/app/misc/index.ts
index 39572300cb..dc61b519bb 100644
--- a/tools/server/webui/src/lib/components/app/misc/index.ts
+++ b/tools/server/webui/src/lib/components/app/misc/index.ts
@@ -2,113 +2,10 @@
*
* MISC
*
- * Reusable utility components used across the application.
- * Includes content rendering, UI primitives, and helper components.
+ * Miscellaneous utility components.
*
*/
-/**
- *
- * CONTENT RENDERING
- *
- * Components for rendering rich content: markdown, code, and previews.
- *
- */
-
-/**
- * **MarkdownContent** - Rich markdown renderer
- *
- * Renders markdown content with syntax highlighting, LaTeX math,
- * tables, links, and code blocks. Optimized for streaming with
- * incremental block-based rendering.
- *
- * **Features:**
- * - GFM (GitHub Flavored Markdown): tables, task lists, strikethrough
- * - LaTeX math via KaTeX (`$inline$` and `$$block$$`)
- * - Syntax highlighting (highlight.js) with language detection
- * - Code copy buttons with click feedback
- * - External links open in new tab with security attrs
- * - Image attachment resolution from message extras
- * - Dark/light theme support (auto-switching)
- * - Streaming-optimized incremental rendering
- * - Code preview dialog for large blocks
- *
- * @example
- * ```svelte
- *
- * ```
- */
-export { default as MarkdownContent } from './MarkdownContent.svelte';
-
-/**
- * **SyntaxHighlightedCode** - Code syntax highlighting
- *
- * Renders code with syntax highlighting using highlight.js.
- * Supports theme switching and scrollable containers.
- *
- * **Features:**
- * - Auto language detection with fallback
- * - Dark/light theme auto-switching
- * - Scrollable container with configurable max dimensions
- * - Monospace font styling
- * - Preserves whitespace and formatting
- *
- * @example
- * ```svelte
- *
- * ```
- */
-export { default as SyntaxHighlightedCode } from './SyntaxHighlightedCode.svelte';
-
-/**
- * **CodePreviewDialog** - Full-screen code preview
- *
- * Full-screen dialog for previewing HTML/code in an isolated iframe.
- * Used by MarkdownContent for previewing rendered HTML blocks.
- *
- * **Features:**
- * - Full viewport iframe preview
- * - Sandboxed execution (allow-scripts only)
- * - Close button with mix-blend-difference for visibility
- * - Clears content when closed for security
- */
-export { default as CodePreviewDialog } from './CodePreviewDialog.svelte';
-
-/**
- *
- * COLLAPSIBLE & EXPANDABLE
- *
- * Components for showing/hiding content sections.
- *
- */
-
-/**
- * **CollapsibleContentBlock** - Expandable content card
- *
- * Reusable collapsible card with header, icon, and auto-scroll.
- * Used for tool calls and reasoning blocks in chat messages.
- *
- * **Features:**
- * - Collapsible content with smooth animation
- * - Custom icon and title display
- * - Optional subtitle/status text
- * - Auto-scroll during streaming (pauses on user scroll)
- * - Configurable max height with overflow scroll
- *
- * @example
- * ```svelte
- *
- * {reasoningContent}
- *
- * ```
- */
-export { default as CollapsibleContentBlock } from './CollapsibleContentBlock.svelte';
-
/**
* **TruncatedText** - Text with ellipsis and tooltip
*
@@ -117,135 +14,6 @@ export { default as CollapsibleContentBlock } from './CollapsibleContentBlock.sv
*/
export { default as TruncatedText } from './TruncatedText.svelte';
-/**
- *
- * DROPDOWNS & MENUS
- *
- * Components for dropdown menus and action selection.
- *
- */
-
-/**
- * **DropdownMenuSearchable** - Filterable dropdown menu
- *
- * Generic dropdown with search input for filtering options.
- * Uses Svelte snippets for flexible content rendering.
- *
- * **Features:**
- * - Search/filter input with clear on close
- * - Keyboard navigation support
- * - Custom trigger, content, and footer via snippets
- * - Empty state message
- * - Disabled state
- * - Configurable alignment and width
- *
- * @example
- * ```svelte
- *
- * {#snippet trigger()}{/snippet}
- * {#snippet children()}{#each items as item}