llama.cpp/tools/ui/src/lib/components/app/mcp/index.ts

/**
 *
 * MCP (Model Context Protocol)
 *
 * Components for managing MCP server connections and displaying server status.
 * MCP enables agentic workflows by connecting to external tool servers.
 *
 * The MCP system integrates with:
 * - `mcpStore` for server CRUD operations and health checks
 * - `conversationsStore` for per-conversation server enable/disable
 *
 */

/**
 * **McpServersSettings** - MCP servers configuration section
 *
 * Settings section for configuring MCP server connections.
 * Displays server cards with status, tools, and management actions.
 * Used within the MCP tab of ChatSettings.
 *
 * **Architecture:**
 * - Manages add server form state locally
 * - Delegates server display to McpServerCard components
 * - Integrates with mcpStore for server operations
 * - Shows skeleton loading states during health checks
 *
 * **Features:**
 * - Add new MCP servers by URL with validation
 * - Server cards with connection status indicators
 * - Health check status (connected/disconnected/error)
 * - Tools list per server showing available capabilities
 * - Enable/disable toggle per conversation
 * - Edit/delete server actions
 * - Skeleton loading states during connection
 * - Empty state with helpful message
 *
 * @example
 * ```svelte
 * <McpServersSettings />
 * ```
 */
export { default as McpServersSettings } from '../settings/SettingsMcpServers.svelte';

/**
 * **McpActiveServersAvatars** - Active MCP servers indicator
 *
 * Compact avatar row showing favicons of active MCP servers.
 * Displays up to 3 server icons with "+N" counter for additional servers.
 * Clickable to open MCP settings dialog.
 *
 * **Architecture:**
 * - Filters servers by enabled status and health check
 * - Fetches favicons from server URLs
 * - Integrates with conversationsStore for per-chat server state
 *
 * **Features:**
 * - Overlapping favicon avatars (max 3 visible)
 * - "+N" counter for additional servers
 * - Click handler for settings navigation
 * - Disabled state support
 * - Only shows healthy, enabled servers
 *
 * @example
 * ```svelte
 * <McpActiveServersAvatars
 *   onSettingsClick={() => showMcpSettings = true}
 * />
 * ```
 */
export { default as McpActiveServersAvatars } from './McpActiveServersAvatars.svelte';

/**
 * **McpCapabilitiesBadges** - Server capabilities display
 *
 * Displays MCP server capabilities as colored badges.
 * Shows which features the server supports (tools, resources, prompts, etc.).
 *
 * **Features:**
 * - Tools badge (green) - server provides callable tools
 * - Resources badge (blue) - server provides data resources
 * - Prompts badge (purple) - server provides prompt templates
 * - Logging badge (orange) - server supports logging
 * - Completions badge (cyan) - server provides completions
 * - Tasks badge (pink) - server supports task management
 */
export { default as McpCapabilitiesBadges } from './McpCapabilitiesBadges.svelte';

/**
 * **McpConnectionLogs** - Connection log viewer
 *
 * Collapsible panel showing MCP server connection logs.
 * Displays timestamped log entries with level-based styling.
 *
 * **Features:**
 * - Collapsible log list with entry count
 * - Connection time display in milliseconds
 * - Log level icons and color coding
 * - Scrollable log container with max height
 * - Monospace font for log readability
 */
export { default as McpConnectionLogs } from './McpConnectionLogs.svelte';

/**
 * **McpServerForm** - Server URL and headers input form
 *
 * Reusable form for entering MCP server connection details.
 * Used in both add new server and edit server flows.
 *
 * **Features:**
 * - URL input with validation error display
 * - Custom headers key-value pairs editor
 * - Controlled component with change callbacks
 *
 * @example
 * ```svelte
 * <McpServerForm
 *   url={serverUrl}
 *   headers={serverHeaders}
 *   onUrlChange={(v) => serverUrl = v}
 *   onHeadersChange={(v) => serverHeaders = v}
 *   urlError={validationError}
 * />
 * ```
 */
export { default as McpServerForm } from './McpServerForm.svelte';

/**
 * MCP protocol logo SVG component. Renders the official MCP icon
 * with customizable size via class and style props.
 */
export { default as McpLogo } from './McpLogo.svelte';

/**
 *
 * SERVER CARD
 *
 * Components for displaying individual MCP server status and controls.
 * McpServerCard is the main component, with sub-components for specific sections.
 *
 */

/**
 * **McpServerCard** - Individual server display card
 *
 * Main component for displaying a single MCP server with all its details.
 * Manages edit mode, delete confirmation, and health check actions.
 *
 * **Architecture:**
 * - Composes header, tools list, logs, and actions sub-components
 * - Manages local edit/delete state
 * - Reads health state from mcpStore
 * - Triggers health checks via mcpStore
 *
 * **Features:**
 * - Server header with favicon, name, version, and toggle
 * - Capabilities badges display
 * - Tools list with descriptions
 * - Connection logs viewer
 * - Edit form for URL and headers
 * - Delete confirmation dialog
 * - Skeleton loading states
 */
export { default as McpServerCard } from './McpServerCard/McpServerCard.svelte';

/** Server card header with favicon, name, version badge, and enable toggle. */
export { default as McpServerCardHeader } from './McpServerCard/McpServerCardHeader.svelte';

/** Action buttons row: edit, refresh, delete. */
export { default as McpServerCardActions } from './McpServerCard/McpServerCardActions.svelte';

/** Collapsible tools list showing available server tools with descriptions. */
export { default as McpServerCardToolsList } from './McpServerCard/McpServerCardToolsList.svelte';

/** Inline edit form for server URL and custom headers. */
export { default as McpServerCardEditForm } from './McpServerCard/McpServerCardEditForm.svelte';

/** Delete confirmation dialog with server name display. */
export { default as McpServerCardDeleteDialog } from './McpServerCard/McpServerCardDeleteDialog.svelte';

/** Skeleton loading state for server card during health checks. */
export { default as McpServerCardSkeleton } from './McpServerCardSkeleton.svelte';

/**
 * **McpServerIdentity** - Server identity display (icon, name, version)
 *
 * Reusable headless component for displaying server name, favicon/icon, and version badge.
 * Accepts all data via props with no store dependencies for predictable rendering.
 *
 * **Features:**
 * - Server favicon/icon with fallback
 * - Truncated display name with max-width
 * - Optional version badge (v1.2.3)
 * - Optional external link to server website
 *
 * @example
 * ```svelte
 * <McpServerIdentity displayName={name} faviconUrl={iconUrl} serverInfo={info} />
 * ```
 */
export { default as McpServerIdentity } from './McpServerIdentity.svelte';

/**
 * **McpServerInfo** - Server instructions display
 *
 * Collapsible panel showing server-provided instructions.
 * Displays guidance text from the MCP server for users.
 */
export { default as McpServerInfo } from './McpServerInfo.svelte';

/**
 * **McpResourcesBrowser** - MCP resources tree browser
 *
 * Tree view component showing resources grouped by server.
 * Supports resource selection and quick attach actions.
 *
 * **Features:**
 * - Collapsible server sections
 * - Resource icons based on MIME type
 * - Resource selection highlighting
 * - Quick attach button per resource
 * - Refresh all resources action
 * - Loading states per server
 */
export { default as McpResourcesBrowser } from './McpResourcesBrowser/McpResourcesBrowser.svelte';

/**
 * **McpResourcePreview** - MCP resource content preview
 *
 * Preview panel showing resource content with metadata.
 * Supports text and binary content display.
 *
 * **Features:**
 * - Text content display with monospace formatting
 * - Image preview for image MIME types
 * - Copy to clipboard action
 * - Download content action
 * - Resource metadata display (MIME type, priority, server)
 * - Loading and error states
 */
export { default as McpResourcePreview } from './McpResourcePreview.svelte';

/**
 * **McpResourceTemplateForm** - MCP resource template variable form
 *
 * Form for filling in resource template variables with auto-completion
 * via the Completions API. Shows live URI preview as variables are filled.
 *
 * **Features:**
 * - Template variable input fields
 * - Completions API integration for variable auto-complete
 * - Live URI preview as variables are filled
 * - Read resolved resource action
 */
export { default as McpResourceTemplateForm } from './McpResourceTemplateForm.svelte';