codeep 1.0.63 → 1.0.64

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();
@@ -1350,7 +1350,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

@@ -14,7 +14,7 @@ interface AgentProgressProps {
 export declare const AgentProgress: React.FC<AgentProgressProps>;
 /**
  * Live Code Stream component - shows code being written/edited by agent
- * FIXED HEIGHT to prevent layout shift and empty lines
+ * Displays code progressively 10 lines at a time ABOVE agent progress
  */
 interface LiveCodeStreamProps {
     actions: ActionLog[];

package/dist/components/AgentProgress.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 /**
  * Agent progress display component
  */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Box, Text } from 'ink';
 // Spinner frames for animation (no emojis)
 const SPINNER_FRAMES = ['/', '-', '\\', '|'];
@@ -40,7 +40,7 @@ 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', paddingX: 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(Text, { color: "gray", children: [" (", currentAction.details.split('\n').length, " lines)"] }))] }), (currentAction.type === 'write' || currentAction.type === 'edit') && currentAction.details && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: currentAction.details.split('\n').slice(-5).map((line, i) => (_jsxs(Text, { color: "gray", dimColor: true, children: [line.slice(0, 60), line.length > 60 ? '…' : ''] }, 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', paddingX: 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"] }))] }))] }));
 };
 // Get file extension for language detection
 const getFileExtension = (filename) => {
@@ -139,10 +139,41 @@ const isSectionBreak = (line, prevLine) => {
     }
     return false;
 };
-const LIVE_CODE_LINES = 8; // Fixed number of visible lines
+const LINES_PER_CHUNK = 10; // Show 10 lines at a time
 export const LiveCodeStream = ({ actions, isRunning }) => {
+    // Track how many lines we've shown so far
+    const [visibleLineCount, setVisibleLineCount] = useState(LINES_PER_CHUNK);
+    const lastActionIdRef = useRef('');
     // Find the current write/edit action with code content
     const currentAction = actions.length > 0 ? actions[actions.length - 1] : null;
+    // Create a unique ID for current action
+    const currentActionId = currentAction
+        ? `${currentAction.type}-${currentAction.target}-${currentAction.details?.length || 0}`
+        : '';
+    // Reset visible lines when action changes
+    useEffect(() => {
+        if (currentActionId !== lastActionIdRef.current) {
+            lastActionIdRef.current = currentActionId;
+            setVisibleLineCount(LINES_PER_CHUNK);
+        }
+    }, [currentActionId]);
+    // Progressively show more lines
+    useEffect(() => {
+        if (!isRunning || !currentAction)
+            return;
+        if (currentAction.type !== 'write' && currentAction.type !== 'edit')
+            return;
+        if (!currentAction.details)
+            return;
+        const totalLines = currentAction.details.split('\n').length;
+        // If we haven't shown all lines yet, schedule showing more
+        if (visibleLineCount < totalLines) {
+            const timer = setTimeout(() => {
+                setVisibleLineCount(prev => Math.min(prev + LINES_PER_CHUNK, totalLines));
+            }, 200); // Show next 10 lines every 200ms
+            return () => clearTimeout(timer);
+        }
+    }, [isRunning, currentAction, visibleLineCount]);
     // Only show for write/edit actions with content while running
     if (!isRunning || !currentAction)
         return null;
@@ -159,19 +190,13 @@ export const LiveCodeStream = ({ actions, isRunning }) => {
     const totalLines = allLines.length;
     const actionLabel = currentAction.type === 'write' ? '✨ Creating' : '✏️  Editing';
     const actionColor = currentAction.type === 'write' ? 'green' : 'yellow';
-    // Show last N lines (sliding window)
-    const startLine = Math.max(0, totalLines - LIVE_CODE_LINES);
-    const visibleLines = allLines.slice(startLine, totalLines);
-    // Pad to fixed height to prevent layout shift
-    const paddedLines = [...visibleLines];
-    while (paddedLines.length < LIVE_CODE_LINES) {
-        paddedLines.push('');
-    }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsxs(Text, { color: actionColor, bold: true, children: [actionLabel, " "] }), _jsx(Text, { color: "white", bold: true, children: filename }), _jsxs(Text, { color: "gray", children: [" \u2022 ", langLabel, " \u2022 "] }), _jsx(Text, { color: "cyan", children: totalLines }), _jsx(Text, { color: "gray", children: " lines" }), startLine > 0 && _jsxs(Text, { color: "gray", dimColor: true, children: [" (showing ", startLine + 1, "-", totalLines, ")"] })] }), paddedLines.map((line, i) => {
-                const lineNum = startLine + i + 1;
-                const isRealLine = i < visibleLines.length;
-                return (_jsxs(Text, { children: [_jsxs(Text, { color: "gray", dimColor: true, children: [isRealLine ? String(lineNum).padStart(4, ' ') : '    ', " \u2502", ' '] }), isRealLine ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: getCodeColor(line, ext), children: line.slice(0, 70) }), line.length > 70 && _jsx(Text, { color: "gray", children: "\u2026" })] })) : (_jsx(Text, { children: " " }))] }, `fixed-line-${i}`));
-            })] }));
+    // Show lines up to visibleLineCount
+    const linesToShow = allLines.slice(0, visibleLineCount);
+    const hasMoreLines = visibleLineCount < totalLines;
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: actionColor, children: '─'.repeat(60) }), _jsxs(Text, { children: [_jsxs(Text, { color: actionColor, bold: true, children: [actionLabel, " "] }), _jsx(Text, { color: "white", bold: true, children: filename }), _jsxs(Text, { color: "gray", children: [" \u2022 ", langLabel, " \u2022 "] }), _jsx(Text, { color: "cyan", children: visibleLineCount }), _jsxs(Text, { color: "gray", children: ["/", totalLines, " lines"] }), hasMoreLines && _jsx(Text, { color: "yellow", children: " \u25BC streaming..." })] }), 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, ext), children: line.slice(0, 80) }), line.length > 80 && _jsx(Text, { color: "gray", children: "\u2026" })] }, `line-${i}`));
+            }), hasMoreLines && (_jsxs(Text, { color: "gray", dimColor: true, children: ['     ', "\u2502 ... ", totalLines - visibleLineCount, " more lines loading..."] })), _jsx(Text, { color: actionColor, children: '─'.repeat(60) })] }));
 };
 // Helper functions for action display
 const getActionColor = (type) => {

package/package.json

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