codeep 1.0.52 → 1.0.54

package/dist/components/AgentProgress.d.ts

@@ -15,6 +15,7 @@ export declare const AgentProgress: React.FC<AgentProgressProps>;
 /**
  * Live Code Stream component - shows ALL code being written/edited by agent
  * Displayed ABOVE the AgentProgress component
+ * Enhanced with better syntax highlighting and visual organization
  */
 interface LiveCodeStreamProps {
     actions: ActionLog[];

package/dist/components/AgentProgress.js

@@ -42,30 +42,133 @@ export const AgentProgress = ({ isRunning, iteration, maxIterations, actions, cu
     const totalFileChanges = fileChanges.created + fileChanges.modified + fileChanges.deleted;
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: dryRun ? 'yellow' : '#f02a30', padding: 1, marginY: 1, children: [_jsx(Box, { children: isRunning ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: dryRun ? 'yellow' : '#f02a30', children: ["[", SPINNER_FRAMES[spinnerFrame], "]"] }), _jsxs(Text, { color: dryRun ? 'yellow' : '#f02a30', bold: true, children: [' ', dryRun ? 'DRY RUN' : 'AGENT', ' '] }), _jsx(Text, { color: "gray", children: "|" }), _jsxs(Text, { color: "cyan", children: [" step ", iteration] }), _jsx(Text, { color: "gray", children: " | " }), actionCounts.reads > 0 && _jsxs(Text, { color: "blue", children: [actionCounts.reads, "R "] }), actionCounts.writes > 0 && _jsxs(Text, { color: "green", children: [actionCounts.writes, "W "] }), actionCounts.edits > 0 && _jsxs(Text, { color: "yellow", children: [actionCounts.edits, "E "] }), actionCounts.commands > 0 && _jsxs(Text, { color: "magenta", children: [actionCounts.commands, "C "] }), actionCounts.searches > 0 && _jsxs(Text, { color: "cyan", children: [actionCounts.searches, "S "] }), actions.length === 0 && _jsx(Text, { color: "gray", children: "0 actions" })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "green", bold: true, children: "[DONE] " }), _jsx(Text, { children: "Agent completed" }), _jsx(Text, { color: "gray", children: " | " }), _jsxs(Text, { color: "white", children: [actions.length, " actions"] })] })) }), isRunning && currentAction && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "white", bold: true, children: "Now: " }), _jsxs(Text, { color: getActionColor(currentAction.type), children: [getActionLabel(currentAction.type), " "] }), _jsx(Text, { color: "white", children: formatTarget(currentAction.target) })] })), _jsx(Text, { color: "gray", children: '─'.repeat(50) }), recentActions.length > 1 && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", dimColor: true, children: "Recent:" }), recentActions.slice(0, -1).map((action, i) => (_jsx(ActionItem, { action: action }, i)))] })), isRunning && totalFileChanges > 0 && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Changes: " }), fileChanges.created > 0 && _jsxs(Text, { color: "green", children: ["+", fileChanges.created, " "] }), fileChanges.modified > 0 && _jsxs(Text, { color: "yellow", children: ["~", fileChanges.modified, " "] }), fileChanges.deleted > 0 && _jsxs(Text, { color: "red", children: ["-", fileChanges.deleted] })] })), isRunning && currentThinking && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["> ", currentThinking.slice(0, 80), currentThinking.length > 80 ? '...' : ''] }) })), isRunning && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Press " }), _jsx(Text, { color: "#f02a30", children: "Esc" }), _jsx(Text, { color: "gray", children: " to stop" })] })), !isRunning && totalFileChanges > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "File Changes:" }), fileChanges.created > 0 && (_jsxs(Text, { color: "green", children: ["  + ", fileChanges.created, " file(s) created"] })), fileChanges.modified > 0 && (_jsxs(Text, { color: "yellow", children: ["  ~ ", fileChanges.modified, " file(s) modified"] })), fileChanges.deleted > 0 && (_jsxs(Text, { color: "red", children: ["  - ", fileChanges.deleted, " file(s) deleted"] }))] }))] }));
 };
-// Helper function for syntax highlighting
-const getCodeColor = (line) => {
+// Get file extension for language detection
+const getFileExtension = (filename) => {
+    const parts = filename.split('.');
+    return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+};
+// Get language label from extension
+const getLanguageLabel = (ext) => {
+    const langMap = {
+        'js': 'JavaScript',
+        'jsx': 'React JSX',
+        'ts': 'TypeScript',
+        'tsx': 'React TSX',
+        'html': 'HTML',
+        'css': 'CSS',
+        'scss': 'SCSS',
+        'json': 'JSON',
+        'md': 'Markdown',
+        'py': 'Python',
+        'rb': 'Ruby',
+        'go': 'Go',
+        'rs': 'Rust',
+        'java': 'Java',
+        'kt': 'Kotlin',
+        'swift': 'Swift',
+        'php': 'PHP',
+        'sql': 'SQL',
+        'sh': 'Shell',
+        'bash': 'Bash',
+        'yml': 'YAML',
+        'yaml': 'YAML',
+        'xml': 'XML',
+        'vue': 'Vue',
+        'svelte': 'Svelte',
+    };
+    return langMap[ext] || ext.toUpperCase();
+};
+// Enhanced syntax highlighting with more colors
+const getCodeColor = (line, ext) => {
     const trimmed = line.trim();
-    // Comments
-    if (trimmed.startsWith('//') || trimmed.startsWith('#') || trimmed.startsWith('/*') || trimmed.startsWith('*')) {
+    // Empty lines
+    if (!trimmed)
+        return 'gray';
+    // Comments - multiple styles
+    if (trimmed.startsWith('//') || trimmed.startsWith('#') || trimmed.startsWith('/*') ||
+        trimmed.startsWith('*') || trimmed.startsWith('<!--') || trimmed.startsWith('"""') ||
+        trimmed.startsWith("'''")) {
         return 'gray';
     }
-    // Keywords
-    if (/^(import|export|const|let|var|function|class|interface|type|return|if|else|for|while|async|await)\b/.test(trimmed)) {
+    // Import/export statements
+    if (/^(import|export|from|require)\b/.test(trimmed)) {
         return 'magenta';
     }
-    // HTML tags
-    if (trimmed.startsWith('<') && (trimmed.includes('>') || trimmed.includes('/>'))) {
+    // Function/class definitions
+    if (/^(function|class|interface|type|enum|const\s+\w+\s*=\s*(\(|async)|def |class |fn |func |pub fn)\b/.test(trimmed)) {
+        return 'yellow';
+    }
+    // Control flow keywords
+    if (/^(if|else|for|while|switch|case|try|catch|finally|return|throw|break|continue|async|await)\b/.test(trimmed)) {
+        return 'blue';
+    }
+    // Variable declarations
+    if (/^(const|let|var|val|mut)\b/.test(trimmed)) {
         return 'cyan';
     }
-    // Strings
-    if (trimmed.includes('"') || trimmed.includes("'") || trimmed.includes('`')) {
+    // HTML/JSX tags
+    if ((ext === 'html' || ext === 'jsx' || ext === 'tsx' || ext === 'vue' || ext === 'svelte') &&
+        (trimmed.startsWith('<') || trimmed.startsWith('</'))) {
+        return 'cyan';
+    }
+    // CSS selectors and properties
+    if ((ext === 'css' || ext === 'scss') && (trimmed.includes('{') || trimmed.includes(':'))) {
+        return 'green';
+    }
+    // JSON keys
+    if (ext === 'json' && trimmed.includes(':')) {
+        return 'cyan';
+    }
+    // Strings (but not the whole line)
+    if (/["'`]/.test(trimmed)) {
         return 'green';
     }
     return 'white';
 };
+// Check if line is a section separator (empty or comment-only)
+const isSectionBreak = (line, prevLine) => {
+    const trimmed = line.trim();
+    const prevTrimmed = prevLine?.trim() || '';
+    // Empty line after non-empty line
+    if (!trimmed && prevTrimmed)
+        return true;
+    // Comment after code
+    if ((trimmed.startsWith('//') || trimmed.startsWith('#') || trimmed.startsWith('/*')) &&
+        prevTrimmed && !prevTrimmed.startsWith('//') && !prevTrimmed.startsWith('#')) {
+        return true;
+    }
+    return false;
+};
 export const LiveCodeStream = ({ actions, isRunning }) => {
+    // State for streaming effect - show lines progressively
+    const [visibleLines, setVisibleLines] = useState(0);
+    const [lastActionId, setLastActionId] = useState(null);
     // Find the current write/edit action with code content
     const currentAction = actions.length > 0 ? actions[actions.length - 1] : null;
+    // Create a unique ID for the current action
+    const actionId = currentAction ? `${currentAction.target}-${currentAction.timestamp}` : null;
+    // Reset visible lines when action changes, then stream progressively
+    useEffect(() => {
+        if (!currentAction || !currentAction.details) {
+            setVisibleLines(0);
+            return;
+        }
+        // If this is a new action, reset and start streaming
+        if (actionId !== lastActionId) {
+            setLastActionId(actionId);
+            setVisibleLines(10); // Start with first 10 lines
+            return;
+        }
+        // Stream more lines progressively
+        const totalLines = currentAction.details.split('\n').length;
+        if (visibleLines < totalLines) {
+            const timer = setTimeout(() => {
+                // Add 10 more lines every 100ms
+                setVisibleLines(prev => Math.min(prev + 10, totalLines));
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [currentAction, actionId, lastActionId, visibleLines]);
     // Only show for write/edit actions with content
     if (!isRunning || !currentAction)
         return null;
@@ -74,14 +177,31 @@ export const LiveCodeStream = ({ actions, isRunning }) => {
     if (!currentAction.details)
         return null;
     const code = currentAction.details;
-    const filename = currentAction.target.split('/').pop() || currentAction.target;
+    const fullPath = currentAction.target;
+    const filename = fullPath.split('/').pop() || fullPath;
+    const ext = getFileExtension(filename);
+    const langLabel = getLanguageLabel(ext);
     const allLines = code.split('\n');
     const totalLines = allLines.length;
-    const actionLabel = currentAction.type === 'write' ? 'Creating' : 'Editing';
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", bold: true, children: ["\uD83D\uDCDD ", actionLabel, ": "] }), _jsx(Text, { color: "white", bold: true, children: filename }), _jsxs(Text, { color: "gray", children: [" (", totalLines, " lines)"] })] }), _jsx(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, children: allLines.map((line, i) => {
+    const actionLabel = currentAction.type === 'write' ? '✨ Creating' : '✏️  Editing';
+    const actionColor = currentAction.type === 'write' ? 'green' : 'yellow';
+    // Only show lines up to visibleLines (streaming effect)
+    const linesToShow = allLines.slice(0, visibleLines);
+    const remainingLines = totalLines - visibleLines;
+    // Calculate code stats
+    const commentLines = allLines.filter(l => {
+        const t = l.trim();
+        return t.startsWith('//') || t.startsWith('#') || t.startsWith('/*') || t.startsWith('*');
+    }).length;
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsxs(Text, { color: actionColor, bold: true, children: [actionLabel, " "] }), _jsx(Text, { color: "white", bold: true, children: filename })] }), _jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [langLabel, " \u2022 "] }), _jsx(Text, { color: "cyan", children: visibleLines }), _jsxs(Text, { color: "gray", children: ["/", totalLines, " lines"] }), remainingLines > 0 && (_jsx(Text, { color: "yellow", children: " \u25BC streaming..." }))] })] }), fullPath !== filename && (_jsxs(Text, { color: "gray", dimColor: true, children: ["  \uD83D\uDCC1 ", fullPath] })), _jsx(Text, { color: actionColor, children: '┌' + '─'.repeat(78) + '┐' }), _jsx(Box, { flexDirection: "column", children: linesToShow.map((line, i) => {
                     const lineNum = i + 1;
-                    return (_jsxs(Text, { children: [_jsxs(Text, { color: "gray", dimColor: true, children: [String(lineNum).padStart(4, ' '), " \u2502 "] }), _jsx(Text, { color: getCodeColor(line), children: line })] }, i));
-                }) })] }));
+                    const prevLine = i > 0 ? allLines[i - 1] : null;
+                    const showSeparator = isSectionBreak(line, prevLine);
+                    const lineColor = getCodeColor(line, ext);
+                    // Zebra striping for better readability (subtle)
+                    const isEvenLine = i % 2 === 0;
+                    return (_jsxs(Box, { flexDirection: "column", children: [showSeparator && i > 0 && (_jsx(Text, { color: "gray", dimColor: true, children: '│' + ' '.repeat(78) + '│' })), _jsxs(Text, { children: [_jsx(Text, { color: actionColor, children: "\u2502" }), _jsx(Text, { color: isEvenLine ? 'gray' : 'white', dimColor: !isEvenLine, children: String(lineNum).padStart(4, ' ') }), _jsx(Text, { color: "gray", dimColor: true, children: " \u2502 " }), _jsx(Text, { color: lineColor, children: line.slice(0, 70) }), line.length > 70 && _jsx(Text, { color: "gray", children: "\u2026" }), line.length <= 70 && _jsx(Text, { children: ' '.repeat(Math.max(0, 70 - line.length)) }), _jsx(Text, { color: actionColor, children: "\u2502" })] })] }, i));
+                }) }), remainingLines > 0 && (_jsxs(Text, { color: "yellow", children: ['│', " ... ", remainingLines, " more lines loading... ", '│'] })), _jsx(Text, { color: actionColor, children: '└' + '─'.repeat(78) + '┘' })] }));
 };
 // Helper functions for action display
 const getActionColor = (type) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeep",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "AI-powered coding assistant built for the terminal. Multiple LLM providers, project-aware context, and a seamless development workflow.",
   "type": "module",
   "main": "dist/index.js",