@fragments-sdk/cli 0.15.8 → 0.15.10

package/src/commands/__fixtures__/shadcn-label-wrapper/src/components/ui/label.contract.json

@@ -37,6 +37,6 @@
     "source": "extracted",
     "verified": false,
     "frameworkSupport": "native",
-    "extractedAt": "2026-03-26T15:34:52.519Z"
+    "extractedAt": "2026-03-26T14:38:30.456Z"
   }
 }

package/src/commands/__fixtures__/shadcn-label-wrapper/src/components/ui/primitive.contract.json

@@ -15,6 +15,6 @@
     "source": "extracted",
     "verified": false,
     "frameworkSupport": "native",
-    "extractedAt": "2026-03-26T15:34:52.519Z"
+    "extractedAt": "2026-03-26T14:38:30.457Z"
   }
 }

package/src/commands/create.ts

@@ -778,7 +778,7 @@ function configureMcp(projectDir: string): void {
     mcpServers: {
       fragments: {
         command: 'npx',
-        args: ['-y', '@fragments-sdk/cli', 'mcp'],
+        args: ['-y', '--package', '@fragments-sdk/cli', 'fragments-mcp'],
       },
     },
   };

package/src/mcp/__tests__/server.integration.test.ts

@@ -0,0 +1,342 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js';
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { createMcpServer } from '../server.js';
+
+function writeJson(path: string, value: unknown): void {
+  writeFileSync(path, JSON.stringify(value, null, 2));
+}
+
+function getTextPayload(result: unknown): unknown {
+  const content =
+    typeof result === 'object' && result !== null && 'content' in result
+      ? (result as { content?: Array<{ type?: string; text?: string }> }).content
+      : undefined;
+
+  if (!Array.isArray(content)) {
+    throw new Error('Expected content array');
+  }
+
+  const text = content.find((entry) => entry.type === 'text')?.text;
+  if (!text) {
+    throw new Error('Expected text content');
+  }
+
+  return JSON.parse(text);
+}
+
+describe('CLI MCP server integration', () => {
+  let projectRoot: string;
+
+  beforeEach(() => {
+    projectRoot = mkdtempSync(join(tmpdir(), 'fragments-cli-mcp-'));
+    mkdirSync(join(projectRoot, 'src'), { recursive: true });
+
+    writeJson(join(projectRoot, 'fragments.json'), {
+      version: '1.0.0',
+      generatedAt: '2026-03-26T00:00:00.000Z',
+      packageName: '@test/ui',
+      fragments: {
+        Button: {
+          filePath: 'src/Button.fragment.tsx',
+          meta: {
+            name: 'Button',
+            description: 'A clickable button component',
+            category: 'actions',
+            tags: ['interactive', 'form'],
+            status: 'stable',
+          },
+          usage: {
+            when: ['Use when the user needs to submit a form'],
+            whenNot: ['Navigation only'],
+            accessibility: ['Provide an accessible name'],
+          },
+          props: {
+            variant: {
+              type: 'string',
+              values: ['primary', 'secondary'],
+              default: 'primary',
+              description: 'Visual style',
+            },
+          },
+          variants: [
+            { name: 'Default', description: 'Default button', code: '<Button>Submit</Button>' },
+          ],
+        },
+        Input: {
+          filePath: 'src/Input.fragment.tsx',
+          meta: {
+            name: 'Input',
+            description: 'Single-line text input',
+            category: 'forms',
+            tags: ['form', 'field', 'text'],
+            status: 'stable',
+          },
+          usage: {
+            when: ['Collect text input in forms', 'Authentication fields'],
+            whenNot: ['Long-form content'],
+          },
+          props: {
+            type: {
+              type: 'string',
+              values: ['text', 'email', 'password'],
+              description: 'Input type',
+            },
+          },
+          variants: [
+            { name: 'Default', description: 'Default input', code: '<Input />' },
+          ],
+        },
+        Card: {
+          filePath: 'src/Card.fragment.tsx',
+          meta: {
+            name: 'Card',
+            description: 'Surface container for grouped content',
+            category: 'layout',
+            tags: ['surface', 'container'],
+            status: 'stable',
+          },
+          usage: {
+            when: ['Group related content'],
+            whenNot: ['Tiny inline wrappers'],
+          },
+          props: {},
+          variants: [
+            { name: 'Default', description: 'Default card', code: '<Card />' },
+          ],
+        },
+        Textarea: {
+          filePath: 'src/Textarea.fragment.tsx',
+          meta: {
+            name: 'Textarea',
+            description: 'Multi-line input for longer content',
+            category: 'forms',
+            tags: ['form', 'multiline', 'editor'],
+            status: 'stable',
+          },
+          usage: {
+            when: ['Collect long-form text and blog content'],
+            whenNot: ['Short single-line values'],
+          },
+          props: {},
+          variants: [
+            { name: 'Default', description: 'Default textarea', code: '<Textarea />' },
+          ],
+        },
+      },
+      blocks: {
+        'Login Form': {
+          filePath: 'src/blocks/LoginForm.block.tsx',
+          name: 'Login Form',
+          description: 'Email and password authentication form',
+          category: 'authentication',
+          components: ['Card', 'Input', 'Button'],
+          tags: ['login', 'auth', 'form'],
+          code: '<Card><Input type="email" /><Input type="password" /><Button>Sign in</Button></Card>',
+        },
+        'Checkout Form': {
+          filePath: 'src/blocks/CheckoutForm.block.tsx',
+          name: 'Checkout Form',
+          description: 'Address and payment collection flow',
+          category: 'ecommerce',
+          components: ['Card', 'Input', 'Button'],
+          tags: ['checkout', 'payment', 'form'],
+          code: '<Card><Input /><Input /><Button>Pay now</Button></Card>',
+        },
+        'Blog Editor': {
+          filePath: 'src/blocks/BlogEditor.block.tsx',
+          name: 'Blog Editor',
+          description: 'Editor layout with title and content fields',
+          category: 'content',
+          components: ['Input', 'Textarea', 'Button'],
+          tags: ['blog', 'editor', 'publish'],
+          code: '<Input /><Textarea /><Button>Publish</Button>',
+        },
+      },
+      tokens: {
+        prefix: '--fui',
+        total: 6,
+        categories: {
+          'colors---accent-(light-dark-for-automatic-dark-mode)': [
+            { name: '--fui-color-accent', value: '#0066cc', description: 'Accent color' },
+            { name: '--fui-color-accent-hover', value: '#0055aa', description: 'Accent hover' },
+          ],
+          'spacing---core-scale': [
+            { name: '--fui-space-2', value: '8px', description: 'Small spacing' },
+            { name: '--fui-space-4', value: '16px', description: 'Medium spacing' },
+          ],
+          'text---content': [
+            { name: '--fui-text-primary', value: '#111111', description: 'Primary text' },
+            { name: '--fui-text-secondary', value: '#666666', description: 'Secondary text' },
+          ],
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    rmSync(projectRoot, { recursive: true, force: true });
+  });
+
+  async function withClient<T>(run: (client: Client) => Promise<T>): Promise<T> {
+    const server = createMcpServer({ projectRoot });
+    const client = new Client({ name: 'test-client', version: '1.0.0' });
+    const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
+
+    await server.connect(serverTransport);
+    await client.connect(clientTransport);
+
+    try {
+      return await run(client);
+    } finally {
+      await client.close();
+      await server.close();
+    }
+  }
+
+  it('lists bare tool names and rejects old prefixed calls', async () => {
+    await withClient(async (client) => {
+      const listed = await client.listTools();
+      const names = listed.tools.map((tool) => tool.name);
+
+      expect(names.some((name) => name.startsWith('fragments_'))).toBe(false);
+      expect(names).toContain('discover');
+      expect(names).toContain('inspect');
+      expect(names).toContain('blocks');
+      expect(names).toContain('tokens');
+      expect(names).toContain('implement');
+
+      const prefixedResult = await client.callTool({
+        name: 'fragments_discover',
+        arguments: {},
+      });
+
+      expect(prefixedResult.isError).toBe(true);
+      expect(getTextPayload(prefixedResult)).toEqual({
+        error: 'Unknown tool: fragments_discover',
+      });
+    });
+  });
+
+  it('reports the CLI package version in the handshake metadata', async () => {
+    await withClient(async (client) => {
+      const pkg = JSON.parse(
+        readFileSync(new URL('../../../package.json', import.meta.url), 'utf-8')
+      ) as { version: string };
+
+      expect(client.getServerVersion()).toEqual({
+        name: 'fragments-mcp',
+        version: pkg.version,
+      });
+    });
+  });
+
+  it('honors discover limits in list and use-case modes', async () => {
+    await withClient(async (client) => {
+      const listResult = await client.callTool({
+        name: 'discover',
+        arguments: { search: 'form', limit: 2, verbosity: 'compact' },
+      });
+      const listPayload = getTextPayload(listResult) as {
+        returned: number;
+        fragments: Array<{ name: string; codeExample?: string }>;
+      };
+
+      expect(listPayload.returned).toBe(2);
+      expect(listPayload.fragments.every((fragment) => fragment.codeExample === undefined)).toBe(true);
+
+      const useCaseResult = await client.callTool({
+        name: 'discover',
+        arguments: { useCase: 'login form', limit: 2 },
+      });
+      const useCasePayload = getTextPayload(useCaseResult) as {
+        suggestions: Array<{ component: string }>;
+      };
+
+      expect(useCasePayload.suggestions).toHaveLength(2);
+    });
+  });
+
+  it('matches friendly token categories and enforces per-category limits', async () => {
+    await withClient(async (client) => {
+      const categoryResult = await client.callTool({
+        name: 'tokens',
+        arguments: { category: 'color' },
+      });
+      const categoryPayload = getTextPayload(categoryResult) as {
+        total: number;
+        categories: Record<string, Array<{ name: string }>>;
+      };
+
+      expect(categoryPayload.total).toBeGreaterThan(0);
+      expect(categoryPayload.categories['colors---accent-(light-dark-for-automatic-dark-mode)']).toBeDefined();
+
+      const limitedResult = await client.callTool({
+        name: 'tokens',
+        arguments: { limit: 1 },
+      });
+      const limitedPayload = getTextPayload(limitedResult) as {
+        categories: Record<string, Array<{ name: string }>>;
+      };
+
+      for (const tokens of Object.values(limitedPayload.categories)) {
+        expect(tokens).toHaveLength(1);
+      }
+    });
+  });
+
+  it('ranks blocks by relevance and applies verbosity', async () => {
+    await withClient(async (client) => {
+      const compactResult = await client.callTool({
+        name: 'blocks',
+        arguments: { search: 'login', limit: 1, verbosity: 'compact' },
+      });
+      const compactPayload = getTextPayload(compactResult) as {
+        blocks: Array<{ name: string; code?: string }>;
+      };
+
+      expect(compactPayload.blocks[0]?.name).toBe('Login Form');
+      expect(compactPayload.blocks[0]?.code).toBeUndefined();
+
+      const fullResult = await client.callTool({
+        name: 'blocks',
+        arguments: { search: 'login', limit: 1, verbosity: 'full' },
+      });
+      const fullPayload = getTextPayload(fullResult) as {
+        blocks: Array<{ name: string; code?: string }>;
+      };
+
+      expect(fullPayload.blocks[0]?.name).toBe('Login Form');
+      expect(fullPayload.blocks[0]?.code).toContain('Sign in');
+    });
+  });
+
+  it('returns login-oriented implement results and respects component limits', async () => {
+    await withClient(async (client) => {
+      const defaultResult = await client.callTool({
+        name: 'implement',
+        arguments: { useCase: 'login form' },
+      });
+      const defaultPayload = getTextPayload(defaultResult) as {
+        components: Array<{ name: string }>;
+        blocks?: Array<{ name: string }>;
+      };
+
+      expect(defaultPayload.components.length).toBeGreaterThan(0);
+      expect(defaultPayload.blocks?.[0]?.name).toBe('Login Form');
+
+      const limitedResult = await client.callTool({
+        name: 'implement',
+        arguments: { useCase: 'login form', limit: 1 },
+      });
+      const limitedPayload = getTextPayload(limitedResult) as {
+        components: Array<{ name: string }>;
+      };
+
+      expect(limitedPayload.components).toHaveLength(1);
+    });
+  });
+});