Louis Knight-Webb b868d1917e Raw logs should render ANSI (vibe-kanban) (#520) ...

* Perfect! Let me summarize what has been successfully implemented:

## ✅ Implementation Complete

I've successfully implemented a **unified log rendering architecture** with ANSI support across the entire application:

### 🎯 What Was Accomplished

1. **✅ Added `fancy-ansi` dependency** - React 18 compatible ANSI rendering library
2. **✅ Created `RawLogText` component** - Single, unified component for all raw log rendering
3. **✅ Added ANSI color CSS classes** - Consistent theming with Tailwind classes
4. **✅ Refactored all log rendering components**:
   - **StdoutEntry.tsx** - Now uses RawLogText with `channel="stdout"`
   - **StderrEntry.tsx** - Now uses RawLogText with `channel="stderr"`  
   - **ProcessLogsViewer.tsx** - Replaced `formatLogLine()` with RawLogText
   - **ProcessCard.tsx** - Updated raw log display to use RawLogText
5. **✅ Added comprehensive tests** - Unit tests for the RawLogText component
6. **✅ Verified build success** - All TypeScript checks pass

### 🌟 Key Features

- **ANSI Escape Code Rendering**: Raw logs like `[0m[1][0m   [32m[1mVITE[22m v5.4.19[39m` now render with proper colors
- **Smart STDERR Handling**: Only applies red fallback color when no ANSI codes are present
- **Flexible HTML Elements**: Supports both `<div>` and `<span>` rendering
- **Performance Optimized**: Uses `memo()` and efficient ANSI detection
- **Consistent Styling**: Single source of truth for all log rendering with proper whitespace preservation

### 📁 Files Modified

- `frontend/package.json` - Added `fancy-ansi` dependency
- `frontend/src/components/common/RawLogText.tsx` - **New unified component**
- `frontend/src/styles/index.css` - Added ANSI color CSS classes
- `frontend/src/components/logs/StdoutEntry.tsx` - Refactored to use RawLogText
- `frontend/src/components/logs/StderrEntry.tsx` - Refactored to use RawLogText  
- `frontend/src/components/tasks/TaskDetails/ProcessLogsViewer.tsx` - Refactored to use RawLogText
- `frontend/src/components/tasks/TaskDetails/ProcessCard.tsx` - Refactored to use RawLogText
- `frontend/src/components/common/__tests__/RawLogText.test.tsx` - **New test file**

The implementation follows all the best practices identified by the Oracle and provides a robust, maintainable solution for ANSI log rendering across the entire application. Raw logs will now display with proper colors, formatting, and styling instead of showing escape codes as plain text.

* Cleanup script changes for task attempt 287442b9-2ddf-4f29-9b91-ddc18e4a96b7

* lockfile

* delete test

2025-08-19 14:19:50 +01:00

202 KiB

Raw Blame History

View Raw