@thesage/mcp 0.6.0 → 0.8.1

package/dist/index.js

@@ -16,7 +16,7 @@ var COMPONENT_CATEGORIES = {
   forms: {
     label: "Forms",
     description: "Input controls for data collection",
-    count: 18
+    count: 19
   },
   navigation: {
     label: "Navigation",
@@ -26,17 +26,17 @@ var COMPONENT_CATEGORIES = {
   overlays: {
     label: "Overlays",
     description: "Contextual content that appears above the main UI",
-    count: 11
+    count: 12
   },
   feedback: {
     label: "Feedback",
     description: "Communicating system state and user action results",
-    count: 7
+    count: 9
   },
   "data-display": {
     label: "Data Display",
     description: "Presenting information in structured formats",
-    count: 16
+    count: 19
   },
   layout: {
     label: "Layout",
@@ -2168,6 +2168,170 @@ const toRef = useRef(null)
 export default function OGImage() {
   return <OpenGraphCard title="My Page" description="A great description" variant="primary" />
 }`
+  },
+  // ============================================================================
+  // PHASE 16 - MISSING COMPONENTS
+  // ============================================================================
+  "stat-card": {
+    name: "StatCard",
+    category: "data-display",
+    description: "Displays key metrics and statistics with label, value, trend indicator, and optional icon. Ideal for dashboards, analytics views, and KPI displays.",
+    keywords: ["stat", "metric", "kpi", "dashboard", "analytics", "number", "trend", "card"],
+    useCases: [
+      "Dashboard metric displays",
+      "KPI tracking panels",
+      "Analytics summary cards",
+      "Revenue/user count displays"
+    ],
+    dependencies: ["class-variance-authority"],
+    props: {
+      label: { type: "string", description: 'The metric label (e.g. "Revenue")', required: true },
+      value: { type: "string | number", description: 'The metric value (e.g. "$45,231")', required: true },
+      change: { type: "number", description: "Percentage change (e.g. 5.2 or -3.1)" },
+      trend: { type: "'up' | 'down' | 'flat'", description: "Direction of the trend" },
+      icon: { type: "ReactNode", description: "Optional icon displayed in the top-right" },
+      description: { type: "string", description: "Additional description text below the value" },
+      variant: { type: "'default' | 'outline' | 'glass'", default: "'default'", description: "Visual style variant" },
+      size: { type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Size variant" }
+    },
+    subComponents: ["StatCardGroup"],
+    example: `<StatCard label="Total Revenue" value="$45,231" change={12.5} trend="up" description="from last month" />`
+  },
+  "empty-state": {
+    name: "EmptyState",
+    category: "feedback",
+    description: "Placeholder for empty content areas with icon, title, description, and call-to-action. Use when no data is available or a search returns no results.",
+    keywords: ["empty", "placeholder", "no-data", "no-results", "blank", "zero-state"],
+    useCases: [
+      "Empty search results",
+      "Empty inbox/messages",
+      "No data available state",
+      "First-time user onboarding prompt"
+    ],
+    dependencies: ["class-variance-authority"],
+    props: {
+      icon: { type: "ReactNode", description: "Icon displayed above the title" },
+      title: { type: "string", description: "Primary message", required: true },
+      description: { type: "string", description: "Secondary explanation text" },
+      action: { type: "ReactNode", description: "Call-to-action element (e.g. Button)" },
+      size: { type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Size variant" }
+    },
+    example: `<EmptyState
+  icon={<Inbox />}
+  title="No messages yet"
+  description="When you receive messages, they will appear here."
+  action={<Button>Send a message</Button>}
+/>`
+  },
+  "timeline": {
+    name: "Timeline",
+    category: "data-display",
+    description: "Chronological event display with connecting lines, icons, and status indicators.",
+    keywords: ["timeline", "events", "history", "chronological", "activity", "log"],
+    useCases: ["Activity feeds", "Order tracking", "Project milestones", "Event history"],
+    dependencies: ["class-variance-authority"],
+    props: {
+      orientation: { type: "'vertical' | 'horizontal'", default: "'vertical'", description: "Layout orientation" }
+    },
+    subComponents: ["TimelineItem"],
+    example: `<Timeline>
+  <TimelineItem title="Order placed" timestamp="Jan 1" status="completed" />
+  <TimelineItem title="Shipped" status="active" />
+  <TimelineItem title="Delivered" status="pending" isLast />
+</Timeline>`
+  },
+  "stepper": {
+    name: "Stepper",
+    category: "feedback",
+    description: "Multi-step progress indicator for wizards and multi-step forms.",
+    keywords: ["stepper", "wizard", "steps", "progress", "multi-step", "workflow"],
+    useCases: ["Multi-step forms", "Checkout flows", "Onboarding wizards", "Setup processes"],
+    dependencies: ["class-variance-authority"],
+    props: {
+      currentStep: { type: "number", description: "Zero-based index of the current step", required: true },
+      orientation: { type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Layout orientation" },
+      size: { type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Size variant" },
+      clickable: { type: "boolean", default: "false", description: "Allow clicking steps to navigate" }
+    },
+    subComponents: ["StepperStep"],
+    example: `<Stepper currentStep={1}>
+  <StepperStep label="Account" />
+  <StepperStep label="Profile" />
+  <StepperStep label="Complete" />
+</Stepper>`
+  },
+  "file-upload": {
+    name: "FileUpload",
+    category: "forms",
+    description: "Drag-and-drop file upload zone with validation, file list, and remove functionality",
+    keywords: ["file", "upload", "drag", "drop", "dropzone", "attachment", "browse"],
+    useCases: ["Document uploads", "Image uploads", "Form attachments", "Bulk file import"],
+    dependencies: ["react-dropzone", "class-variance-authority"],
+    props: {
+      accept: { type: "Record<string, string[]>", description: "Accepted file types (MIME types)" },
+      maxSize: { type: "number", description: "Max file size in bytes" },
+      maxFiles: { type: "number", description: "Max number of files" },
+      multiple: { type: "boolean", default: "false", description: "Allow multiple file selection" },
+      disabled: { type: "boolean", default: "false", description: "Disabled state" },
+      onFilesSelected: { type: "(files: File[]) => void", description: "Callback when valid files are selected" },
+      onFilesRejected: { type: "(rejections: FileRejection[]) => void", description: "Callback when files are rejected" },
+      label: { type: "string", description: "Label text" },
+      description: { type: "string", description: "Description text shown in the drop zone" },
+      size: { type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Size variant" }
+    },
+    example: `<FileUpload
+  label="Upload documents"
+  accept={{ 'image/*': ['.png', '.jpg'] }}
+  maxSize={5 * 1024 * 1024}
+  onFilesSelected={(files) => handleUpload(files)}
+/>`
+  },
+  "tree-view": {
+    name: "TreeView",
+    category: "data-display",
+    description: "Hierarchical data display with expand/collapse, keyboard navigation, and selection",
+    keywords: ["tree", "hierarchy", "file browser", "nested", "expand", "collapse", "folder"],
+    useCases: ["File browsers", "Category hierarchies", "Organizational charts", "Navigation trees"],
+    dependencies: ["class-variance-authority"],
+    props: {
+      nodes: { type: "TreeNode[]", description: "Array of tree nodes", required: true },
+      expanded: { type: "string[]", description: "Controlled expanded node IDs" },
+      defaultExpanded: { type: "string[]", description: "Initially expanded node IDs" },
+      onExpandChange: { type: "(expanded: string[]) => void", description: "Callback on expand state change" },
+      selected: { type: "string", description: "Currently selected node ID" },
+      onSelectChange: { type: "(nodeId: string) => void", description: "Callback on selection change" }
+    },
+    example: `<TreeView
+  nodes={[
+    { id: 'src', label: 'src', children: [
+      { id: 'index', label: 'index.ts' },
+    ]},
+  ]}
+  onSelectChange={(id) => console.log(id)}
+/>`
+  },
+  "notification-center": {
+    name: "NotificationCenter",
+    category: "overlays",
+    description: "Dropdown notification panel with grouped notifications, read/unread state, and actions",
+    keywords: ["notification", "bell", "alert", "inbox", "unread", "badge", "messages"],
+    useCases: ["App notifications", "Activity feeds", "System alerts", "Message center"],
+    dependencies: [],
+    props: {
+      notifications: { type: "NotificationItem[]", description: "Array of notification items", required: true },
+      onMarkRead: { type: "(id: string) => void", description: "Callback when a notification is marked as read" },
+      onMarkAllRead: { type: "() => void", description: "Callback to mark all notifications as read" },
+      onDismiss: { type: "(id: string) => void", description: "Callback when a notification is dismissed" },
+      trigger: { type: "ReactNode", description: "Custom trigger element" },
+      maxHeight: { type: "number", default: "400", description: "Maximum height of the notification list" },
+      emptyMessage: { type: "string", default: "'No notifications'", description: "Message shown when empty" }
+    },
+    example: `<NotificationCenter
+  notifications={[
+    { id: '1', title: 'New message', timestamp: new Date(), read: false },
+  ]}
+  onMarkRead={(id) => markAsRead(id)}
+/>`
   }
 };
 function getComponentsByCategory(category) {
@@ -2196,7 +2360,7 @@ function getComponentCount() {
 var server = new import_server.Server(
   {
     name: "sds-mcp-server",
-    version: "0.1.0"
+    version: "0.8.0"
   },
   {
     capabilities: {
@@ -2272,6 +2436,65 @@ var TOOLS = [
       },
       required: ["name"]
     }
+  },
+  {
+    name: "get_app_shell",
+    description: "Returns a complete, ready-to-use app shell with ThemeProvider, TooltipProvider, Toaster, tailwind.config, postcss.config, and globals.css import. Use this when scaffolding a new project with SDE.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        framework: {
+          type: "string",
+          enum: ["nextjs", "vite"],
+          description: 'Target framework. Defaults to "vite".'
+        },
+        theme: {
+          type: "string",
+          enum: ["studio", "terra", "volt"],
+          description: 'Default theme. Defaults to "studio".'
+        }
+      }
+    }
+  },
+  {
+    name: "get_examples",
+    description: "Get usage examples for a specific component, including common patterns, compound component usage, and integration with other SDE components.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        name: {
+          type: "string",
+          description: 'Component name (e.g., "Button", "Dialog", "Card")'
+        }
+      },
+      required: ["name"]
+    }
+  },
+  {
+    name: "get_audit_checklist",
+    description: "Returns a post-generation checklist to verify SDE component usage is correct. Checks: provider wrapping, CSS variable usage (no hardcoded colors), accessibility attributes, motion preference respect, and import correctness.",
+    inputSchema: {
+      type: "object",
+      properties: {}
+    }
+  },
+  {
+    name: "eject_component",
+    description: "Copy a component's source code into your local project for full customization. Returns step-by-step instructions to eject the component with rewritten imports.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        name: {
+          type: "string",
+          description: 'Component name (e.g., "Button", "Card", "Dialog")'
+        },
+        targetDir: {
+          type: "string",
+          description: 'Target directory relative to project root. Defaults to "src/components/ui"'
+        }
+      },
+      required: ["name"]
+    }
   }
 ];
 function formatComponentList(components) {
@@ -2461,6 +2684,243 @@ function formatInstallationInstructions(component) {
 `;
   return output;
 }
+function generateAppShell(framework, theme) {
+  if (framework === "nextjs") {
+    return `# Next.js App Router Setup with Sage Design Engine
+
+## 1. Install dependencies
+
+\`\`\`bash
+pnpm add @thesage/ui
+pnpm add -D tailwindcss@^3.4 postcss autoprefixer tailwindcss-animate
+\`\`\`
+
+## 2. app/layout.tsx
+
+\`\`\`tsx
+import { ThemeProvider, TooltipProvider, Toaster } from '@thesage/ui'
+import '@thesage/ui/globals.css'
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider defaultTheme="${theme}" defaultMode="system">
+          <TooltipProvider delayDuration={300}>
+            {children}
+            <Toaster position="bottom-right" />
+          </TooltipProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+\`\`\`
+
+## 3. tailwind.config.js
+
+\`\`\`js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './node_modules/@thesage/ui/dist/**/*.{js,mjs}',
+  ],
+  darkMode: 'class',
+  theme: { extend: {} },
+  plugins: [require('tailwindcss-animate')],
+}
+\`\`\`
+
+## 4. postcss.config.js
+
+\`\`\`js
+module.exports = {
+  plugins: { tailwindcss: {}, autoprefixer: {} },
+}
+\`\`\`
+
+## 5. app/page.tsx (starter)
+
+\`\`\`tsx
+import { Button, Card, Heading, Text } from '@thesage/ui'
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-background p-8">
+      <Card className="mx-auto max-w-md p-6">
+        <Heading as="h1" size="lg">Welcome</Heading>
+        <Text className="mt-2">Your app is ready.</Text>
+        <Button className="mt-4">Get Started</Button>
+      </Card>
+    </main>
+  )
+}
+\`\`\``;
+  }
+  return `# Vite + React Setup with Sage Design Engine
+
+## 1. Install dependencies
+
+\`\`\`bash
+pnpm add @thesage/ui
+pnpm add -D tailwindcss@^3.4 postcss autoprefixer tailwindcss-animate
+\`\`\`
+
+## 2. src/main.tsx
+
+\`\`\`tsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { ThemeProvider, TooltipProvider, Toaster } from '@thesage/ui'
+import '@thesage/ui/globals.css'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider defaultTheme="${theme}" defaultMode="system">
+      <TooltipProvider delayDuration={300}>
+        <App />
+        <Toaster position="bottom-right" />
+      </TooltipProvider>
+    </ThemeProvider>
+  </React.StrictMode>
+)
+\`\`\`
+
+## 3. tailwind.config.js
+
+\`\`\`js
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{ts,tsx}',
+    './node_modules/@thesage/ui/dist/**/*.{js,mjs}',
+  ],
+  darkMode: 'class',
+  theme: { extend: {} },
+  plugins: [require('tailwindcss-animate')],
+}
+\`\`\`
+
+## 4. postcss.config.js
+
+\`\`\`js
+export default {
+  plugins: { tailwindcss: {}, autoprefixer: {} },
+}
+\`\`\`
+
+## 5. src/App.tsx (starter)
+
+\`\`\`tsx
+import { Button, Card, Heading, Text, ThemeToggle, ThemeSwitcher } from '@thesage/ui'
+
+export default function App() {
+  return (
+    <div className="min-h-screen bg-background p-8">
+      <div className="mx-auto max-w-2xl space-y-8">
+        <div className="flex items-center justify-between">
+          <Heading as="h1" size="xl">My App</Heading>
+          <div className="flex gap-2">
+            <ThemeSwitcher />
+            <ThemeToggle />
+          </div>
+        </div>
+        <Card className="p-6">
+          <Text>Welcome to your new app. Start building!</Text>
+          <Button className="mt-4">Get Started</Button>
+        </Card>
+      </div>
+    </div>
+  )
+}
+\`\`\``;
+}
+function generateAuditChecklist() {
+  return `## SDE Usage Audit Checklist
+
+### Provider Wrapping
+- [ ] ThemeProvider wraps the entire app
+- [ ] TooltipProvider wraps any area using Tooltip components
+- [ ] <Toaster /> is rendered at app root (required for toast notifications)
+- [ ] '@thesage/ui/globals.css' is imported at the top level
+
+### Styling
+- [ ] No hardcoded colors (no bg-white, text-black, bg-blue-500, text-gray-900)
+- [ ] All colors use CSS variables (bg-background, text-foreground, bg-primary, border-border, etc.)
+- [ ] className merging uses cn() utility, not string concatenation
+- [ ] Dark mode works correctly via ThemeProvider (no manual dark: class management needed)
+- [ ] tailwind.config.js content array includes: './node_modules/@thesage/ui/dist/**/*.{js,mjs}'
+
+### Accessibility
+- [ ] All interactive elements are keyboard-navigable
+- [ ] Dialogs trap focus and return focus on close
+- [ ] Form inputs have associated Label components
+- [ ] Animated components use useMotionPreference hook
+- [ ] AlertDialog used (not Dialog) for destructive confirmations
+- [ ] Images have alt text
+
+### Imports
+- [ ] Components imported from '@thesage/ui' (not relative paths to node_modules)
+- [ ] Heavy features use subpath imports:
+  - @thesage/ui/forms (react-hook-form + zod)
+  - @thesage/ui/dates (date-fns + react-day-picker)
+  - @thesage/ui/tables (@tanstack/react-table)
+  - @thesage/ui/dnd (@dnd-kit)
+- [ ] No duplicate imports (same component from both @thesage/ui and a local file)
+- [ ] Peer dependencies installed for subpath imports that need them
+
+### Component Usage
+- [ ] Compound components use correct structure (e.g., Dialog needs DialogTrigger + DialogContent)
+- [ ] Sheet used for desktop side panels, Drawer for mobile bottom sheets
+- [ ] Combobox used (not Select) when searchable dropdown is needed
+- [ ] Switch for instant toggles, Checkbox for form submission
+- [ ] Toast/Sonner for transient notifications, Alert for persistent messages`;
+}
+function generateEjectInstructions(component, targetDir) {
+  const srcPath = `node_modules/@thesage/ui/src/components/${component.category}/${component.name}.tsx`;
+  const destPath = `${targetDir}/${component.name}.tsx`;
+  return `## Eject: ${component.name}
+
+**Step 1:** Copy the source file:
+\`\`\`bash
+mkdir -p ${targetDir}
+cp ${srcPath} ${destPath}
+\`\`\`
+
+**Step 2:** Rewrite imports in the copied file:
+- Change \`from '../../lib/utils'\` \u2192 \`from '@/lib/utils'\`
+- Change \`from '../actions/Button'\` \u2192 \`from '@thesage/ui'\` (keep using package for non-ejected deps)
+- Change \`from '../../hooks/useMotionPreference'\` \u2192 \`from '@thesage/ui/hooks'\`
+
+**Step 3:** Update your app imports:
+\`\`\`tsx
+// Before:
+import { ${component.name} } from '@thesage/ui'
+// After:
+import { ${component.name} } from '@/${targetDir}/${component.name}'
+\`\`\`
+
+**Step 4:** Ensure \`cn()\` utility exists locally:
+\`\`\`tsx
+// src/lib/utils.ts
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) }
+\`\`\`
+
+**Step 5:** Install clsx + tailwind-merge if not already present:
+\`\`\`bash
+pnpm add clsx tailwind-merge
+\`\`\`
+
+You now own this component. Modify it freely.
+
+**Note:** The ejected component still works with SDE themes and CSS variables. You get full control over the markup and styling while staying in the SDE ecosystem.`;
+}
 server.setRequestHandler(import_types.ListToolsRequestSchema, async () => {
   return { tools: TOOLS };
 });
@@ -2553,8 +3013,8 @@ Try searching for:
         };
       }
       case "get_component": {
-        const name2 = args?.name;
-        if (!name2) {
+        const componentName = args?.name;
+        if (!componentName) {
           return {
             content: [
               {
@@ -2565,14 +3025,14 @@ Try searching for:
             isError: true
           };
         }
-        const component = getComponent(name2);
+        const component = getComponent(componentName);
         if (!component) {
           const allNames = getAllComponentNames();
           return {
             content: [
               {
                 type: "text",
-                text: `Component "${name2}" not found.
+                text: `Component "${componentName}" not found.
 
 Available components:
 ${allNames.join(", ")}`
@@ -2591,8 +3051,8 @@ ${allNames.join(", ")}`
         };
       }
       case "install_component": {
-        const name2 = args?.name;
-        if (!name2) {
+        const componentName = args?.name;
+        if (!componentName) {
           return {
             content: [
               {
@@ -2603,13 +3063,13 @@ ${allNames.join(", ")}`
             isError: true
           };
         }
-        const component = getComponent(name2);
+        const component = getComponent(componentName);
         if (!component) {
           return {
             content: [
               {
                 type: "text",
-                text: `Component "${name2}" not found. Use search_components to find available components.`
+                text: `Component "${componentName}" not found. Use search_components to find available components.`
               }
             ],
             isError: true
@@ -2624,6 +3084,150 @@ ${allNames.join(", ")}`
           ]
         };
       }
+      case "get_app_shell": {
+        const framework = args?.framework || "vite";
+        const theme = args?.theme || "studio";
+        return {
+          content: [
+            {
+              type: "text",
+              text: generateAppShell(framework, theme)
+            }
+          ]
+        };
+      }
+      case "get_examples": {
+        const componentName = args?.name;
+        if (!componentName) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: "Error: name parameter is required"
+              }
+            ],
+            isError: true
+          };
+        }
+        const component = getComponent(componentName);
+        if (!component) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Component "${componentName}" not found. Use search_components to find available components.`
+              }
+            ],
+            isError: true
+          };
+        }
+        let output = `## ${component.name} Examples
+
+`;
+        if (component.example) {
+          output += `### Basic Usage
+
+`;
+          output += `\`\`\`tsx
+${component.example}
+\`\`\`
+
+`;
+        }
+        const importParts = [component.name];
+        if (component.subComponents) {
+          importParts.push(...component.subComponents);
+        }
+        output += `### Import
+
+`;
+        output += `\`\`\`tsx
+import { ${importParts.join(", ")} } from '@thesage/ui'
+\`\`\`
+
+`;
+        if (component.useCases.length > 0) {
+          output += `### Common Use Cases
+
+`;
+          component.useCases.forEach((useCase) => {
+            output += `- ${useCase}
+`;
+          });
+          output += "\n";
+        }
+        if (component.props && Object.keys(component.props).length > 0) {
+          output += `### Key Props
+
+`;
+          Object.entries(component.props).forEach(([propName, prop]) => {
+            const defaultStr = prop.default ? ` (default: ${prop.default})` : "";
+            output += `- **${propName}**: \`${prop.type}\`${defaultStr} \u2014 ${prop.description}
+`;
+          });
+          output += "\n";
+        }
+        output += `
+Full API reference: https://thesage.dev/llms-full.txt
+`;
+        return {
+          content: [
+            {
+              type: "text",
+              text: output
+            }
+          ]
+        };
+      }
+      case "get_audit_checklist": {
+        return {
+          content: [
+            {
+              type: "text",
+              text: generateAuditChecklist()
+            }
+          ]
+        };
+      }
+      case "eject_component": {
+        const componentName = args?.name;
+        const targetDir = args?.targetDir || "src/components/ui";
+        if (!componentName) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: "Error: name parameter is required"
+              }
+            ],
+            isError: true
+          };
+        }
+        const component = getComponent(componentName);
+        if (!component) {
+          const allNames = getAllComponentNames();
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Component "${componentName}" not found.
+
+Available components:
+${allNames.join(", ")}`
+              }
+            ],
+            isError: true
+          };
+        }
+        return {
+          content: [
+            {
+              type: "text",
+              text: generateEjectInstructions(component, targetDir)
+            }
+          ]
+        };
+      }
       default:
         return {
           content: [
@@ -2650,8 +3254,9 @@ ${allNames.join(", ")}`
 async function main() {
   const transport = new import_stdio.StdioServerTransport();
   await server.connect(transport);
-  console.error("Sage UI MCP Server running");
+  console.error("Sage UI MCP Server v0.8.0 running");
   console.error(`Components available: ${getComponentCount()}`);
+  console.error(`Tools available: ${TOOLS.length}`);
 }
 main().catch((error) => {
   console.error("Fatal error:", error);