codeep 1.0.58 → 1.0.59

package/dist/components/AgentProgress.js

@@ -140,25 +140,21 @@ const isSectionBreak = (line, prevLine) => {
     return false;
 };
 export const LiveCodeStream = ({ actions, isRunning }) => {
-    // Use ref for tracking to avoid re-render loops
+    // Use refs for mutable state to minimize re-renders
     const lastActionIdRef = useRef(null);
     const timerRef = useRef(null);
-    const totalLinesRef = useRef(0);
-    // State for visible lines - only update when batch is ready
-    const [displayState, setDisplayState] = useState({
-        endLine: 0,
-        actionId: null,
-    });
+    const visibleEndLineRef = useRef(0);
+    // Single state for forcing re-render - increment only when needed
+    const [, forceRender] = useState(0);
     // 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
     const isWriteOrEdit = currentAction && (currentAction.type === 'write' || currentAction.type === 'edit');
     // Create a unique ID for the current action
     const actionId = currentAction ? `${currentAction.target}-${currentAction.timestamp}` : null;
-    // Get total lines for current action and store in ref
+    // Get total lines for current action
     const totalLines = currentAction?.details ? currentAction.details.split('\n').length : 0;
-    totalLinesRef.current = totalLines;
-    // Stream lines progressively using interval instead of recursive setTimeout
+    // Stream lines progressively - minimize state updates
     useEffect(() => {
         // Clear any existing timer
         if (timerRef.current) {
@@ -167,31 +163,33 @@ export const LiveCodeStream = ({ actions, isRunning }) => {
         }
         // Only stream for write/edit actions with content
         if (!currentAction || !currentAction.details || !isRunning || !isWriteOrEdit) {
-            if (displayState.endLine !== 0 || displayState.actionId !== null) {
-                setDisplayState({ endLine: 0, actionId: null });
+            if (visibleEndLineRef.current !== 0) {
+                visibleEndLineRef.current = 0;
+                lastActionIdRef.current = null;
             }
             return;
         }
         // If this is a new action, reset and start streaming
         if (actionId !== lastActionIdRef.current) {
             lastActionIdRef.current = actionId;
-            const initialLines = Math.min(10, totalLinesRef.current);
-            setDisplayState({ endLine: initialLines, actionId });
+            const lines = currentAction.details.split('\n').length;
+            visibleEndLineRef.current = Math.min(10, lines);
+            forceRender(n => n + 1);
             // Only start interval if there are more lines to show
-            if (totalLinesRef.current > 10) {
+            if (lines > 10) {
                 timerRef.current = setInterval(() => {
-                    setDisplayState(prev => {
-                        // Use ref to get current totalLines value
-                        const currentTotal = totalLinesRef.current;
-                        const newEndLine = Math.min(prev.endLine + 10, currentTotal);
-                        // Stop interval when we've shown all lines
-                        if (newEndLine >= currentTotal && timerRef.current) {
-                            clearInterval(timerRef.current);
-                            timerRef.current = null;
-                        }
-                        return { ...prev, endLine: newEndLine };
-                    });
-                }, 150);
+                    const currentLines = currentAction.details?.split('\n').length || 0;
+                    const newEndLine = Math.min(visibleEndLineRef.current + 10, currentLines);
+                    if (newEndLine !== visibleEndLineRef.current) {
+                        visibleEndLineRef.current = newEndLine;
+                        forceRender(n => n + 1);
+                    }
+                    // Stop interval when we've shown all lines
+                    if (newEndLine >= currentLines && timerRef.current) {
+                        clearInterval(timerRef.current);
+                        timerRef.current = null;
+                    }
+                }, 200); // Slower interval to reduce flickering
             }
         }
         return () => {
@@ -200,7 +198,7 @@ export const LiveCodeStream = ({ actions, isRunning }) => {
                 timerRef.current = null;
             }
         };
-    }, [actionId, isRunning, isWriteOrEdit]);
+    }, [actionId, isRunning, isWriteOrEdit, currentAction]);
     // Only show for write/edit actions with content while running
     if (!isRunning || !currentAction)
         return null;
@@ -216,19 +214,20 @@ export const LiveCodeStream = ({ actions, isRunning }) => {
     const allLines = code.split('\n');
     const actionLabel = currentAction.type === 'write' ? '✨ Creating' : '✏️  Editing';
     const actionColor = currentAction.type === 'write' ? 'green' : 'yellow';
-    // Use displayState for rendering
-    const visibleEndLine = displayState.endLine;
-    // Sliding window: show only last 10 lines of what's been "written" so far
+    // Use ref value for rendering
+    const visibleEndLine = visibleEndLineRef.current || Math.min(10, totalLines);
+    // Sliding window: show only last 10 lines
     const WINDOW_SIZE = 10;
     const startLine = Math.max(0, visibleEndLine - WINDOW_SIZE);
     const linesToShow = allLines.slice(startLine, visibleEndLine);
     const remainingLines = totalLines - visibleEndLine;
     const linesAbove = startLine;
-    return (_jsxs(Box, { flexDirection: "column", 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: visibleEndLine }), _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(80) }), linesAbove > 0 && (_jsxs(Text, { color: "gray", dimColor: true, children: ["  \u22EE ", linesAbove, " lines above"] })), _jsx(Box, { flexDirection: "column", children: linesToShow.map((line, i) => {
-                    const lineNum = startLine + i + 1;
-                    const lineColor = getCodeColor(line, ext);
-                    return (_jsxs(Text, { children: [_jsx(Text, { color: "gray", dimColor: true, children: String(lineNum).padStart(4, ' ') }), _jsx(Text, { color: "gray", dimColor: true, children: " \u2502 " }), _jsx(Text, { color: lineColor, children: line.slice(0, 72) }), line.length > 72 && _jsx(Text, { color: "gray", children: "\u2026" })] }, i));
-                }) }), remainingLines > 0 && (_jsxs(Text, { color: "yellow", children: ["  \u22EE ", remainingLines, " more lines..."] })), _jsx(Text, { color: actionColor, children: '─'.repeat(80) })] }));
+    // Pad lines to fixed height to prevent layout shifts
+    const paddedLines = [...linesToShow];
+    while (paddedLines.length < WINDOW_SIZE) {
+        paddedLines.push('');
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { 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: visibleEndLine }), _jsxs(Text, { color: "gray", children: ["/", totalLines] }), remainingLines > 0 && _jsx(Text, { color: "yellow", children: " \u25BC" })] }), _jsx(Text, { color: actionColor, children: '─'.repeat(76) }), _jsx(Text, { color: "gray", dimColor: true, children: linesAbove > 0 ? `  ⋮ ${linesAbove} lines above` : ' ' }), paddedLines.map((line, i) => (_jsxs(Text, { children: [_jsxs(Text, { color: "gray", dimColor: true, children: [line ? String(startLine + i + 1).padStart(4, ' ') : '    ', " \u2502", ' '] }), _jsx(Text, { color: line ? getCodeColor(line, ext) : 'gray', children: line.slice(0, 68) }), line.length > 68 && _jsx(Text, { color: "gray", children: "\u2026" })] }, `line-${startLine + i}`))), _jsx(Text, { color: "yellow", children: remainingLines > 0 ? `  ⋮ ${remainingLines} more lines...` : ' ' }), _jsx(Text, { color: actionColor, children: '─'.repeat(76) })] }));
 };
 // Helper functions for action display
 const getActionColor = (type) => {

package/package.json

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