codeep 1.2.77 → 1.2.79

package/dist/renderer/App.js

@@ -4,14 +4,29 @@
  */
 import { Screen } from './Screen.js';
 import { Input, LineEditor } from './Input.js';
-import { fg, style, stringWidth } from './ansi.js';
+import { fg, style, stringWidth, gradientText, gradientLine } from './ansi.js';
 import { SYNTAX, highlightCode } from './highlight.js';
 import { handleInlineStatusKey, handleInlineHelpKey, handleMenuKey, handleInlinePermissionKey, handleInlineSessionPickerKey, handleInlineConfirmKey, handleLoginKey, } from './handlers.js';
 import clipboardy from 'clipboardy';
 // Primary color: #f02a30 (Codeep red)
 const PRIMARY_COLOR = fg.rgb(240, 42, 48);
-// Spinner frames for animation
-const SPINNER_FRAMES = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'];
+// Gradient stops: deep red → codeep red → orange → amber
+// Used for separator lines and accent elements
+const GRADIENT_STOPS = [
+    [160, 20, 30], // deep red
+    [240, 42, 48], // Codeep red
+    [240, 100, 30], // orange-red
+    [240, 160, 20], // amber
+];
+// Dimmer gradient for subtle separators (half brightness)
+const GRADIENT_STOPS_DIM = [
+    [80, 10, 15],
+    [140, 25, 28],
+    [140, 60, 18],
+    [140, 90, 12],
+];
+// 8-bit block spinner frames
+const SPINNER_FRAMES = ['▖', '▘', '▝', '▗', '▌', '▀', '▐', '▄'];
 // ASCII Logo
 const LOGO_LINES = [
     ' ██████╗ ██████╗ ██████╗ ███████╗███████╗██████╗ ',
@@ -1295,8 +1310,8 @@ export class App {
             }
             y++;
         }
-        // Separator
-        this.screen.horizontalLine(separatorLine, '─', fg.gray);
+        // Gradient separator
+        this.screen.writeRaw(separatorLine, gradientLine(width, GRADIENT_STOPS_DIM));
         // Input (don't render cursor when menu/settings is open)
         this.renderInput(inputLine, width, this.menuOpen || this.settingsOpen);
         // Status bar
@@ -1453,39 +1468,41 @@ export class App {
             this.screen.showCursor(false);
             return;
         }
-        // Agent running state - show special prompt
+        // Agent running state - show special prompt with gradient
         if (this.isAgentRunning) {
             const spinner = SPINNER_FRAMES[this.spinnerFrame];
             const stepLabel = this.agentMaxIterations > 0
                 ? `step ${this.agentIteration}/${this.agentMaxIterations}`
                 : `step ${this.agentIteration}`;
             const agentText = `${spinner} Agent working... ${stepLabel} | ${this.agentActions.length} actions (Esc to stop)`;
-            this.screen.writeLine(y, agentText, PRIMARY_COLOR);
+            this.screen.write(0, y, gradientText(agentText, GRADIENT_STOPS) + style.bold);
             this.screen.showCursor(false);
             return;
         }
-        // Loading/streaming state with animated spinner
+        // Loading/streaming state with animated spinner + gradient
         if (this.isLoading || this.isStreaming) {
             const spinner = SPINNER_FRAMES[this.spinnerFrame];
-            const message = this.isStreaming ? 'Writing' : 'Thinking';
-            this.screen.writeLine(y, `${spinner} ${message}...`, PRIMARY_COLOR);
+            const message = this.isStreaming ? 'Writing...' : 'Thinking...';
+            const spinnerText = `${spinner} ${message}`;
+            this.screen.write(0, y, gradientText(spinnerText, GRADIENT_STOPS));
             this.screen.showCursor(false);
             return;
         }
-        // Build prompt prefix — show line count for multi-line buffers
+        // Build prompt prefix
         const lines = inputValue.split('\n');
         const lineCount = lines.length;
-        const prompt = lineCount > 1 ? `[${lineCount}] > ` : this.isMultilineMode ? 'M> ' : '> ';
-        const maxInputWidth = width - prompt.length - 1;
+        // ❯ for normal, ❯❯ for multiline, [n] for multi-line with count
+        const promptSymbol = lineCount > 1 ? `[${lineCount}] ❯ ` : this.isMultilineMode ? '❯❯ ' : '❯ ';
+        const maxInputWidth = width - promptSymbol.length - 1;
         // Show placeholder when input is empty
         if (!inputValue) {
-            this.screen.write(0, y, prompt, fg.green);
+            this.screen.write(0, y, promptSymbol, PRIMARY_COLOR);
             const placeholder = this.isMultilineMode
-                ? 'Multi-line mode (Enter=newline, Esc=send)...'
-                : 'Type a message or /command...';
-            this.screen.write(prompt.length, y, placeholder, fg.gray);
+                ? 'Multi-line mode  Enter=newline · Esc=send'
+                : 'Message or /command';
+            this.screen.write(promptSymbol.length, y, placeholder, fg.gray + style.dim);
             if (!hideCursor) {
-                this.screen.setCursor(prompt.length, y);
+                this.screen.setCursor(promptSymbol.length, y);
                 this.screen.showCursor(true);
             }
             else {
@@ -1496,14 +1513,13 @@ export class App {
         // For multi-line content, show the last line being edited
         const lastLine = lines[lines.length - 1];
         const displayInput = lineCount > 1 ? lastLine : inputValue;
-        // Cursor position within the last line
         const charsBeforeLastLine = lineCount > 1 ? inputValue.lastIndexOf('\n') + 1 : 0;
         const cursorInLine = cursorPos - charsBeforeLastLine;
         let displayValue;
         let cursorX;
         if (displayInput.length <= maxInputWidth) {
             displayValue = displayInput;
-            cursorX = prompt.length + Math.max(0, cursorInLine);
+            cursorX = promptSymbol.length + Math.max(0, cursorInLine);
         }
         else {
             const effectiveCursor = Math.max(0, cursorInLine);
@@ -1515,9 +1531,11 @@ export class App {
             else {
                 displayValue = displayInput.slice(0, maxInputWidth);
             }
-            cursorX = prompt.length + (effectiveCursor - visibleStart);
+            cursorX = promptSymbol.length + (effectiveCursor - visibleStart);
         }
-        this.screen.writeLine(y, prompt + displayValue, fg.green);
+        // Prompt symbol in primary color, input text in white
+        this.screen.write(0, y, promptSymbol, PRIMARY_COLOR);
+        this.screen.write(promptSymbol.length, y, displayValue, fg.white);
         // Hide cursor when menu/settings is open
         if (hideCursor) {
             this.screen.showCursor(false);
@@ -1890,15 +1908,15 @@ export class App {
                 acc.errors++;
             return acc;
         }, { reads: 0, writes: 0, edits: 0, deletes: 0, commands: 0, searches: 0, errors: 0 });
-        // Top border with title
-        const title = ` ${spinner} AGENT `;
+        // Top border: gradient line with gradient title embedded
+        const titleInner = ` ${spinner} AGENT `;
         const titlePadLeft = 2;
-        const titlePadRight = width - titlePadLeft - title.length - 1;
-        this.screen.write(0, y, '─'.repeat(titlePadLeft), PRIMARY_COLOR);
-        this.screen.write(titlePadLeft, y, title, PRIMARY_COLOR + style.bold);
-        this.screen.write(titlePadLeft + title.length, y, '─'.repeat(Math.max(0, titlePadRight)), PRIMARY_COLOR);
+        const lineLeft = gradientLine(titlePadLeft, GRADIENT_STOPS);
+        const titleColored = gradientText(titleInner, GRADIENT_STOPS) + style.bold;
+        const lineRight = gradientLine(Math.max(0, width - titlePadLeft - titleInner.length - 1), GRADIENT_STOPS);
+        this.screen.write(0, y, lineLeft + titleColored + lineRight);
         y++;
-        // Current action line (clear first to avoid stale text from longer previous paths)
+        // Current action line
         this.screen.writeLine(y, '');
         if (this.agentWaitingForAI) {
             this.screen.write(1, y, 'Thinking...', fg.gray);
@@ -1916,7 +1934,7 @@ export class App {
             this.screen.write(1, y, 'Starting...', fg.gray);
         }
         y++;
-        // Stats line: Files and step info (clear line first to avoid stale text)
+        // Stats + 8-bit progress bar line
         this.screen.writeLine(y, '');
         let x = 1;
         // File changes
@@ -1950,19 +1968,42 @@ export class App {
             this.screen.write(x, y, txt, fg.cyan);
             x += txt.length + 1;
         }
-        // Step info on the right
-        const stepText = this.agentMaxIterations > 0
-            ? `step ${this.agentIteration}/${this.agentMaxIterations}`
-            : `step ${this.agentIteration}`;
-        this.screen.write(width - stepText.length - 1, y, stepText, fg.gray);
+        // 8-bit gradient progress bar (right side, if max iterations known)
+        if (this.agentMaxIterations > 0) {
+            const barWidth = 14;
+            const progress = Math.min(this.agentIteration / this.agentMaxIterations, 1);
+            const filled = Math.round(progress * barWidth);
+            // Use block chars: █▓▒░ for gradient fill effect
+            const BLOCKS = ['░', '▒', '▓', '█'];
+            let bar = '';
+            for (let i = 0; i < barWidth; i++) {
+                if (i < filled - 1)
+                    bar += '█';
+                else if (i === filled - 1)
+                    bar += '▓';
+                else if (i === filled)
+                    bar += '▒';
+                else
+                    bar += '░';
+            }
+            const barColored = gradientText(bar, GRADIENT_STOPS);
+            const stepText = `${this.agentIteration}/${this.agentMaxIterations}`;
+            const barX = width - barWidth - stepText.length - 3;
+            this.screen.write(barX, y, barColored);
+            this.screen.write(width - stepText.length - 1, y, stepText, fg.gray);
+        }
+        else {
+            const stepText = `step ${this.agentIteration}`;
+            this.screen.write(width - stepText.length - 1, y, stepText, fg.gray);
+        }
         y++;
-        // Bottom border with help
+        // Bottom border with help text
         const helpText = ' Esc to stop ';
         const helpPadLeft = Math.floor((width - helpText.length) / 2);
-        const helpPadRight = Math.ceil((width - helpText.length) / 2);
-        this.screen.write(0, y, '─'.repeat(helpPadLeft), fg.gray);
+        const helpPadRight = Math.max(0, width - helpPadLeft - helpText.length);
+        this.screen.write(0, y, gradientLine(helpPadLeft, GRADIENT_STOPS_DIM));
         this.screen.write(helpPadLeft, y, helpText, fg.gray);
-        this.screen.write(helpPadLeft + helpText.length, y, '─'.repeat(helpPadRight), fg.gray);
+        this.screen.write(helpPadLeft + helpText.length, y, gradientLine(helpPadRight, GRADIENT_STOPS_DIM));
     }
     /**
      * Get color for action type
@@ -2016,29 +2057,35 @@ export class App {
      * Render status bar
      */
     renderStatusBar(y, width) {
-        let leftText = '';
-        let rightText = '';
+        // Clear the line first
+        this.screen.writeLine(y, '');
         if (this.notification) {
-            leftText = ` ${this.notification}`;
-        }
-        else {
-            const stats = this.options.getStatus().tokenStats;
-            const tokenInfo = stats && stats.totalTokens > 0
-                ? ` | ${stats.totalTokens < 1000 ? stats.totalTokens : (stats.totalTokens / 1000).toFixed(1) + 'K'} tokens`
-                : '';
-            leftText = ` ${this.messages.length} messages${tokenInfo}`;
-        }
-        if (this.isStreaming) {
-            rightText = 'Streaming... (Esc to cancel)';
-        }
-        else if (this.isLoading) {
-            rightText = 'Thinking...';
+            // Notification: gradient colored, full width
+            const notifText = ` ${this.notification}`;
+            this.screen.write(0, y, gradientText(notifText, GRADIENT_STOPS));
+            return;
         }
-        else {
-            rightText = 'Enter send | /help commands';
+        const status = this.options.getStatus();
+        const stats = status.tokenStats;
+        // Left segment: msg count · token count
+        const msgCount = `${this.messages.length} msg`;
+        const tokenStr = stats && stats.totalTokens > 0
+            ? `${stats.totalTokens < 1000 ? stats.totalTokens : (stats.totalTokens / 1000).toFixed(1) + 'K'} tok`
+            : '';
+        const leftParts = [msgCount, tokenStr].filter(Boolean);
+        const leftText = ' ' + leftParts.join(' · ');
+        this.screen.write(0, y, leftText, fg.gray + style.dim);
+        // Center: model name with gradient (only if it fits)
+        const modelName = status.model || '';
+        if (modelName && width > 40) {
+            const modelX = Math.floor((width - modelName.length) / 2);
+            this.screen.write(modelX, y, gradientText(modelName, GRADIENT_STOPS));
+        }
+        // Right: Esc hint only when active, nothing when idle
+        if (this.isStreaming || this.isLoading) {
+            const rightText = 'Esc  ';
+            this.screen.write(width - rightText.length, y, rightText, fg.gray + style.dim);
         }
-        const padding = ' '.repeat(Math.max(0, width - leftText.length - rightText.length));
-        this.screen.writeLine(y, leftText + padding + rightText, fg.gray);
     }
     /**
      * Get visible messages (including streaming)

package/dist/renderer/ansi.d.ts

@@ -81,6 +81,17 @@ export declare const style: {
  * Helper to create styled text
  */
 export declare function styled(text: string, ...styles: string[]): string;
+/**
+ * Render text with a horizontal RGB gradient across multiple color stops.
+ * Each character gets its own fg.rgb() code.
+ * Stops: array of [r,g,b] colors distributed evenly across the text.
+ */
+export declare function gradientText(text: string, stops: Array<[number, number, number]>): string;
+/**
+ * Render a full-width separator line with a gradient.
+ * Uses the given char (default '─') repeated across width.
+ */
+export declare function gradientLine(width: number, stops: Array<[number, number, number]>, char?: string): string;
 /**
  * Get terminal display width of a single character
  * CJK, fullwidth, and emoji characters take 2 columns

package/dist/renderer/ansi.js

@@ -101,6 +101,48 @@ export function styled(text, ...styles) {
         return text;
     return styles.join('') + text + style.reset;
 }
+/**
+ * Interpolate between two RGB colors at position t (0..1)
+ */
+function lerpColor(from, to, t) {
+    return [
+        Math.round(from[0] + (to[0] - from[0]) * t),
+        Math.round(from[1] + (to[1] - from[1]) * t),
+        Math.round(from[2] + (to[2] - from[2]) * t),
+    ];
+}
+/**
+ * Render text with a horizontal RGB gradient across multiple color stops.
+ * Each character gets its own fg.rgb() code.
+ * Stops: array of [r,g,b] colors distributed evenly across the text.
+ */
+export function gradientText(text, stops) {
+    if (stops.length === 0)
+        return text;
+    if (stops.length === 1)
+        return fg.rgb(...stops[0]) + text + style.reset;
+    const chars = [...text]; // handle multi-byte / emoji
+    const len = chars.length;
+    if (len === 0)
+        return text;
+    let result = '';
+    for (let i = 0; i < len; i++) {
+        const t = len === 1 ? 0 : i / (len - 1);
+        // Which segment between stops?
+        const seg = Math.min(Math.floor(t * (stops.length - 1)), stops.length - 2);
+        const segT = t * (stops.length - 1) - seg;
+        const [r, g, b] = lerpColor(stops[seg], stops[seg + 1], segT);
+        result += fg.rgb(r, g, b) + chars[i];
+    }
+    return result + style.reset;
+}
+/**
+ * Render a full-width separator line with a gradient.
+ * Uses the given char (default '─') repeated across width.
+ */
+export function gradientLine(width, stops, char = '─') {
+    return gradientText(char.repeat(width), stops);
+}
 /**
  * Get terminal display width of a single character
  * CJK, fullwidth, and emoji characters take 2 columns

package/package.json

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