codeep 1.0.51 → 1.0.53

package/dist/app.js

@@ -35,7 +35,7 @@ import { saveContext, loadContext, clearContext, mergeContext } from './utils/co
 import { performCodeReview, formatReviewResult } from './utils/codeReview.js';
 import { learnFromProject, addCustomRule, getLearningStatus } from './utils/learning.js';
 import { getAllSkills, findSkill, formatSkillsList, formatSkillHelp, generateSkillPrompt, saveCustomSkill, deleteCustomSkill, parseSkillChain, parseSkillArgs, searchSkills, trackSkillUsage, getSkillStats } from './utils/skills.js';
-import { AgentProgress, AgentSummary } from './components/AgentProgress.js';
+import { AgentProgress, AgentSummary, LiveCodeStream } from './components/AgentProgress.js';
 import { createActionLog } from './utils/tools.js';
 export const App = () => {
     const { exit } = useApp();
@@ -1330,7 +1330,7 @@ export const App = () => {
         return (_jsx(LanguageSelect, { onClose: () => setScreen('chat'), notify: notify }));
     }
     // Main chat screen
-    return (_jsxs(Box, { flexDirection: "column", children: [messages.length === 0 && !isLoading && _jsx(Logo, {}), messages.length === 0 && !isLoading && (_jsx(Box, { justifyContent: "center", children: _jsxs(Text, { children: ["Connected to ", _jsx(Text, { color: "#f02a30", children: config.get('model') }), ". Type ", _jsx(Text, { color: "#f02a30", children: "/help" }), " for commands."] }) })), _jsx(MessageList, { messages: messages, streamingContent: streamingContent, scrollOffset: 0, terminalHeight: stdout.rows || 24 }, sessionId), isLoading && !isAgentRunning && _jsx(Loading, { isStreaming: !!streamingContent }), isAgentRunning && (_jsx(AgentProgress, { isRunning: true, iteration: agentIteration, maxIterations: 50, actions: agentActions, currentThinking: agentThinking, dryRun: agentDryRun })), !isAgentRunning && agentResult && (_jsx(AgentSummary, { success: agentResult.success, iterations: agentResult.iterations, actions: agentActions, error: agentResult.error, aborted: agentResult.aborted })), pendingFileChanges.length > 0 && !isLoading && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#f02a30", padding: 1, marginY: 1, children: [_jsxs(Text, { color: "#f02a30", bold: true, children: ["\u2713 Detected ", pendingFileChanges.length, " file change(s):"] }), pendingFileChanges.map((change, i) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [messages.length === 0 && !isLoading && _jsx(Logo, {}), messages.length === 0 && !isLoading && (_jsx(Box, { justifyContent: "center", children: _jsxs(Text, { children: ["Connected to ", _jsx(Text, { color: "#f02a30", children: config.get('model') }), ". Type ", _jsx(Text, { color: "#f02a30", children: "/help" }), " for commands."] }) })), _jsx(MessageList, { messages: messages, streamingContent: streamingContent, scrollOffset: 0, terminalHeight: stdout.rows || 24 }, sessionId), isLoading && !isAgentRunning && _jsx(Loading, { isStreaming: !!streamingContent }), isAgentRunning && (_jsx(LiveCodeStream, { actions: agentActions, isRunning: true })), isAgentRunning && (_jsx(AgentProgress, { isRunning: true, iteration: agentIteration, maxIterations: 50, actions: agentActions, currentThinking: agentThinking, dryRun: agentDryRun })), !isAgentRunning && agentResult && (_jsx(AgentSummary, { success: agentResult.success, iterations: agentResult.iterations, actions: agentActions, error: agentResult.error, aborted: agentResult.aborted })), pendingFileChanges.length > 0 && !isLoading && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#f02a30", padding: 1, marginY: 1, children: [_jsxs(Text, { color: "#f02a30", bold: true, children: ["\u2713 Detected ", pendingFileChanges.length, " file change(s):"] }), pendingFileChanges.map((change, i) => {
                         const actionColor = change.action === 'delete' ? 'red' : change.action === 'edit' ? 'yellow' : 'green';
                         const actionLabel = change.action === 'delete' ? 'DELETE' : change.action === 'edit' ? 'EDIT' : 'CREATE';
                         return (_jsxs(Text, { children: ["\u2022 ", _jsxs(Text, { color: actionColor, children: ["[", actionLabel, "]"] }), " ", change.path, change.action !== 'delete' && change.content.includes('\n') && ` (${change.content.split('\n').length} lines)`] }, i));

package/dist/components/AgentProgress.d.ts

@@ -12,6 +12,16 @@ interface AgentProgressProps {
     dryRun?: boolean;
 }
 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[];
+    isRunning: boolean;
+}
+export declare const LiveCodeStream: React.FC<LiveCodeStreamProps>;
 /**
  * Agent summary component - shown when agent completes
  */

package/dist/components/AgentProgress.js

@@ -40,29 +40,140 @@ export const AgentProgress = ({ isRunning, iteration, maxIterations, actions, cu
         deleted: actions.filter(a => a.type === 'delete' && a.result === 'success').length,
     };
     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, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { 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) })] }), (currentAction.type === 'write' || currentAction.type === 'edit') && currentAction.details && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: "\uD83D\uDCDD Live Code:" }), _jsxs(Text, { color: "gray", children: [" ", currentAction.target.split('/').pop()] }), _jsxs(Text, { color: "gray", dimColor: true, children: [" (", currentAction.details.split('\n').length, " lines)"] })] }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, marginTop: 0, children: currentAction.details.split('\n').map((line, i) => (_jsxs(Text, { children: [_jsxs(Text, { color: "gray", dimColor: true, children: [String(i + 1).padStart(3, ' '), " \u2502 "] }), _jsx(Text, { color: getCodeColor(line), children: line })] }, i))) })] }))] })), _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"] }))] }))] }));
+    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';
+    }
+    // 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
-    if (trimmed.includes('"') || trimmed.includes("'") || trimmed.includes('`')) {
+    // 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 }) => {
+    // Find the current write/edit action with code content
+    const currentAction = actions.length > 0 ? actions[actions.length - 1] : null;
+    // Only show for write/edit actions with content
+    if (!isRunning || !currentAction)
+        return null;
+    if (currentAction.type !== 'write' && currentAction.type !== 'edit')
+        return null;
+    if (!currentAction.details)
+        return null;
+    const code = currentAction.details;
+    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';
+    const actionColor = currentAction.type === 'write' ? 'green' : 'yellow';
+    // Calculate code stats
+    const nonEmptyLines = allLines.filter(l => l.trim()).length;
+    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: totalLines }), _jsx(Text, { color: "gray", children: " lines" }), commentLines > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: [commentLines, " comments"] })] }))] })] }), fullPath !== filename && (_jsxs(Text, { color: "gray", dimColor: true, children: ["  \uD83D\uDCC1 ", fullPath] })), _jsx(Text, { color: actionColor, children: '┌' + '─'.repeat(78) + '┐' }), _jsx(Box, { flexDirection: "column", children: allLines.map((line, i) => {
+                    const lineNum = i + 1;
+                    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));
+                }) }), _jsx(Text, { color: actionColor, children: '└' + '─'.repeat(78) + '┘' })] }));
+};
 // Helper functions for action display
 const getActionColor = (type) => {
     switch (type) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeep",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "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",