tlc-claude-code 1.2.26 → 1.2.27

package/dashboard/dist/components/PlanView.d.ts

@@ -6,6 +6,11 @@ export interface Task {
     criteriaDone: number;
     criteriaTotal: number;
 }
+export interface TableData {
+    headers: string[];
+    rows: string[][];
+    columnWidths: number[];
+}
 export interface Phase {
     number: number;
     name: string;
@@ -15,6 +20,7 @@ export interface Phase {
     tasksTotal: number;
     progress: number;
     tasks: Task[];
+    tables: TableData[];
 }
 export interface Milestone {
     name: string;
@@ -29,4 +35,5 @@ export interface PlanViewProps {
 export declare function PlanView({ expandedPhase, filter }?: PlanViewProps): import("react/jsx-runtime").JSX.Element;
 export declare function parseMilestones(content: string): Milestone[];
 export declare function parsePhases(roadmapContent: string, planContents: Record<number, string>): Phase[];
+export declare function parseTables(content: string): TableData[];
 export declare function parseTasks(content: string): Task[];

package/dashboard/dist/components/PlanView.js

@@ -84,7 +84,23 @@ function PhaseView({ phase, expanded }) {
     const displayName = phase.name.length > maxNameLength
         ? phase.name.slice(0, maxNameLength - 1) + '…'
         : phase.name;
-    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " "] }), _jsxs(Text, { color: phase.status === 'in_progress' ? 'cyan' : 'white', children: [phase.number, ". ", displayName] }), _jsx(Text, { color: "gray", children: " " }), _jsx(Text, { color: phase.progress === 100 ? 'green' : 'gray', children: progressBar }), _jsxs(Text, { color: "gray", children: [" ", taskInfo] }), phase.tasksInProgress > 0 && (_jsxs(Text, { color: "yellow", children: [" (", phase.tasksInProgress, " active)"] }))] }), expanded && phase.tasks.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, marginTop: 0, children: phase.tasks.map(task => (_jsx(TaskView, { task: task }, task.number))) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " "] }), _jsxs(Text, { color: phase.status === 'in_progress' ? 'cyan' : 'white', children: [phase.number, ". ", displayName] }), _jsx(Text, { color: "gray", children: " " }), _jsx(Text, { color: phase.progress === 100 ? 'green' : 'gray', children: progressBar }), _jsxs(Text, { color: "gray", children: [" ", taskInfo] }), phase.tasksInProgress > 0 && (_jsxs(Text, { color: "yellow", children: [" (", phase.tasksInProgress, " active)"] }))] }), expanded && (phase.tasks.length > 0 || phase.tables.length > 0) && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 0, children: [phase.tasks.map(task => (_jsx(TaskView, { task: task }, task.number))), phase.tables.map((table, idx) => (_jsx(TableView, { table: table }, idx)))] }))] }));
+}
+function TableView({ table }) {
+    const { headers, rows, columnWidths } = table;
+    // Render border line
+    const renderBorder = (type) => {
+        const chars = type === 'top' ? ['┌', '┬', '┐', '─'] :
+            type === 'mid' ? ['├', '┼', '┤', '─'] :
+                ['└', '┴', '┘', '─'];
+        const line = chars[0] + columnWidths.map(w => chars[3].repeat(w + 2)).join(chars[1]) + chars[2];
+        return _jsx(Text, { color: "gray", children: line });
+    };
+    // Render row
+    const renderRow = (cells, isHeader = false) => {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "\u2502" }), cells.map((cell, idx) => (_jsxs(Box, { children: [_jsxs(Text, { color: isHeader ? 'cyan' : 'white', bold: isHeader, children: [' ', cell.padEnd(columnWidths[idx]), ' '] }), _jsx(Text, { color: "gray", children: "\u2502" })] }, idx)))] }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [renderBorder('top'), renderRow(headers, true), renderBorder('mid'), rows.map((row, idx) => (_jsx(Box, { flexDirection: "column", children: renderRow(row) }, idx))), renderBorder('bottom')] }));
 }
 function TaskView({ task }) {
     const statusIcon = task.status === 'completed' ? '✓' :
@@ -217,6 +233,7 @@ export function parsePhases(roadmapContent, planContents) {
             // Parse tasks from PLAN file if available
             const planContent = planContents[phaseNum] || '';
             const tasks = parseTasks(planContent);
+            const tables = parseTables(planContent);
             const tasksDone = tasks.filter(t => t.status === 'completed').length;
             const tasksInProgress = tasks.filter(t => t.status === 'in_progress').length;
             const tasksTotal = tasks.length;
@@ -229,12 +246,67 @@ export function parsePhases(roadmapContent, planContents) {
                 tasksInProgress,
                 tasksTotal,
                 progress,
-                tasks
+                tasks,
+                tables
             });
         }
     }
     return phases;
 }
+export function parseTables(content) {
+    const tables = [];
+    const lines = content.split('\n');
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Check if this line looks like a table header row (contains |)
+        if (line.includes('|') && line.trim().startsWith('|')) {
+            // Check if next line is a separator row (contains |---|)
+            const nextLine = lines[i + 1];
+            if (nextLine && nextLine.match(/^\|[\s-:|]+\|$/)) {
+                // This is a table - parse it
+                const headers = parseTableRow(line);
+                const rows = [];
+                // Skip header and separator
+                i += 2;
+                // Parse data rows
+                while (i < lines.length && lines[i].includes('|') && lines[i].trim().startsWith('|')) {
+                    const row = parseTableRow(lines[i]);
+                    if (row.length > 0) {
+                        rows.push(row);
+                    }
+                    i++;
+                }
+                // Calculate column widths
+                const columnWidths = headers.map((h, idx) => {
+                    const headerWidth = h.length;
+                    const maxRowWidth = rows.reduce((max, row) => {
+                        const cellWidth = (row[idx] || '').length;
+                        return Math.max(max, cellWidth);
+                    }, 0);
+                    return Math.max(headerWidth, maxRowWidth, 3);
+                });
+                tables.push({ headers, rows, columnWidths });
+                continue;
+            }
+        }
+        i++;
+    }
+    return tables;
+}
+function parseTableRow(line) {
+    // Remove leading/trailing pipes and split by |
+    const trimmed = line.trim();
+    if (!trimmed.startsWith('|') || !trimmed.endsWith('|')) {
+        return [];
+    }
+    // Split by | and clean up each cell
+    const cells = trimmed
+        .slice(1, -1) // Remove outer pipes
+        .split('|')
+        .map(cell => cell.trim());
+    return cells;
+}
 export function parseTasks(content) {
     const tasks = [];
     const lines = content.split('\n');

package/dashboard/dist/components/PlanView.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render } from 'ink-testing-library';
-import { PlanView, parseMilestones, parsePhases, parseTasks } from './PlanView.js';
+import { PlanView, parseMilestones, parsePhases, parseTasks, parseTables } from './PlanView.js';
 import { vol } from 'memfs';
 // Mock fs modules
 vi.mock('fs', async () => {
@@ -171,6 +171,75 @@ Just a simple task`;
             expect(tasks[0].criteriaTotal).toBe(0);
         });
     });
+    describe('parseTables', () => {
+        it('parses markdown tables', () => {
+            const content = `# Phase Info
+
+| Feature | Status | Owner |
+|---------|--------|-------|
+| Auth    | Done   | Alice |
+| API     | WIP    | Bob   |
+`;
+            const tables = parseTables(content);
+            expect(tables).toHaveLength(1);
+            expect(tables[0].headers).toEqual(['Feature', 'Status', 'Owner']);
+            expect(tables[0].rows).toHaveLength(2);
+            expect(tables[0].rows[0]).toEqual(['Auth', 'Done', 'Alice']);
+            expect(tables[0].rows[1]).toEqual(['API', 'WIP', 'Bob']);
+        });
+        it('calculates column widths', () => {
+            const content = `| Short | Very Long Header |
+|-------|------------------|
+| A     | B                |
+| Longer Cell | C        |
+`;
+            const tables = parseTables(content);
+            expect(tables[0].columnWidths[0]).toBeGreaterThanOrEqual(11); // "Longer Cell"
+            expect(tables[0].columnWidths[1]).toBeGreaterThanOrEqual(16); // "Very Long Header"
+        });
+        it('handles multiple tables', () => {
+            const content = `## Table 1
+
+| A | B |
+|---|---|
+| 1 | 2 |
+
+## Table 2
+
+| X | Y | Z |
+|---|---|---|
+| a | b | c |
+`;
+            const tables = parseTables(content);
+            expect(tables).toHaveLength(2);
+            expect(tables[0].headers).toEqual(['A', 'B']);
+            expect(tables[1].headers).toEqual(['X', 'Y', 'Z']);
+        });
+        it('handles empty content', () => {
+            const tables = parseTables('');
+            expect(tables).toHaveLength(0);
+        });
+        it('handles content with no tables', () => {
+            const content = `# Just Text
+
+Some paragraph here.
+
+- List item 1
+- List item 2
+`;
+            const tables = parseTables(content);
+            expect(tables).toHaveLength(0);
+        });
+        it('handles tables with alignment markers', () => {
+            const content = `| Left | Center | Right |
+|:-----|:------:|------:|
+| A    | B      | C     |
+`;
+            const tables = parseTables(content);
+            expect(tables).toHaveLength(1);
+            expect(tables[0].headers).toEqual(['Left', 'Center', 'Right']);
+        });
+    });
     describe('component rendering', () => {
         it('shows loading state initially', () => {
             const { lastFrame } = render(_jsx(PlanView, {}));

package/package.json

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

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)) {