codeep 1.0.53 → 1.0.55

package/dist/components/AgentProgress.js

@@ -140,9 +140,36 @@ const isSectionBreak = (line, prevLine) => {
     return false;
 };
 export const LiveCodeStream = ({ actions, isRunning }) => {
+    // State for streaming effect - sliding window showing last 10 lines
+    const [visibleEndLine, setVisibleEndLine] = 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;
-    // Only show for write/edit actions with content
+    // Create a unique ID for the current action
+    const actionId = currentAction ? `${currentAction.target}-${currentAction.timestamp}` : null;
+    // Reset and stream progressively when action changes
+    useEffect(() => {
+        if (!currentAction || !currentAction.details) {
+            setVisibleEndLine(0);
+            return;
+        }
+        // If this is a new action, reset and start streaming
+        if (actionId !== lastActionId) {
+            setLastActionId(actionId);
+            setVisibleEndLine(10); // Start with first 10 lines
+            return;
+        }
+        // Stream more lines progressively (sliding window moves forward)
+        const totalLines = currentAction.details.split('\n').length;
+        if (visibleEndLine < totalLines) {
+            const timer = setTimeout(() => {
+                // Move window forward by 10 lines every 100ms
+                setVisibleEndLine(prev => Math.min(prev + 10, totalLines));
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [currentAction, actionId, lastActionId, visibleEndLine]);
+    // Only show for write/edit actions with content while running
     if (!isRunning || !currentAction)
         return null;
     if (currentAction.type !== 'write' && currentAction.type !== 'edit')
@@ -158,21 +185,17 @@ export const LiveCodeStream = ({ actions, isRunning }) => {
     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);
+    // Sliding window: show only last 10 lines of what's been "written" so far
+    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", 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: 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);
-                    // 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) + '┘' })] }));
+                    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) })] }));
 };
 // Helper functions for action display
 const getActionColor = (type) => {

package/package.json

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