codeep 1.0.112 → 1.0.114

package/dist/app.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Box, Text, useApp, useInput, useStdout } from 'ink';
 import clipboardy from 'clipboardy';
 import { logger } from './utils/logger.js';
@@ -35,14 +35,13 @@ 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, LiveCodeStream } from './components/AgentProgress.js';
+import { AgentProgress, LiveCodeStream } from './components/AgentProgress.js';
 import { createActionLog } from './utils/tools.js';
 export const App = () => {
     const { exit } = useApp();
     const { stdout } = useStdout();
     // Start with 'chat' screen, will switch to login if needed after loading API key
     const [screen, setScreen] = useState('chat');
-    const [chatRenderKey, setChatRenderKey] = useState(0); // Increment to force re-render of Static
     const [messages, setMessages] = useState([]);
     const [inputHistory, setInputHistory] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -164,15 +163,6 @@ export const App = () => {
             return () => clearTimeout(timer);
         }
     }, [notification, notificationDuration]);
-    // Force re-render of MessageList (and its Static component) when returning to chat
-    // This prevents ghost content from previous screen
-    const prevScreenRef = React.useRef(screen);
-    useEffect(() => {
-        if (screen === 'chat' && prevScreenRef.current !== 'chat') {
-            setChatRenderKey(k => k + 1);
-        }
-        prevScreenRef.current = screen;
-    }, [screen]);
     // Handle keyboard shortcuts
     useInput((input, key) => {
         // Ctrl+L to clear chat (F5 doesn't work reliably in all terminals)
@@ -1400,7 +1390,7 @@ export const App = () => {
         // If we got here, we're in an unknown state - default to chat
         return null;
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [messages.length === 0 && !isLoading && _jsx(Logo, {}), messages.length === 0 && !isLoading && (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_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(Text, { children: " " }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: "cyan", bold: true, children: "Welcome to Codeep - Your AI Coding Assistant" }) }), _jsx(Text, { children: " " }), _jsxs(Box, { flexDirection: "column", paddingX: 2, children: [_jsxs(Text, { children: [_jsx(Text, { color: "#f02a30", children: "\u2022" }), " Ask questions about your code or request implementations"] }), _jsxs(Text, { children: [_jsx(Text, { color: "#f02a30", children: "\u2022" }), " Use ", _jsxs(Text, { color: "cyan", children: ["/agent ", '<task>'] }), " for autonomous task execution"] }), _jsxs(Text, { children: [_jsx(Text, { color: "#f02a30", children: "\u2022" }), " Type ", _jsx(Text, { color: "cyan", children: "/diff" }), " to review changes, ", _jsx(Text, { color: "cyan", children: "/commit" }), " to generate commit messages"] }), _jsxs(Text, { children: [_jsx(Text, { color: "#f02a30", children: "\u2022" }), " Configure settings with ", _jsx(Text, { color: "cyan", children: "/settings" }), " - enable Agent Mode for auto-execution"] })] }), _jsx(Text, { children: " " }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: "gray", children: "Start typing your message or use a command to begin..." }) }), _jsx(Text, { children: " " })] })), _jsx(MessageList, { messages: messages, streamingContent: streamingContent, scrollOffset: 0, terminalHeight: stdout.rows || 24 }, `${sessionId}-${chatRenderKey}`), isLoading && !isAgentRunning && _jsx(Loading, { isStreaming: !!streamingContent }), isAgentRunning ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(LiveCodeStream, { actions: agentActions, isRunning: true, terminalWidth: stdout?.columns || 80 }), _jsx(AgentProgress, { isRunning: true, iteration: agentIteration, maxIterations: 50, actions: agentActions, currentThinking: agentThinking, dryRun: agentDryRun })] }, "agent-running")) : agentResult ? (_jsx(Box, { flexDirection: "column", children: _jsx(AgentSummary, { success: agentResult.success, iterations: agentResult.iterations, actions: agentActions, error: agentResult.error, aborted: agentResult.aborted }) }, "agent-complete")) : null, 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 && (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_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(Text, { children: " " }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: "cyan", bold: true, children: "Welcome to Codeep - Your AI Coding Assistant" }) }), _jsx(Text, { children: " " }), _jsxs(Box, { flexDirection: "column", paddingX: 2, children: [_jsxs(Text, { children: [_jsx(Text, { color: "#f02a30", children: "\u2022" }), " Ask questions about your code or request implementations"] }), _jsxs(Text, { children: [_jsx(Text, { color: "#f02a30", children: "\u2022" }), " Use ", _jsxs(Text, { color: "cyan", children: ["/agent ", '<task>'] }), " for autonomous task execution"] }), _jsxs(Text, { children: [_jsx(Text, { color: "#f02a30", children: "\u2022" }), " Type ", _jsx(Text, { color: "cyan", children: "/diff" }), " to review changes, ", _jsx(Text, { color: "cyan", children: "/commit" }), " to generate commit messages"] }), _jsxs(Text, { children: [_jsx(Text, { color: "#f02a30", children: "\u2022" }), " Configure settings with ", _jsx(Text, { color: "cyan", children: "/settings" }), " - enable Agent Mode for auto-execution"] })] }), _jsx(Text, { children: " " }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: "gray", children: "Start typing your message or use a command to begin..." }) }), _jsx(Text, { children: " " })] })), _jsx(MessageList, { messages: messages, streamingContent: streamingContent }, sessionId), isLoading && !isAgentRunning && _jsx(Loading, { isStreaming: !!streamingContent }), (isAgentRunning || agentResult) && (_jsxs(Box, { flexDirection: "column", children: [_jsx(LiveCodeStream, { actions: agentActions, isRunning: isAgentRunning, terminalWidth: stdout?.columns || 80 }), isAgentRunning && (_jsx(AgentProgress, { isRunning: true, iteration: agentIteration, maxIterations: 50, actions: agentActions, currentThinking: agentThinking, dryRun: agentDryRun }))] }, "agent-ui")), 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,8 +14,12 @@ interface AgentProgressProps {
 }
 export declare const AgentProgress: React.FC<AgentProgressProps>;
 /**
- * Live Code Stream component - shows current file operation
- * Simplified single-line display to avoid ghost content issues
+ * Live Code Stream component - shows current file operation with live preview
+ *
+ * KEY DESIGN: This component always renders exactly MAX_LINES lines
+ * - While running: shows live code preview
+ * - When finished: shows summary statistics
+ * - This prevents ghost content and terminal jumping because height is constant
  */
 interface LiveCodeStreamProps {
     actions: ActionLog[];

package/dist/components/AgentProgress.js

@@ -3,7 +3,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
  * Agent progress display component
  * Optimized with isolated spinner animation and memoization
  */
-import { useState, useEffect, memo } from 'react';
+import { useState, useEffect, memo, useMemo } from 'react';
 import { Box, Text } from 'ink';
 // Spinner frames for animation (no emojis)
 const SPINNER_FRAMES = ['/', '-', '\\', '|'];
@@ -145,31 +145,76 @@ const isSectionBreak = (line, prevLine) => {
     }
     return false;
 };
-export const LiveCodeStream = memo(({ actions, isRunning }) => {
-    // Find the current write/edit action
+const MAX_PREVIEW_LINES = 8; // Code preview lines (total box will be ~10 with header/footer)
+export const LiveCodeStream = memo(({ actions, isRunning, terminalWidth = 80 }) => {
+    // Calculate statistics from all actions
+    const stats = useMemo(() => {
+        const filesCreated = actions.filter(a => a.type === 'write' && a.result === 'success');
+        const filesEdited = actions.filter(a => a.type === 'edit' && a.result === 'success');
+        const filesDeleted = actions.filter(a => a.type === 'delete' && a.result === 'success');
+        const filesRead = actions.filter(a => a.type === 'read' && a.result === 'success');
+        const commands = actions.filter(a => a.type === 'command' && a.result === 'success');
+        const errors = actions.filter(a => a.result === 'error');
+        // Calculate total lines written
+        let totalLinesWritten = 0;
+        for (const action of [...filesCreated, ...filesEdited]) {
+            if (action.details) {
+                totalLinesWritten += action.details.split('\n').length;
+            }
+        }
+        return {
+            filesCreated: filesCreated.length,
+            filesEdited: filesEdited.length,
+            filesDeleted: filesDeleted.length,
+            filesRead: filesRead.length,
+            commands: commands.length,
+            errors: errors.length,
+            totalLinesWritten,
+            createdFiles: filesCreated.map(a => a.target.split('/').pop() || a.target),
+            editedFiles: filesEdited.map(a => a.target.split('/').pop() || a.target),
+        };
+    }, [actions]);
+    // Find the current write/edit action for live preview
     const currentAction = actions.length > 0 ? actions[actions.length - 1] : null;
-    // Only show for write/edit actions while running
-    if (!isRunning || !currentAction)
-        return null;
-    if (currentAction.type !== 'write' && currentAction.type !== 'edit')
+    const isCodeAction = currentAction && (currentAction.type === 'write' || currentAction.type === 'edit');
+    // Don't render anything if no actions yet (agent just started)
+    if (actions.length === 0) {
         return null;
-    const fullPath = currentAction.target;
-    const filename = fullPath.split('/').pop() || fullPath;
+    }
+    // Get code lines for preview
+    const codeLines = useMemo(() => {
+        if (!isCodeAction || !currentAction?.details)
+            return [];
+        return currentAction.details.split('\n');
+    }, [isCodeAction, currentAction?.details]);
+    const filename = currentAction?.target.split('/').pop() || '';
     const ext = getFileExtension(filename);
     const langLabel = getLanguageLabel(ext);
-    const totalLines = currentAction.details?.split('\n').length || 0;
-    const actionIcon = currentAction.type === 'write' ? '✨' : '✏️';
-    const actionVerb = currentAction.type === 'write' ? 'Creating' : 'Editing';
-    const actionColor = currentAction.type === 'write' ? 'green' : 'yellow';
-    // Show completion status if available
-    if (currentAction.result === 'success') {
-        return (_jsxs(Text, { color: "green", children: ["\u2713 ", currentAction.type === 'write' ? 'Created' : 'Edited', " ", filename, " (", totalLines, " lines)"] }));
-    }
-    if (currentAction.result === 'error') {
-        return (_jsxs(Text, { color: "red", children: ["\u2717 Failed to ", currentAction.type, " ", filename] }));
-    }
-    // Show in-progress status - single line, no height changes
-    return (_jsxs(Text, { color: actionColor, children: [actionIcon, " ", actionVerb, " ", filename, " \u2022 ", langLabel, " \u2022 ", totalLines, " lines"] }));
+    // RUNNING STATE: Show live code preview
+    if (isRunning && isCodeAction && codeLines.length > 0) {
+        // Show last N lines of code being written
+        const visibleLines = codeLines.slice(-MAX_PREVIEW_LINES);
+        const hiddenCount = Math.max(0, codeLines.length - MAX_PREVIEW_LINES);
+        const actionIcon = currentAction.type === 'write' ? '+' : '~';
+        const actionColor = currentAction.type === 'write' ? 'green' : 'yellow';
+        const boxWidth = Math.min(terminalWidth - 4, 76);
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: actionColor, marginBottom: 1, width: boxWidth, children: [_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: actionColor, bold: true, children: [actionIcon, " "] }), _jsx(Text, { color: "white", bold: true, children: filename }), _jsxs(Text, { color: "gray", children: [" \u2022 ", langLabel, " \u2022 ", codeLines.length, " lines"] })] }), _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [hiddenCount > 0 && (_jsxs(Text, { color: "gray", dimColor: true, children: ["  ... ", hiddenCount, " more lines above"] })), visibleLines.map((line, i) => {
+                            const lineNum = hiddenCount + i + 1;
+                            const displayLine = line.length > boxWidth - 10
+                                ? line.slice(0, boxWidth - 13) + '...'
+                                : line;
+                            return (_jsxs(Text, { children: [_jsxs(Text, { color: "gray", dimColor: true, children: [String(lineNum).padStart(3), " "] }), _jsx(Text, { color: getCodeColor(line, ext), children: displayLine || ' ' })] }, i));
+                        }), Array.from({ length: MAX_PREVIEW_LINES - visibleLines.length }).map((_, i) => (_jsx(Text, { color: "gray", dimColor: true, children: '    ' }, `pad-${i}`)))] })] }));
+    }
+    // RUNNING STATE but not a code action: show simple status
+    if (isRunning && currentAction) {
+        const boxWidth = Math.min(terminalWidth - 4, 76);
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", marginBottom: 1, width: boxWidth, children: [_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "\u25E6 " }), _jsxs(Text, { color: getActionColor(currentAction.type), children: [getActionLabel(currentAction.type), " "] }), _jsx(Text, { color: "white", children: formatTarget(currentAction.target) })] }), Array.from({ length: MAX_PREVIEW_LINES }).map((_, i) => (_jsx(Text, { color: "gray", dimColor: true, children: " " }, `pad-${i}`)))] }));
+    }
+    // FINISHED STATE: Show summary statistics (same height as live preview)
+    const boxWidth = Math.min(terminalWidth - 4, 76);
+    const hasChanges = stats.filesCreated > 0 || stats.filesEdited > 0 || stats.filesDeleted > 0;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: stats.errors > 0 ? 'red' : 'green', marginBottom: 1, width: boxWidth, children: [_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: stats.errors > 0 ? 'red' : 'green', bold: true, children: [stats.errors > 0 ? '!' : '✓', " Session Complete"] }), _jsxs(Text, { color: "gray", children: [" \u2022 ", actions.length, " actions"] })] }), _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [hasChanges ? (_jsxs(_Fragment, { children: [stats.filesCreated > 0 && (_jsxs(Text, { children: [_jsxs(Text, { color: "green", bold: true, children: ["  + ", stats.filesCreated, " "] }), _jsx(Text, { color: "gray", children: "file(s) created" }), stats.createdFiles.length <= 3 && (_jsxs(Text, { color: "gray", dimColor: true, children: [" (", stats.createdFiles.join(', '), ")"] }))] })), stats.filesEdited > 0 && (_jsxs(Text, { children: [_jsxs(Text, { color: "yellow", bold: true, children: ["  ~ ", stats.filesEdited, " "] }), _jsx(Text, { color: "gray", children: "file(s) modified" }), stats.editedFiles.length <= 3 && (_jsxs(Text, { color: "gray", dimColor: true, children: [" (", stats.editedFiles.join(', '), ")"] }))] })), stats.filesDeleted > 0 && (_jsxs(Text, { children: [_jsxs(Text, { color: "red", bold: true, children: ["  - ", stats.filesDeleted, " "] }), _jsx(Text, { color: "gray", children: "file(s) deleted" })] })), stats.totalLinesWritten > 0 && (_jsxs(Text, { children: [_jsxs(Text, { color: "cyan", bold: true, children: ["  \u2261 ", stats.totalLinesWritten, " "] }), _jsx(Text, { color: "gray", children: "total lines written" })] })), stats.filesRead > 0 && (_jsxs(Text, { color: "gray", dimColor: true, children: ["    ", stats.filesRead, " file(s) read"] })), stats.commands > 0 && (_jsxs(Text, { color: "gray", dimColor: true, children: ["    ", stats.commands, " command(s) run"] }))] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: "  No file changes made" }), stats.filesRead > 0 && (_jsxs(Text, { color: "gray", dimColor: true, children: ["    ", stats.filesRead, " file(s) read"] })), stats.commands > 0 && (_jsxs(Text, { color: "gray", dimColor: true, children: ["    ", stats.commands, " command(s) run"] }))] })), stats.errors > 0 && (_jsxs(Text, { color: "red", children: ["  \u2717 ", stats.errors, " error(s) occurred"] })), Array.from({ length: Math.max(0, MAX_PREVIEW_LINES - 6) }).map((_, i) => (_jsx(Text, { color: "gray", dimColor: true, children: " " }, `pad-${i}`)))] })] }));
 });
 LiveCodeStream.displayName = 'LiveCodeStream';
 // Helper functions for action display

package/dist/components/MessageList.d.ts

@@ -7,9 +7,16 @@ interface MessageListProps {
     terminalHeight?: number;
 }
 /**
- * Message list with optimized rendering
- * Uses Static component for stable scroll position
- * Uses content-based keys instead of index for better React reconciliation
+ * Message list WITHOUT Static component
+ *
+ * We removed the Static component because:
+ * - Static preserves content in terminal scroll history even after unmount
+ * - This causes ghost/duplicate content when switching screens
+ * - The trade-off is that messages will re-render on each update
+ * - We mitigate this with memoization at the individual message level
+ *
+ * NOTE: This is a temporary solution until we implement a custom renderer
+ * like Claude CLI uses (DEC Mode 2026 / synchronized output).
  */
 export declare const MessageList: React.FC<MessageListProps>;
 export {};

package/dist/components/MessageList.js

@@ -1,25 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Box, Static } from 'ink';
+import { memo, useMemo } from 'react';
+import { Box } from 'ink';
 import { MessageView } from './Message.js';
 import { StreamingMessage } from './StreamingMessage.js';
 /**
- * Generate unique key for message based on content and position
- * More stable than index-based keys
+ * Memoized individual message component
+ * Only re-renders when its specific content changes
  */
-const getMessageKey = (msg, index) => {
-    // Use hash of first 50 chars + role + index for uniqueness
-    const contentHash = msg.content.slice(0, 50).split('').reduce((acc, char) => {
-        return ((acc << 5) - acc) + char.charCodeAt(0);
-    }, 0);
-    return `${msg.role}-${index}-${Math.abs(contentHash)}`;
-};
+const MemoizedMessage = memo(({ msg }) => _jsx(MessageView, { role: msg.role, content: msg.content }), (prev, next) => prev.msg.content === next.msg.content && prev.msg.role === next.msg.role);
+MemoizedMessage.displayName = 'MemoizedMessage';
 /**
- * Message list with optimized rendering
- * Uses Static component for stable scroll position
- * Uses content-based keys instead of index for better React reconciliation
+ * Message list WITHOUT Static component
+ *
+ * We removed the Static component because:
+ * - Static preserves content in terminal scroll history even after unmount
+ * - This causes ghost/duplicate content when switching screens
+ * - The trade-off is that messages will re-render on each update
+ * - We mitigate this with memoization at the individual message level
+ *
+ * NOTE: This is a temporary solution until we implement a custom renderer
+ * like Claude CLI uses (DEC Mode 2026 / synchronized output).
  */
 export const MessageList = memo(({ messages, streamingContent, }) => {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: messages, children: (msg, index) => (_jsx(MessageView, { role: msg.role, content: msg.content }, getMessageKey(msg, index))) }), streamingContent && (_jsx(StreamingMessage, { content: streamingContent }))] }));
+    // Memoize the messages array rendering
+    const renderedMessages = useMemo(() => (messages.map((msg, index) => (_jsx(MemoizedMessage, { msg: msg, index: index }, `msg-${index}-${msg.role}`)))), [messages]);
+    return (_jsxs(Box, { flexDirection: "column", children: [renderedMessages, streamingContent && (_jsx(StreamingMessage, { content: streamingContent }))] }));
 });
 MessageList.displayName = 'MessageList';

package/package.json

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