tlc-claude-code 1.2.27 → 1.2.28

package/dashboard/dist/styles/tokens.d.ts

@@ -0,0 +1,150 @@
+/**
+ * Design Tokens - Colors, spacing, typography, and themes
+ */
+export declare const colors: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    success: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    warning: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    error: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    info: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    white: string;
+    black: string;
+};
+export declare const spacing: {
+    0: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    12: string;
+    14: string;
+    16: string;
+};
+export declare const typography: {
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeight: {
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+    lineHeight: {
+        none: number;
+        tight: number;
+        snug: number;
+        normal: number;
+        relaxed: number;
+        loose: number;
+    };
+    fontFamily: {
+        sans: string;
+        mono: string;
+    };
+};
+export declare const themes: {
+    light: {
+        background: string;
+        foreground: string;
+        muted: string;
+        mutedForeground: string;
+        border: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    dark: {
+        background: string;
+        foreground: string;
+        muted: string;
+        mutedForeground: string;
+        border: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+};
+export type Theme = keyof typeof themes;
+/**
+ * Generate CSS custom properties for a theme
+ */
+export declare function generateCSSVariables(theme: Theme): string;

package/dashboard/dist/styles/tokens.js

@@ -0,0 +1,184 @@
+/**
+ * Design Tokens - Colors, spacing, typography, and themes
+ */
+export const colors = {
+    // Primary palette
+    primary: {
+        50: '#eff6ff',
+        100: '#dbeafe',
+        200: '#bfdbfe',
+        300: '#93c5fd',
+        400: '#60a5fa',
+        500: '#3b82f6',
+        600: '#2563eb',
+        700: '#1d4ed8',
+        800: '#1e40af',
+        900: '#1e3a8a',
+    },
+    // Neutral grays
+    gray: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
+    },
+    // Status colors
+    success: {
+        50: '#f0fdf4',
+        100: '#dcfce7',
+        500: '#22c55e',
+        600: '#16a34a',
+        700: '#15803d',
+    },
+    warning: {
+        50: '#fffbeb',
+        100: '#fef3c7',
+        500: '#f59e0b',
+        600: '#d97706',
+        700: '#b45309',
+    },
+    error: {
+        50: '#fef2f2',
+        100: '#fee2e2',
+        500: '#ef4444',
+        600: '#dc2626',
+        700: '#b91c1c',
+    },
+    info: {
+        50: '#eff6ff',
+        100: '#dbeafe',
+        500: '#3b82f6',
+        600: '#2563eb',
+        700: '#1d4ed8',
+    },
+    // Pure colors
+    white: '#ffffff',
+    black: '#000000',
+};
+export const spacing = {
+    0: '0',
+    0.5: '0.125rem',
+    1: '0.25rem',
+    1.5: '0.375rem',
+    2: '0.5rem',
+    2.5: '0.625rem',
+    3: '0.75rem',
+    3.5: '0.875rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    7: '1.75rem',
+    8: '2rem',
+    9: '2.25rem',
+    10: '2.5rem',
+    12: '3rem',
+    14: '3.5rem',
+    16: '4rem',
+};
+export const typography = {
+    fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+    },
+    fontWeight: {
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+    },
+    lineHeight: {
+        none: 1,
+        tight: 1.25,
+        snug: 1.375,
+        normal: 1.5,
+        relaxed: 1.625,
+        loose: 2,
+    },
+    fontFamily: {
+        sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    },
+};
+export const themes = {
+    light: {
+        background: colors.white,
+        foreground: colors.gray[900],
+        muted: colors.gray[100],
+        mutedForeground: colors.gray[500],
+        border: colors.gray[200],
+        primary: colors.primary[600],
+        primaryForeground: colors.white,
+        secondary: colors.gray[100],
+        secondaryForeground: colors.gray[900],
+        accent: colors.primary[50],
+        accentForeground: colors.primary[700],
+        success: colors.success[600],
+        warning: colors.warning[600],
+        error: colors.error[600],
+        info: colors.info[600],
+    },
+    dark: {
+        background: colors.gray[900],
+        foreground: colors.gray[50],
+        muted: colors.gray[800],
+        mutedForeground: colors.gray[400],
+        border: colors.gray[700],
+        primary: colors.primary[500],
+        primaryForeground: colors.white,
+        secondary: colors.gray[800],
+        secondaryForeground: colors.gray[100],
+        accent: colors.gray[800],
+        accentForeground: colors.primary[400],
+        success: colors.success[500],
+        warning: colors.warning[500],
+        error: colors.error[500],
+        info: colors.info[500],
+    },
+};
+/**
+ * Generate CSS custom properties for a theme
+ */
+export function generateCSSVariables(theme) {
+    const themeTokens = themes[theme];
+    const lines = [];
+    // Theme colors
+    for (const [key, value] of Object.entries(themeTokens)) {
+        lines.push(`  --color-${key}: ${value};`);
+    }
+    // Primary palette
+    for (const [shade, value] of Object.entries(colors.primary)) {
+        lines.push(`  --color-primary-${shade}: ${value};`);
+    }
+    // Gray palette
+    for (const [shade, value] of Object.entries(colors.gray)) {
+        lines.push(`  --color-gray-${shade}: ${value};`);
+    }
+    // Spacing
+    for (const [key, value] of Object.entries(spacing)) {
+        const normalizedKey = String(key).replace('.', '_');
+        lines.push(`  --spacing-${normalizedKey}: ${value};`);
+    }
+    // Typography
+    for (const [key, value] of Object.entries(typography.fontSize)) {
+        lines.push(`  --font-size-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(typography.fontWeight)) {
+        lines.push(`  --font-weight-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(typography.lineHeight)) {
+        lines.push(`  --line-height-${key}: ${value};`);
+    }
+    return `:root {\n${lines.join('\n')}\n}`;
+}

package/dashboard/dist/styles/tokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dashboard/dist/styles/tokens.test.js

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { colors, spacing, typography, themes, generateCSSVariables, } from './tokens.js';
+describe('tokens', () => {
+    describe('colors', () => {
+        it('has primary color palette', () => {
+            expect(colors.primary).toBeDefined();
+            expect(colors.primary[500]).toBeDefined();
+        });
+        it('has status colors', () => {
+            expect(colors.success).toBeDefined();
+            expect(colors.warning).toBeDefined();
+            expect(colors.error).toBeDefined();
+            expect(colors.info).toBeDefined();
+        });
+        it('has neutral grays', () => {
+            expect(colors.gray).toBeDefined();
+            expect(colors.gray[50]).toBeDefined();
+            expect(colors.gray[900]).toBeDefined();
+        });
+    });
+    describe('spacing', () => {
+        it('has spacing scale', () => {
+            expect(spacing[0]).toBe('0');
+            expect(spacing[1]).toBe('0.25rem');
+            expect(spacing[4]).toBe('1rem');
+            expect(spacing[8]).toBe('2rem');
+        });
+        it('has 16 steps', () => {
+            expect(Object.keys(spacing).length).toBeGreaterThanOrEqual(13);
+        });
+    });
+    describe('typography', () => {
+        it('has font sizes', () => {
+            expect(typography.fontSize.xs).toBeDefined();
+            expect(typography.fontSize.sm).toBeDefined();
+            expect(typography.fontSize.base).toBeDefined();
+            expect(typography.fontSize.lg).toBeDefined();
+            expect(typography.fontSize.xl).toBeDefined();
+        });
+        it('has font weights', () => {
+            expect(typography.fontWeight.normal).toBe(400);
+            expect(typography.fontWeight.medium).toBe(500);
+            expect(typography.fontWeight.semibold).toBe(600);
+            expect(typography.fontWeight.bold).toBe(700);
+        });
+        it('has line heights', () => {
+            expect(typography.lineHeight.tight).toBeDefined();
+            expect(typography.lineHeight.normal).toBeDefined();
+            expect(typography.lineHeight.relaxed).toBeDefined();
+        });
+    });
+    describe('themes', () => {
+        it('has light theme', () => {
+            expect(themes.light).toBeDefined();
+            expect(themes.light.background).toBeDefined();
+            expect(themes.light.foreground).toBeDefined();
+            expect(themes.light.primary).toBeDefined();
+        });
+        it('has dark theme', () => {
+            expect(themes.dark).toBeDefined();
+            expect(themes.dark.background).toBeDefined();
+            expect(themes.dark.foreground).toBeDefined();
+            expect(themes.dark.primary).toBeDefined();
+        });
+        it('has contrasting background/foreground', () => {
+            expect(themes.light.background).not.toBe(themes.light.foreground);
+            expect(themes.dark.background).not.toBe(themes.dark.foreground);
+        });
+    });
+    describe('generateCSSVariables', () => {
+        it('generates CSS custom properties', () => {
+            const css = generateCSSVariables('light');
+            expect(css).toContain('--color-primary');
+            expect(css).toContain('--color-background');
+            expect(css).toContain('--spacing-4');
+        });
+        it('generates different values for dark theme', () => {
+            const lightCSS = generateCSSVariables('light');
+            const darkCSS = generateCSSVariables('dark');
+            expect(lightCSS).not.toBe(darkCSS);
+        });
+        it('includes spacing variables', () => {
+            const css = generateCSSVariables('light');
+            expect(css).toContain('--spacing-0');
+            expect(css).toContain('--spacing-1');
+            expect(css).toContain('--spacing-8');
+        });
+        it('includes typography variables', () => {
+            const css = generateCSSVariables('light');
+            expect(css).toContain('--font-size-sm');
+            expect(css).toContain('--font-size-base');
+            expect(css).toContain('--font-weight-bold');
+        });
+    });
+});

package/dashboard/dist/test/setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dashboard/dist/test/setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dashboard/package.json

@@ -23,11 +23,14 @@
     "react": "^18.3.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.3.1",
     "@types/dockerode": "^3.3.31",
     "@types/node": "^22.10.0",
     "@types/react": "^18.3.12",
     "@vitest/coverage-v8": "^4.0.18",
     "ink-testing-library": "^4.0.0",
+    "jsdom": "^27.4.0",
     "memfs": "^4.56.10",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlc-claude-code",
-  "version": "1.2.27",
+  "version": "1.2.28",
   "description": "TLC - Test Led Coding for Claude Code",
   "bin": {
     "tlc": "./bin/tlc.js",

package/server/lib/adapters/base-adapter.js

@@ -0,0 +1,114 @@
+/**
+ * Base Adapter - Common interface for all model adapters
+ */
+
+/**
+ * Schema for standardized review response
+ */
+const REVIEW_RESPONSE_SCHEMA = {
+  issues: 'array',      // Array of { id, severity, message, line?, suggestion? }
+  suggestions: 'array', // Array of strings
+  score: 'number',      // 0-100 quality score
+  model: 'string',      // Model name
+  tokensUsed: 'number', // Tokens consumed
+  cost: 'number',       // Cost in USD
+};
+
+/**
+ * Base adapter class - all model adapters extend this
+ */
+class BaseAdapter {
+  constructor(config = {}) {
+    this.config = config;
+    this.name = config.name || 'unknown';
+  }
+
+  /**
+   * Review code for issues and suggestions
+   * @param {string} code - Code to review
+   * @param {Object} context - Additional context
+   * @returns {Promise<Object>} Standardized review response
+   */
+  async review(code, context = {}) {
+    throw new Error('Not implemented: review');
+  }
+
+  /**
+   * Analyze codebase for patterns
+   * @param {string} codebase - Codebase path or content
+   * @param {string} query - Analysis query
+   * @returns {Promise<Object>} Analysis result
+   */
+  async analyze(codebase, query) {
+    throw new Error('Not implemented: analyze');
+  }
+
+  /**
+   * Get current usage stats
+   * @returns {Object} Usage stats { daily, monthly, requests }
+   */
+  getUsage() {
+    return { daily: 0, monthly: 0, requests: 0 };
+  }
+
+  /**
+   * Estimate cost for a request
+   * @param {number} tokens - Estimated tokens
+   * @returns {number} Estimated cost in USD
+   */
+  estimateCost(tokens) {
+    return 0;
+  }
+
+  /**
+   * Check if adapter can afford a request
+   * @param {number} estimatedCost - Estimated cost
+   * @returns {boolean} Whether request is within budget
+   */
+  canAfford(estimatedCost = 0) {
+    return true;
+  }
+
+  /**
+   * Create empty but valid response
+   * @returns {Object} Empty review response
+   */
+  createEmptyResponse() {
+    return {
+      issues: [],
+      suggestions: [],
+      score: 100,
+      model: this.name,
+      tokensUsed: 0,
+      cost: 0,
+    };
+  }
+
+  /**
+   * Validate response against schema
+   * @param {Object} response - Response to validate
+   * @returns {boolean} Whether response is valid
+   */
+  static validateResponse(response) {
+    if (!response) return false;
+
+    // Check required fields
+    for (const [field, type] of Object.entries(REVIEW_RESPONSE_SCHEMA)) {
+      if (!(field in response)) return false;
+
+      if (type === 'array' && !Array.isArray(response[field])) return false;
+      if (type === 'number' && typeof response[field] !== 'number') return false;
+      if (type === 'string' && typeof response[field] !== 'string') return false;
+    }
+
+    // Validate score range
+    if (response.score < 0 || response.score > 100) return false;
+
+    return true;
+  }
+}
+
+module.exports = {
+  BaseAdapter,
+  REVIEW_RESPONSE_SCHEMA,
+};

package/server/lib/adapters/base-adapter.test.js

@@ -0,0 +1,90 @@
+import { describe, it, expect } from 'vitest';
+import { BaseAdapter, REVIEW_RESPONSE_SCHEMA } from './base-adapter.js';
+
+describe('BaseAdapter', () => {
+  describe('interface', () => {
+    it('has required methods', () => {
+      const adapter = new BaseAdapter({ name: 'test' });
+
+      expect(typeof adapter.review).toBe('function');
+      expect(typeof adapter.analyze).toBe('function');
+      expect(typeof adapter.getUsage).toBe('function');
+      expect(typeof adapter.estimateCost).toBe('function');
+      expect(typeof adapter.canAfford).toBe('function');
+    });
+
+    it('has name property', () => {
+      const adapter = new BaseAdapter({ name: 'claude' });
+      expect(adapter.name).toBe('claude');
+    });
+
+    it('throws on unimplemented review', async () => {
+      const adapter = new BaseAdapter({ name: 'test' });
+      await expect(adapter.review('')).rejects.toThrow('Not implemented');
+    });
+
+    it('throws on unimplemented analyze', async () => {
+      const adapter = new BaseAdapter({ name: 'test' });
+      await expect(adapter.analyze('', '')).rejects.toThrow('Not implemented');
+    });
+  });
+
+  describe('response validation', () => {
+    it('validates correct response', () => {
+      const response = {
+        issues: [{ id: '1', severity: 'high', message: 'Test' }],
+        suggestions: ['Suggestion 1'],
+        score: 75,
+        model: 'claude',
+        tokensUsed: 1000,
+        cost: 0.01,
+      };
+
+      expect(BaseAdapter.validateResponse(response)).toBe(true);
+    });
+
+    it('rejects missing required fields', () => {
+      const response = {
+        issues: [],
+        // missing: suggestions, score, model, tokensUsed, cost
+      };
+
+      expect(BaseAdapter.validateResponse(response)).toBe(false);
+    });
+
+    it('rejects invalid score', () => {
+      const response = {
+        issues: [],
+        suggestions: [],
+        score: 150, // Invalid: > 100
+        model: 'test',
+        tokensUsed: 0,
+        cost: 0,
+      };
+
+      expect(BaseAdapter.validateResponse(response)).toBe(false);
+    });
+  });
+
+  describe('REVIEW_RESPONSE_SCHEMA', () => {
+    it('defines all required fields', () => {
+      expect(REVIEW_RESPONSE_SCHEMA).toHaveProperty('issues');
+      expect(REVIEW_RESPONSE_SCHEMA).toHaveProperty('suggestions');
+      expect(REVIEW_RESPONSE_SCHEMA).toHaveProperty('score');
+      expect(REVIEW_RESPONSE_SCHEMA).toHaveProperty('model');
+      expect(REVIEW_RESPONSE_SCHEMA).toHaveProperty('tokensUsed');
+      expect(REVIEW_RESPONSE_SCHEMA).toHaveProperty('cost');
+    });
+  });
+
+  describe('createEmptyResponse', () => {
+    it('creates valid empty response', () => {
+      const adapter = new BaseAdapter({ name: 'test' });
+      const response = adapter.createEmptyResponse();
+
+      expect(BaseAdapter.validateResponse(response)).toBe(true);
+      expect(response.issues).toEqual([]);
+      expect(response.model).toBe('test');
+    });
+  });
+});