b868d1917e
* 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
77 lines
2.5 KiB
JSON
77 lines
2.5 KiB
JSON
{
|
|
"name": "vibe-kanban",
|
|
"private": true,
|
|
"version": "0.0.55",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc && vite build",
|
|
"check": "tsc --noEmit",
|
|
"preview": "vite preview",
|
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 100",
|
|
"lint:fix": "eslint . --ext ts,tsx --fix",
|
|
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
|
|
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\""
|
|
},
|
|
"dependencies": {
|
|
"@codemirror/lang-json": "^6.0.2",
|
|
"@codemirror/language": "^6.11.2",
|
|
"@codemirror/lint": "^6.8.5",
|
|
"@codemirror/view": "^6.38.1",
|
|
"@dnd-kit/core": "^6.3.1",
|
|
"@dnd-kit/modifiers": "^9.0.0",
|
|
"@git-diff-view/file": "^0.0.30",
|
|
"@git-diff-view/react": "^0.0.30",
|
|
"@microsoft/fetch-event-source": "^2.0.1",
|
|
"@radix-ui/react-dropdown-menu": "^2.1.15",
|
|
"@radix-ui/react-label": "^2.1.7",
|
|
"@radix-ui/react-portal": "^1.1.9",
|
|
"@radix-ui/react-select": "^2.2.5",
|
|
"@radix-ui/react-separator": "^1.1.7",
|
|
"@radix-ui/react-slot": "^1.2.3",
|
|
"@radix-ui/react-tabs": "^1.1.12",
|
|
"@radix-ui/react-tooltip": "^1.2.7",
|
|
"@sentry/react": "^9.34.0",
|
|
"@sentry/vite-plugin": "^3.5.0",
|
|
"@tailwindcss/typography": "^0.5.16",
|
|
"@types/react-window": "^1.8.8",
|
|
"@uiw/react-codemirror": "^4.25.1",
|
|
"class-variance-authority": "^0.7.0",
|
|
"click-to-react-component": "^1.1.2",
|
|
"clsx": "^2.0.0",
|
|
"diff": "^8.0.2",
|
|
"fancy-ansi": "^0.1.3",
|
|
"lucide-react": "^0.539.0",
|
|
"react": "^18.2.0",
|
|
"react-diff-viewer-continued": "^3.4.0",
|
|
"react-dom": "^18.2.0",
|
|
"react-markdown": "^10.1.0",
|
|
"react-router-dom": "^6.8.1",
|
|
"react-use-measure": "^2.1.7",
|
|
"react-virtuoso": "^4.13.0",
|
|
"react-window": "^1.8.11",
|
|
"rfc6902": "^5.1.2",
|
|
"tailwind-merge": "^2.2.0",
|
|
"tailwindcss-animate": "^1.0.7"
|
|
},
|
|
"devDependencies": {
|
|
"@types/react": "^18.2.43",
|
|
"@types/react-dom": "^18.2.17",
|
|
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
|
"@typescript-eslint/parser": "^6.21.0",
|
|
"@vitejs/plugin-react": "^4.2.1",
|
|
"autoprefixer": "^10.4.16",
|
|
"eslint": "^8.55.0",
|
|
"eslint-config-prettier": "^10.1.5",
|
|
"eslint-plugin-prettier": "^5.5.0",
|
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
"eslint-plugin-react-refresh": "^0.4.5",
|
|
"eslint-plugin-unused-imports": "^4.1.4",
|
|
"postcss": "^8.4.32",
|
|
"prettier": "^3.6.1",
|
|
"tailwindcss": "^3.4.0",
|
|
"typescript": "^5.9.2",
|
|
"vite": "^5.0.8"
|
|
}
|
|
}
|