tlc-claude-code 1.2.26 → 1.2.28

package/server/dashboard/index.html

@@ -248,6 +248,60 @@
       color: #e6edf3;
       margin-right: 10px;
     }
+    .image-drop-zone {
+      border: 2px dashed #30363d;
+      border-radius: 8px;
+      padding: 15px;
+      margin-bottom: 10px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s;
+      min-height: 60px;
+    }
+    .image-drop-zone:hover, .image-drop-zone.dragover {
+      border-color: #58a6ff;
+      background: rgba(88, 166, 255, 0.1);
+    }
+    .image-drop-zone .drop-hint {
+      color: #8b949e;
+      font-size: 13px;
+    }
+    .image-previews {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 10px;
+    }
+    .image-preview {
+      position: relative;
+      width: 80px;
+      height: 80px;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid #30363d;
+    }
+    .image-preview img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .image-preview .remove-btn {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      width: 20px;
+      height: 20px;
+      background: rgba(248, 81, 73, 0.9);
+      border: none;
+      border-radius: 50%;
+      color: white;
+      cursor: pointer;
+      font-size: 12px;
+      line-height: 18px;
+    }
+    .image-preview .remove-btn:hover {
+      background: #f85149;
+    }
 
     /* Logs Panel */
     .logs-tabs {
@@ -581,6 +635,13 @@
           <div class="bug-form">
             <h3>Report New Bug</h3>
             <textarea id="bug-desc" placeholder="Describe the bug..."></textarea>
+            <div class="image-drop-zone" id="image-drop-zone" onclick="document.getElementById('image-input').click()">
+              <input type="file" id="image-input" accept="image/*" multiple style="display:none" onchange="handleImageSelect(event)">
+              <div class="drop-hint" id="drop-hint">
+                📷 Paste (Ctrl+V) or drop images here
+              </div>
+              <div class="image-previews" id="image-previews"></div>
+            </div>
             <div>
               <select id="bug-severity">
                 <option value="low">Low</option>
@@ -589,6 +650,7 @@
                 <option value="critical">Critical</option>
               </select>
               <button class="btn btn-primary" onclick="submitBug()">Submit Bug</button>
+              <button class="btn" onclick="clearImages()" id="clear-images-btn" style="display:none">Clear Images</button>
             </div>
           </div>
           <div id="bugs-list">
@@ -843,6 +905,93 @@
       }
     }
 
+    // Bug image handling
+    let bugImages = [];
+
+    function setupImageHandlers() {
+      const dropZone = document.getElementById('image-drop-zone');
+
+      // Paste handler (global)
+      document.addEventListener('paste', (e) => {
+        const items = e.clipboardData?.items;
+        if (!items) return;
+
+        for (const item of items) {
+          if (item.type.startsWith('image/')) {
+            e.preventDefault();
+            const file = item.getAsFile();
+            if (file) addImage(file);
+          }
+        }
+      });
+
+      // Drag & drop
+      dropZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropZone.classList.add('dragover');
+      });
+      dropZone.addEventListener('dragleave', () => {
+        dropZone.classList.remove('dragover');
+      });
+      dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropZone.classList.remove('dragover');
+        const files = e.dataTransfer.files;
+        for (const file of files) {
+          if (file.type.startsWith('image/')) addImage(file);
+        }
+      });
+    }
+
+    function handleImageSelect(e) {
+      const files = e.target.files;
+      for (const file of files) {
+        if (file.type.startsWith('image/')) addImage(file);
+      }
+      e.target.value = ''; // Reset for re-selection
+    }
+
+    function addImage(file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        bugImages.push({ name: file.name, data: e.target.result });
+        renderImagePreviews();
+      };
+      reader.readAsDataURL(file);
+    }
+
+    function removeImage(index) {
+      bugImages.splice(index, 1);
+      renderImagePreviews();
+    }
+
+    function clearImages() {
+      bugImages = [];
+      renderImagePreviews();
+    }
+
+    function renderImagePreviews() {
+      const container = document.getElementById('image-previews');
+      const hint = document.getElementById('drop-hint');
+      const clearBtn = document.getElementById('clear-images-btn');
+
+      if (bugImages.length === 0) {
+        container.innerHTML = '';
+        hint.style.display = 'block';
+        clearBtn.style.display = 'none';
+        return;
+      }
+
+      hint.style.display = 'none';
+      clearBtn.style.display = 'inline-block';
+      container.innerHTML = bugImages.map((img, i) => `
+        <div class="image-preview">
+          <img src="${img.data}" alt="${img.name}" title="${img.name}">
+          <button class="remove-btn" onclick="event.stopPropagation(); removeImage(${i})">×</button>
+        </div>
+      `).join('');
+    }
+
     async function submitBug() {
       const desc = document.getElementById('bug-desc').value.trim();
       const severity = document.getElementById('bug-severity').value;
@@ -852,12 +1001,17 @@
         const res = await fetch('/api/bug', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ description: desc, severity })
+          body: JSON.stringify({
+            description: desc,
+            severity,
+            images: bugImages.map(img => img.data)
+          })
         });
         const data = await res.json();
         if (data.success) {
-          alert(`Bug ${data.bugId} created!`);
+          alert(`Bug ${data.bugId} created!` + (bugImages.length ? ` (${bugImages.length} image${bugImages.length > 1 ? 's' : ''} attached)` : ''));
           document.getElementById('bug-desc').value = '';
+          clearImages();
           refreshBugs();
         }
       } catch (e) {
@@ -1060,6 +1214,7 @@
     // Initialize
     connect();
     refreshAll();
+    setupImageHandlers();
     setInterval(refreshStats, 30000);
     setInterval(refreshProgress, 30000);
   </script>

package/server/index.js

@@ -373,7 +373,7 @@ app.post('/api/playwright', (req, res) => {
 });
 
 app.post('/api/bug', (req, res) => {
-  const { description, url, screenshot, severity } = req.body;
+  const { description, url, screenshot, severity, images } = req.body;
 
   if (!description) {
     return res.status(400).json({ error: 'Description required' });
@@ -386,40 +386,57 @@ app.post('/api/bug', (req, res) => {
   const nextId = bugs.length + 1;
   const bugId = `BUG-${String(nextId).padStart(3, '0')}`;
 
+  // Ensure .planning directory exists
+  const planningDir = path.join(PROJECT_DIR, '.planning');
+  if (!fs.existsSync(planningDir)) {
+    fs.mkdirSync(planningDir, { recursive: true });
+  }
+
+  // Handle multiple images (new) or single screenshot (legacy)
+  const allImages = images || (screenshot ? [screenshot] : []);
+  const savedImages = [];
+
+  if (allImages.length > 0) {
+    const screenshotDir = path.join(planningDir, 'screenshots');
+    if (!fs.existsSync(screenshotDir)) {
+      fs.mkdirSync(screenshotDir, { recursive: true });
+    }
+
+    allImages.forEach((imgData, index) => {
+      if (imgData && imgData.startsWith('data:image')) {
+        const ext = imgData.includes('image/png') ? 'png' : 'jpg';
+        const filename = allImages.length === 1
+          ? `${bugId}.${ext}`
+          : `${bugId}-${index + 1}.${ext}`;
+        const base64Data = imgData.split(',')[1];
+        fs.writeFileSync(
+          path.join(screenshotDir, filename),
+          Buffer.from(base64Data, 'base64')
+        );
+        savedImages.push(`screenshots/${filename}`);
+      }
+    });
+  }
+
   // Create bug entry
   const timestamp = new Date().toISOString().split('T')[0];
+  const imagesMarkdown = savedImages.length > 0
+    ? `- **Attachments:** ${savedImages.map(img => `![](${img})`).join(' ')}`
+    : '';
+
   const bugEntry = `
 ### ${bugId}: ${description.split('\n')[0].slice(0, 50)} [open]
 
 - **Reported:** ${timestamp}
 - **Severity:** ${severity || 'medium'}
 - **URL:** ${url || 'N/A'}
-${screenshot ? `- **Screenshot:** screenshots/${bugId}.png` : ''}
+${imagesMarkdown}
 
 ${description}
 
 ---
 `;
 
-  // Ensure .planning directory exists
-  const planningDir = path.join(PROJECT_DIR, '.planning');
-  if (!fs.existsSync(planningDir)) {
-    fs.mkdirSync(planningDir, { recursive: true });
-  }
-
-  // Save screenshot if provided
-  if (screenshot && screenshot.startsWith('data:image')) {
-    const screenshotDir = path.join(planningDir, 'screenshots');
-    if (!fs.existsSync(screenshotDir)) {
-      fs.mkdirSync(screenshotDir, { recursive: true });
-    }
-    const base64Data = screenshot.split(',')[1];
-    fs.writeFileSync(
-      path.join(screenshotDir, `${bugId}.png`),
-      Buffer.from(base64Data, 'base64')
-    );
-  }
-
   // Append to BUGS.md
   let content = '';
   if (fs.existsSync(bugsFile)) {

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');
+    });
+  });
+});

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

@@ -0,0 +1,141 @@
+/**
+ * Claude Adapter - Adapter for Claude API
+ * Note: In TLC context, Claude is subscription-based so no per-request cost
+ */
+
+const { BaseAdapter } = require('./base-adapter.js');
+
+// Latest model: claude-opus-4-5-20251101 (Claude Opus 4.5)
+const CLAUDE_MODEL = 'claude-opus-4-5-20251101';
+
+const CLAUDE_PRICING = {
+  // Pricing per 1M tokens (Claude Opus 4.5)
+  inputPerMillion: 15.00,
+  outputPerMillion: 75.00,
+};
+
+class ClaudeAdapter extends BaseAdapter {
+  constructor(config = {}) {
+    super({
+      name: 'claude',
+      ...config,
+    });
+    this.budgetTracker = config.budgetTracker || null;
+    this.pricing = config.pricing || CLAUDE_PRICING;
+    this.model = config.model || CLAUDE_MODEL;
+    this.trackCost = config.trackCost !== false;
+  }
+
+  /**
+   * 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 = {}) {
+    if (!code || code.trim() === '') {
+      return this.createEmptyResponse();
+    }
+
+    // Check budget if tracking
+    const estimatedTokens = this.estimateTokens(code);
+    const estimatedCost = this.estimateCost(estimatedTokens);
+
+    if (this.trackCost && !this.canAfford(estimatedCost)) {
+      throw new Error('Budget exceeded for Claude');
+    }
+
+    try {
+      // Simulate API call - in real implementation, call Claude API
+      const result = await this.callAPI(code, context);
+
+      // Record cost if tracking
+      if (this.trackCost && this.budgetTracker) {
+        this.budgetTracker.record('claude', result.cost || 0);
+      }
+
+      return result;
+    } catch (error) {
+      // Return empty response on error, don't throw
+      return {
+        ...this.createEmptyResponse(),
+        error: error.message,
+      };
+    }
+  }
+
+  /**
+   * Call Claude API (mock implementation)
+   * @param {string} code - Code to review
+   * @param {Object} context - Additional context
+   * @returns {Promise<Object>} API response
+   */
+  async callAPI(code, context) {
+    // This is a mock - in production, call actual Claude API
+    // For now, simulate a response
+    const tokensUsed = this.estimateTokens(code);
+    const cost = this.estimateCost(tokensUsed);
+
+    return {
+      issues: [],
+      suggestions: [],
+      score: 100,
+      model: this.name,
+      tokensUsed,
+      cost,
+    };
+  }
+
+  /**
+   * Estimate tokens for code
+   * @param {string} code - Code to estimate
+   * @returns {number} Estimated tokens
+   */
+  estimateTokens(code) {
+    // Rough estimate: ~4 chars per token for code
+    return Math.ceil(code.length / 4);
+  }
+
+  /**
+   * Estimate cost for tokens
+   * @param {number} tokens - Number of tokens
+   * @returns {number} Estimated cost in USD
+   */
+  estimateCost(tokens) {
+    // Assume 50% input, 50% output for review
+    const inputCost = (tokens * 0.5 * this.pricing.inputPerMillion) / 1_000_000;
+    const outputCost = (tokens * 0.5 * this.pricing.outputPerMillion) / 1_000_000;
+    return inputCost + outputCost;
+  }
+
+  /**
+   * Check if adapter can afford a request
+   * @param {number} estimatedCost - Estimated cost
+   * @returns {boolean} Whether request is within budget
+   */
+  canAfford(estimatedCost = 0) {
+    if (!this.trackCost || !this.budgetTracker) {
+      return true;
+    }
+
+    const budgetConfig = this.config.budget || { budgetDaily: 10, budgetMonthly: 100 };
+    return this.budgetTracker.canSpend('claude', estimatedCost, budgetConfig);
+  }
+
+  /**
+   * Get current usage stats
+   * @returns {Object} Usage stats
+   */
+  getUsage() {
+    if (!this.budgetTracker) {
+      return { daily: 0, monthly: 0, requests: 0 };
+    }
+    return this.budgetTracker.getUsage('claude');
+  }
+}
+
+module.exports = {
+  ClaudeAdapter,
+  CLAUDE_PRICING,
+  CLAUDE_MODEL,
+};