@codebakers/mcp 5.4.2 → 5.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/INSTALL.md +221 -221
  2. package/LICENSE +21 -21
  3. package/README.md +412 -412
  4. package/dist/cli.js +29 -29
  5. package/dist/cli.js.map +1 -1
  6. package/dist/tools/analyze-mockups.js +37 -37
  7. package/dist/tools/autonomous-build.d.ts +18 -18
  8. package/dist/tools/autonomous-build.js +286 -286
  9. package/dist/tools/check-gate.js +6 -6
  10. package/dist/tools/check-scope.js +10 -10
  11. package/dist/tools/enforce-feature.js +15 -15
  12. package/dist/tools/fix-commit.js +18 -18
  13. package/dist/tools/fix-mockups.js +191 -191
  14. package/dist/tools/generate-api-route.js +155 -155
  15. package/dist/tools/generate-chatbot.js +306 -306
  16. package/dist/tools/generate-component.js +117 -117
  17. package/dist/tools/generate-docs.js +525 -525
  18. package/dist/tools/generate-e2e-tests.js +19 -19
  19. package/dist/tools/generate-migration.js +22 -22
  20. package/dist/tools/generate-schema.js +37 -37
  21. package/dist/tools/generate-spec.js +38 -38
  22. package/dist/tools/generate-store-contracts.js +42 -42
  23. package/dist/tools/generate-store.js +109 -109
  24. package/dist/tools/generate-unit-tests.js +57 -57
  25. package/dist/tools/map-dependencies.js +45 -45
  26. package/dist/tools/run-interview.js +142 -142
  27. package/dist/tools/setup-github.js +8 -8
  28. package/dist/tools/setup-supabase.js +8 -8
  29. package/dist/tools/setup-vercel.js +8 -8
  30. package/dist/tools/validate-mockups.js +19 -19
  31. package/package.json +50 -50
package/dist/tools/enforce-feature.js CHANGED
@@ -31,17 +31,17 @@ export async function enforceFeature(args) {
31
31
  console.error('\n[1/8] Loading context...');
32
32
  const contextStatus = await loadContext(cwd);
33
33
  if (!contextStatus.success) {
34
- return `🍞 CodeBakers: Feature Build Enforcement BLOCKED
35
-
36
- ❌ Context loading failed
37
-
38
- ${contextStatus.errors.join('\n')}
39
-
40
- REQUIREMENT: All context files must be present before building.
41
-
42
- Fix:
43
- ${contextStatus.fixes.join('\n')}
44
-
34
+ return `🍞 CodeBakers: Feature Build Enforcement BLOCKED
35
+
36
+ ❌ Context loading failed
37
+
38
+ ${contextStatus.errors.join('\n')}
39
+
40
+ REQUIREMENT: All context files must be present before building.
41
+
42
+ Fix:
43
+ ${contextStatus.fixes.join('\n')}
44
+
45
45
  Cannot proceed until context is loaded.`;
46
46
  }
47
47
  // STEP 2: RUN ERROR SNIFFER (MANDATORY)
@@ -62,10 +62,10 @@ Cannot proceed until context is loaded.`;
62
62
  }
63
63
  catch (error) {
64
64
  console.error('Error during feature enforcement:', error);
65
- return `🍞 CodeBakers: Feature Build Enforcement Failed
66
-
67
- Error: ${error instanceof Error ? error.message : String(error)}
68
-
65
+ return `🍞 CodeBakers: Feature Build Enforcement Failed
66
+
67
+ Error: ${error instanceof Error ? error.message : String(error)}
68
+
69
69
  Please verify project directory and required files exist.`;
70
70
  }
71
71
  }
package/dist/tools/fix-commit.js CHANGED
@@ -28,26 +28,26 @@ export async function fixCommit(args) {
28
28
  // 1. Check if in git repo
29
29
  const isGitRepo = await checkGitRepo(cwd);
30
30
  if (!isGitRepo) {
31
- return `🍞 CodeBakers: Commit Fixer
32
-
33
- ❌ Not a git repository
34
-
35
- Initialize git first:
36
- \`\`\`bash
37
- git init
31
+ return `🍞 CodeBakers: Commit Fixer
32
+
33
+ ❌ Not a git repository
34
+
35
+ Initialize git first:
36
+ \`\`\`bash
37
+ git init
38
38
  \`\`\``;
39
39
  }
40
40
  // 2. Analyze last commit
41
41
  console.error('Analyzing last commit...');
42
42
  const analysis = await analyzeLastCommit(cwd);
43
43
  if (analysis.violations.length === 0) {
44
- return `🍞 CodeBakers: Commit Fixer
45
-
46
- ✅ Last commit looks good!
47
-
48
- Commit: ${analysis.commit_hash}
49
- Message: ${analysis.commit_message}
50
-
44
+ return `🍞 CodeBakers: Commit Fixer
45
+
46
+ ✅ Last commit looks good!
47
+
48
+ Commit: ${analysis.commit_hash}
49
+ Message: ${analysis.commit_message}
50
+
51
51
  No violations detected.`;
52
52
  }
53
53
  // 3. Generate report
@@ -56,10 +56,10 @@ No violations detected.`;
56
56
  }
57
57
  catch (error) {
58
58
  console.error('Error during commit fix:', error);
59
- return `🍞 CodeBakers: Commit Fixer Failed
60
-
61
- Error: ${error instanceof Error ? error.message : String(error)}
62
-
59
+ return `🍞 CodeBakers: Commit Fixer Failed
60
+
61
+ Error: ${error instanceof Error ? error.message : String(error)}
62
+
63
63
  Please check git status and try again.`;
64
64
  }
65
65
  }
package/dist/tools/fix-mockups.js CHANGED
@@ -33,8 +33,8 @@ export async function fixMockups(args) {
33
33
  const files = await fs.readdir(mockupPath);
34
34
  const htmlFiles = files.filter(f => f.endsWith('.html') || f.endsWith('.htm'));
35
35
  if (htmlFiles.length === 0) {
36
- return `🍞 CodeBakers: No mockups to fix
37
-
36
+ return `🍞 CodeBakers: No mockups to fix
37
+
38
38
  Add HTML mockups to ${mockupFolder} first.`;
39
39
  }
40
40
  // Fix overlapping content
@@ -57,8 +57,8 @@ Add HTML mockups to ${mockupFolder} first.`;
57
57
  }
58
58
  catch (error) {
59
59
  console.error('Error during mockup fix:', error);
60
- return `🍞 CodeBakers: Mockup Fix Failed
61
-
60
+ return `🍞 CodeBakers: Mockup Fix Failed
61
+
62
62
  Error: ${error instanceof Error ? error.message : String(error)}`;
63
63
  }
64
64
  }
@@ -253,160 +253,160 @@ async function generateMissingStates(mockupPath, files, result) {
253
253
  }
254
254
  }
255
255
  function generateLoadingState(component) {
256
- return `<!DOCTYPE html>
257
- <html>
258
- <head>
259
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
260
- <title>${component} - Loading</title>
261
- <style>
262
- .skeleton-container {
263
- padding: 20px;
264
- }
265
- .skeleton-item {
266
- background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
267
- background-size: 200% 100%;
268
- animation: loading 1.5s ease-in-out infinite;
269
- border-radius: 4px;
270
- margin-bottom: 16px;
271
- }
272
- .skeleton-title {
273
- height: 24px;
274
- width: 60%;
275
- margin-bottom: 16px;
276
- }
277
- .skeleton-line {
278
- height: 16px;
279
- width: 100%;
280
- }
281
- .skeleton-line:last-child {
282
- width: 80%;
283
- }
284
- @keyframes loading {
285
- 0% { background-position: 200% 0; }
286
- 100% { background-position: -200% 0; }
287
- }
288
- </style>
289
- </head>
290
- <body>
291
- <div class="skeleton-container">
292
- <div class="skeleton-item skeleton-title"></div>
293
- <div class="skeleton-item skeleton-line"></div>
294
- <div class="skeleton-item skeleton-line"></div>
295
- <div class="skeleton-item skeleton-line"></div>
296
- </div>
297
- </body>
256
+ return `<!DOCTYPE html>
257
+ <html>
258
+ <head>
259
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
260
+ <title>${component} - Loading</title>
261
+ <style>
262
+ .skeleton-container {
263
+ padding: 20px;
264
+ }
265
+ .skeleton-item {
266
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
267
+ background-size: 200% 100%;
268
+ animation: loading 1.5s ease-in-out infinite;
269
+ border-radius: 4px;
270
+ margin-bottom: 16px;
271
+ }
272
+ .skeleton-title {
273
+ height: 24px;
274
+ width: 60%;
275
+ margin-bottom: 16px;
276
+ }
277
+ .skeleton-line {
278
+ height: 16px;
279
+ width: 100%;
280
+ }
281
+ .skeleton-line:last-child {
282
+ width: 80%;
283
+ }
284
+ @keyframes loading {
285
+ 0% { background-position: 200% 0; }
286
+ 100% { background-position: -200% 0; }
287
+ }
288
+ </style>
289
+ </head>
290
+ <body>
291
+ <div class="skeleton-container">
292
+ <div class="skeleton-item skeleton-title"></div>
293
+ <div class="skeleton-item skeleton-line"></div>
294
+ <div class="skeleton-item skeleton-line"></div>
295
+ <div class="skeleton-item skeleton-line"></div>
296
+ </div>
297
+ </body>
298
298
  </html>`;
299
299
  }
300
300
  function generateErrorState(component) {
301
- return `<!DOCTYPE html>
302
- <html>
303
- <head>
304
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
305
- <title>${component} - Error</title>
306
- <style>
307
- .error-container {
308
- display: flex;
309
- flex-direction: column;
310
- align-items: center;
311
- justify-content: center;
312
- padding: 40px 20px;
313
- text-align: center;
314
- }
315
- .error-icon {
316
- font-size: 48px;
317
- color: #ef4444;
318
- margin-bottom: 16px;
319
- }
320
- .error-title {
321
- font-size: 20px;
322
- font-weight: 600;
323
- color: #1f2937;
324
- margin-bottom: 8px;
325
- }
326
- .error-message {
327
- font-size: 14px;
328
- color: #6b7280;
329
- margin-bottom: 24px;
330
- }
331
- .retry-button {
332
- background: #3b82f6;
333
- color: white;
334
- border: none;
335
- padding: 12px 24px;
336
- border-radius: 6px;
337
- font-size: 14px;
338
- cursor: pointer;
339
- min-height: 44px;
340
- }
341
- .retry-button:hover {
342
- background: #2563eb;
343
- }
344
- </style>
345
- </head>
346
- <body>
347
- <div class="error-container">
348
- <div class="error-icon">⚠️</div>
349
- <h3 class="error-title">Failed to load ${component}</h3>
350
- <p class="error-message">Please check your connection and try again.</p>
351
- <button class="retry-button">Retry</button>
352
- </div>
353
- </body>
301
+ return `<!DOCTYPE html>
302
+ <html>
303
+ <head>
304
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
305
+ <title>${component} - Error</title>
306
+ <style>
307
+ .error-container {
308
+ display: flex;
309
+ flex-direction: column;
310
+ align-items: center;
311
+ justify-content: center;
312
+ padding: 40px 20px;
313
+ text-align: center;
314
+ }
315
+ .error-icon {
316
+ font-size: 48px;
317
+ color: #ef4444;
318
+ margin-bottom: 16px;
319
+ }
320
+ .error-title {
321
+ font-size: 20px;
322
+ font-weight: 600;
323
+ color: #1f2937;
324
+ margin-bottom: 8px;
325
+ }
326
+ .error-message {
327
+ font-size: 14px;
328
+ color: #6b7280;
329
+ margin-bottom: 24px;
330
+ }
331
+ .retry-button {
332
+ background: #3b82f6;
333
+ color: white;
334
+ border: none;
335
+ padding: 12px 24px;
336
+ border-radius: 6px;
337
+ font-size: 14px;
338
+ cursor: pointer;
339
+ min-height: 44px;
340
+ }
341
+ .retry-button:hover {
342
+ background: #2563eb;
343
+ }
344
+ </style>
345
+ </head>
346
+ <body>
347
+ <div class="error-container">
348
+ <div class="error-icon">⚠️</div>
349
+ <h3 class="error-title">Failed to load ${component}</h3>
350
+ <p class="error-message">Please check your connection and try again.</p>
351
+ <button class="retry-button">Retry</button>
352
+ </div>
353
+ </body>
354
354
  </html>`;
355
355
  }
356
356
  function generateEmptyState(component) {
357
- return `<!DOCTYPE html>
358
- <html>
359
- <head>
360
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
361
- <title>${component} - Empty</title>
362
- <style>
363
- .empty-container {
364
- display: flex;
365
- flex-direction: column;
366
- align-items: center;
367
- justify-content: center;
368
- padding: 40px 20px;
369
- text-align: center;
370
- }
371
- .empty-icon {
372
- font-size: 48px;
373
- color: #9ca3af;
374
- margin-bottom: 16px;
375
- }
376
- .empty-title {
377
- font-size: 20px;
378
- font-weight: 600;
379
- color: #1f2937;
380
- margin-bottom: 8px;
381
- }
382
- .empty-message {
383
- font-size: 14px;
384
- color: #6b7280;
385
- margin-bottom: 24px;
386
- }
387
- .action-button {
388
- background: #3b82f6;
389
- color: white;
390
- border: none;
391
- padding: 12px 24px;
392
- border-radius: 6px;
393
- font-size: 14px;
394
- cursor: pointer;
395
- min-height: 44px;
396
- }
397
- .action-button:hover {
398
- background: #2563eb;
399
- }
400
- </style>
401
- </head>
402
- <body>
403
- <div class="empty-container">
404
- <div class="empty-icon">📭</div>
405
- <h3 class="empty-title">No ${component} yet</h3>
406
- <p class="empty-message">Get started by creating your first item</p>
407
- <button class="action-button">Create</button>
408
- </div>
409
- </body>
357
+ return `<!DOCTYPE html>
358
+ <html>
359
+ <head>
360
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
361
+ <title>${component} - Empty</title>
362
+ <style>
363
+ .empty-container {
364
+ display: flex;
365
+ flex-direction: column;
366
+ align-items: center;
367
+ justify-content: center;
368
+ padding: 40px 20px;
369
+ text-align: center;
370
+ }
371
+ .empty-icon {
372
+ font-size: 48px;
373
+ color: #9ca3af;
374
+ margin-bottom: 16px;
375
+ }
376
+ .empty-title {
377
+ font-size: 20px;
378
+ font-weight: 600;
379
+ color: #1f2937;
380
+ margin-bottom: 8px;
381
+ }
382
+ .empty-message {
383
+ font-size: 14px;
384
+ color: #6b7280;
385
+ margin-bottom: 24px;
386
+ }
387
+ .action-button {
388
+ background: #3b82f6;
389
+ color: white;
390
+ border: none;
391
+ padding: 12px 24px;
392
+ border-radius: 6px;
393
+ font-size: 14px;
394
+ cursor: pointer;
395
+ min-height: 44px;
396
+ }
397
+ .action-button:hover {
398
+ background: #2563eb;
399
+ }
400
+ </style>
401
+ </head>
402
+ <body>
403
+ <div class="empty-container">
404
+ <div class="empty-icon">📭</div>
405
+ <h3 class="empty-title">No ${component} yet</h3>
406
+ <p class="empty-message">Get started by creating your first item</p>
407
+ <button class="action-button">Create</button>
408
+ </div>
409
+ </body>
410
410
  </html>`;
411
411
  }
412
412
  /**
@@ -473,45 +473,45 @@ async function generateDesignTokens(mockupPath, files, result) {
473
473
  const tokenPath = path.join(mockupPath, 'design-tokens.css');
474
474
  const tokensExist = await fs.access(tokenPath).then(() => true).catch(() => false);
475
475
  if (!tokensExist) {
476
- const tokens = `:root {
477
- /* Colors */
478
- --color-primary: #3b82f6;
479
- --color-primary-hover: #2563eb;
480
- --color-secondary: #6b7280;
481
- --color-text-primary: #1f2937;
482
- --color-text-secondary: #6b7280;
483
- --color-bg-primary: #ffffff;
484
- --color-bg-secondary: #f9fafb;
485
- --color-border: #e5e7eb;
486
- --color-error: #ef4444;
487
- --color-success: #10b981;
488
- --color-warning: #f59e0b;
489
-
490
- /* Spacing (8px grid) */
491
- --spacing-1: 8px;
492
- --spacing-2: 16px;
493
- --spacing-3: 24px;
494
- --spacing-4: 32px;
495
- --spacing-5: 40px;
496
- --spacing-6: 48px;
497
-
498
- /* Typography */
499
- --font-size-xs: 12px;
500
- --font-size-sm: 14px;
501
- --font-size-base: 16px;
502
- --font-size-lg: 18px;
503
- --font-size-xl: 20px;
504
- --font-size-2xl: 24px;
505
-
506
- /* Border Radius */
507
- --radius-sm: 4px;
508
- --radius-md: 6px;
509
- --radius-lg: 8px;
510
-
511
- /* Shadows */
512
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
513
- --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
514
- --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
476
+ const tokens = `:root {
477
+ /* Colors */
478
+ --color-primary: #3b82f6;
479
+ --color-primary-hover: #2563eb;
480
+ --color-secondary: #6b7280;
481
+ --color-text-primary: #1f2937;
482
+ --color-text-secondary: #6b7280;
483
+ --color-bg-primary: #ffffff;
484
+ --color-bg-secondary: #f9fafb;
485
+ --color-border: #e5e7eb;
486
+ --color-error: #ef4444;
487
+ --color-success: #10b981;
488
+ --color-warning: #f59e0b;
489
+
490
+ /* Spacing (8px grid) */
491
+ --spacing-1: 8px;
492
+ --spacing-2: 16px;
493
+ --spacing-3: 24px;
494
+ --spacing-4: 32px;
495
+ --spacing-5: 40px;
496
+ --spacing-6: 48px;
497
+
498
+ /* Typography */
499
+ --font-size-xs: 12px;
500
+ --font-size-sm: 14px;
501
+ --font-size-base: 16px;
502
+ --font-size-lg: 18px;
503
+ --font-size-xl: 20px;
504
+ --font-size-2xl: 24px;
505
+
506
+ /* Border Radius */
507
+ --radius-sm: 4px;
508
+ --radius-md: 6px;
509
+ --radius-lg: 8px;
510
+
511
+ /* Shadows */
512
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
513
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
514
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
515
515
  }`;
516
516
  await fs.writeFile(tokenPath, tokens, 'utf-8');
517
517
  result.files_created.push('design-tokens.css');