wave-code 0.0.4 → 0.0.6

package/dist/print-cli.d.ts

@@ -0,0 +1,8 @@
+export interface PrintCliOptions {
+    restoreSessionId?: string;
+    continueLastSession?: boolean;
+    message?: string;
+    showStats?: boolean;
+}
+export declare function startPrintCli(options: PrintCliOptions): Promise<void>;
+//# sourceMappingURL=print-cli.d.ts.map

package/dist/print-cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"print-cli.d.ts","sourceRoot":"","sources":["../src/print-cli.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgBD,wBAAsB,aAAa,CAAC,OAAO,EAAE,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAuI3E"}

package/dist/print-cli.js

@@ -0,0 +1,128 @@
+import { Agent } from "wave-agent-sdk";
+import { displayUsageSummary } from "./utils/usageSummary.js";
+function displayTimingInfo(startTime, showStats) {
+    // Skip timing info in test environment or if stats are disabled
+    if (process.env.NODE_ENV === "test" || process.env.VITEST || !showStats) {
+        return;
+    }
+    const endTime = new Date();
+    const duration = endTime.getTime() - startTime.getTime();
+    process.stdout.write(`\n\n📅 Start time: ${startTime.toISOString()}\n`);
+    process.stdout.write(`📅 End time: ${endTime.toISOString()}\n`);
+    process.stdout.write(`⏱️  Duration: ${duration}ms\n`);
+}
+export async function startPrintCli(options) {
+    const startTime = new Date();
+    const { restoreSessionId, continueLastSession, message, showStats = false, } = options;
+    if ((!message || message.trim() === "") &&
+        !continueLastSession &&
+        !restoreSessionId) {
+        console.error("Print mode requires a message: use --print 'your message' or -p 'your message'");
+        process.exit(1);
+    }
+    let agent;
+    // Setup callbacks for agent
+    const callbacks = {
+        onAssistantMessageAdded: () => {
+            // Assistant message started - no content to output yet
+            process.stdout.write("\n");
+        },
+        onAssistantContentUpdated: (chunk) => {
+            // FR-001: Stream content updates for real-time display - output only the new chunk
+            process.stdout.write(chunk);
+        },
+        // Tool block callback - display tool name when tool starts
+        onToolBlockUpdated: (params) => {
+            // Print tool name only during 'running' stage (happens once per tool call)
+            if (params.stage === "running" && params.name) {
+                process.stdout.write(`\n🔧 ${params.name}`);
+                if (params.compactParams) {
+                    process.stdout.write(` ${params.compactParams}`);
+                }
+                process.stdout.write(`\n`);
+            }
+        },
+        // Subagent block callbacks
+        onSubAgentBlockAdded: (subagentId, parameters) => {
+            // Display subagent creation with indentation
+            process.stdout.write(`\n🤖 Subagent [${parameters.subagent_type}]: ${parameters.description}\n`);
+        },
+        onSubAgentBlockUpdated: (subagentId, status) => {
+            // Display subagent status updates
+            const statusIconMap = {
+                active: "🔄",
+                completed: "✅",
+                error: "❌",
+                aborted: "⚠️",
+            };
+            const statusIcon = statusIconMap[status] ?? "🔄";
+            process.stdout.write(`   ${statusIcon} Subagent status: ${status}\n`);
+        },
+        // Subagent message callbacks
+        onSubagentAssistantMessageAdded: () => {
+            // Subagent assistant message started - add indentation
+            process.stdout.write("\n   ");
+        },
+        onSubagentAssistantContentUpdated: (_subagentId, chunk) => {
+            // Stream subagent content with indentation - output only the new chunk
+            process.stdout.write(chunk);
+        },
+        onSubagentUserMessageAdded: (_subagentId, params) => {
+            // Display subagent user messages with indentation
+            process.stdout.write(`\n   👤 User: ${params.content}\n`);
+        },
+        // Error block callback
+        onErrorBlockAdded: (error) => {
+            // Display error blocks with distinct formatting
+            process.stdout.write(`\n❌ Error: ${error}\n`);
+        },
+    };
+    try {
+        // Initialize agent
+        agent = await Agent.create({
+            callbacks,
+            restoreSessionId,
+            continueLastSession,
+        });
+        // Send message if provided and not empty
+        if (message && message.trim() !== "") {
+            await agent.sendMessage(message);
+        }
+        // Display usage summary before exit
+        if (showStats) {
+            try {
+                const usages = agent.usages;
+                const sessionFilePath = agent.sessionFilePath;
+                displayUsageSummary(usages, sessionFilePath);
+            }
+            catch {
+                // Silently ignore usage summary errors
+            }
+        }
+        // Display timing information
+        displayTimingInfo(startTime, showStats);
+        // Destroy agent and exit after sendMessage completes
+        await agent.destroy();
+        process.exit(0);
+    }
+    catch (error) {
+        console.error("Failed to send message:", error);
+        if (agent) {
+            // Display usage summary even on error
+            if (showStats) {
+                try {
+                    const usages = agent.usages;
+                    const sessionFilePath = agent.sessionFilePath;
+                    displayUsageSummary(usages, sessionFilePath);
+                }
+                catch {
+                    // Silently ignore usage summary errors
+                }
+            }
+            // Display timing information even on error
+            displayTimingInfo(startTime, showStats);
+            await agent.destroy();
+        }
+        process.exit(1);
+    }
+}

package/dist/utils/constants.d.ts

@@ -13,5 +13,5 @@ export declare const LOG_FILE: string;
 /**
  * Pagination related constants
  */
-export declare const MESSAGES_PER_PAGE = 20;
+export declare const MESSAGES_PER_PAGE = 15;
 //# sourceMappingURL=constants.d.ts.map

package/dist/utils/constants.js

@@ -15,4 +15,4 @@ export const LOG_FILE = path.join(DATA_DIRECTORY, "app.log");
 /**
  * Pagination related constants
  */
-export const MESSAGES_PER_PAGE = 20; // Number of messages displayed per page
+export const MESSAGES_PER_PAGE = 15; // Number of messages displayed per page

package/dist/utils/fileSearch.d.ts

@@ -0,0 +1,20 @@
+export interface FileItem {
+    path: string;
+    type: "file" | "directory";
+}
+/**
+ * Check if path is a directory
+ */
+export declare const isDirectory: (filePath: string) => boolean;
+/**
+ * Convert string paths to FileItem objects
+ */
+export declare const convertToFileItems: (paths: string[]) => FileItem[];
+/**
+ * Search files and directories using glob patterns
+ */
+export declare const searchFiles: (query: string, options?: {
+    maxResults?: number;
+    workingDirectory?: string;
+}) => Promise<FileItem[]>;
+//# sourceMappingURL=fileSearch.d.ts.map

package/dist/utils/fileSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileSearch.d.ts","sourceRoot":"","sources":["../../src/utils/fileSearch.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,OAS9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,EAAE,KAAG,QAAQ,EAK5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GACtB,OAAO,MAAM,EACb,UAAU;IACR,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,KACA,OAAO,CAAC,QAAQ,EAAE,CAyFpB,CAAC"}

package/dist/utils/fileSearch.js

@@ -0,0 +1,102 @@
+import { glob } from "glob";
+import { getGlobIgnorePatterns } from "wave-agent-sdk";
+import * as fs from "fs";
+import * as path from "path";
+/**
+ * Check if path is a directory
+ */
+export const isDirectory = (filePath) => {
+    try {
+        const fullPath = path.isAbsolute(filePath)
+            ? filePath
+            : path.join(process.cwd(), filePath);
+        return fs.statSync(fullPath).isDirectory();
+    }
+    catch {
+        return false;
+    }
+};
+/**
+ * Convert string paths to FileItem objects
+ */
+export const convertToFileItems = (paths) => {
+    return paths.map((filePath) => ({
+        path: filePath,
+        type: isDirectory(filePath) ? "directory" : "file",
+    }));
+};
+/**
+ * Search files and directories using glob patterns
+ */
+export const searchFiles = async (query, options) => {
+    const { maxResults = 10, workingDirectory = process.cwd() } = options || {};
+    try {
+        let files = [];
+        let directories = [];
+        const globOptions = {
+            ignore: getGlobIgnorePatterns(workingDirectory),
+            maxDepth: 10,
+            nocase: true, // Case insensitive
+            dot: true, // Include hidden files and directories
+            cwd: workingDirectory, // Specify search root directory
+        };
+        if (!query.trim()) {
+            // When query is empty, show some common file types and directories
+            const commonPatterns = [
+                "**/*.ts",
+                "**/*.tsx",
+                "**/*.js",
+                "**/*.jsx",
+                "**/*.json",
+            ];
+            // Search files
+            const filePromises = commonPatterns.map((pattern) => glob(pattern, { ...globOptions, nodir: true }));
+            // Search directories (only search first level to avoid too many results)
+            const dirPromises = [glob("*/", { ...globOptions, maxDepth: 1 })];
+            const fileResults = await Promise.all(filePromises);
+            const dirResults = await Promise.all(dirPromises);
+            files = fileResults.flat();
+            directories = dirResults.flat().map((dir) => {
+                // glob returns string type paths, remove trailing slash
+                return String(dir).replace(/\/$/, "");
+            });
+        }
+        else {
+            // Build multiple glob patterns to support more flexible search
+            const filePatterns = [
+                // Match files with filenames containing query
+                `**/*${query}*`,
+                // Match files with query in path (match directory names)
+                `**/${query}*/**/*`,
+            ];
+            const dirPatterns = [
+                // Match directory names containing query
+                `**/*${query}*/`,
+                // Match directories containing query in path
+                `**/${query}*/`,
+            ];
+            // Search files
+            const filePromises = filePatterns.map((pattern) => glob(pattern, { ...globOptions, nodir: true }));
+            // Search directories
+            const dirPromises = dirPatterns.map((pattern) => glob(pattern, { ...globOptions, nodir: false }));
+            const fileResults = await Promise.all(filePromises);
+            const dirResults = await Promise.all(dirPromises);
+            files = fileResults.flat();
+            directories = dirResults.flat().map((dir) => {
+                // glob returns string type paths, remove trailing slash
+                return String(dir).replace(/\/$/, "");
+            });
+        }
+        // Deduplicate and merge files and directories
+        const uniqueFiles = Array.from(new Set(files));
+        const uniqueDirectories = Array.from(new Set(directories));
+        const allPaths = [...uniqueDirectories, ...uniqueFiles]; // Directories first
+        // Limit to maximum results and convert to FileItem
+        const fileItems = convertToFileItems(allPaths.slice(0, maxResults));
+        return fileItems;
+    }
+    catch (error) {
+        console.error("Glob search error:", error);
+        return [];
+    }
+};

package/dist/utils/logger.js

@@ -216,7 +216,7 @@ const truncateLogFileIfNeeded = (config) => {
             fs.writeFileSync(logFile, truncatedContent);
             // Record truncation operation
             const removedLines = lines.length - keepLines;
-            logger.info(`Log file truncated: removed ${removedLines} lines, kept last ${keepLines} lines`);
+            logger.debug(`Log file truncated: removed ${removedLines} lines, kept last ${keepLines} lines`);
         }
     }
     catch (error) {
@@ -235,11 +235,11 @@ export const cleanupLogs = async (customConfig) => {
         return;
     }
     const config = { ...getCleanupConfig(), ...customConfig };
-    logger.info("Starting log cleanup...", {
+    logger.debug("Starting log cleanup...", {
         maxFileSize: config.maxFileSize,
         keepLines: config.keepLines,
     });
     // Truncate current log file (if needed)
     truncateLogFileIfNeeded(config);
-    logger.info("Log cleanup completed");
+    logger.debug("Log cleanup completed");
 };

package/dist/utils/usageSummary.d.ts

@@ -0,0 +1,33 @@
+import type { Usage } from "wave-agent-sdk";
+/**
+ * Token summary by model
+ */
+export interface TokenSummary {
+    model: string;
+    prompt_tokens: number;
+    completion_tokens: number;
+    total_tokens: number;
+    operations: {
+        agent_calls: number;
+        compressions: number;
+    };
+    cache_read_input_tokens?: number;
+    cache_creation_input_tokens?: number;
+    cache_creation?: {
+        ephemeral_5m_input_tokens: number;
+        ephemeral_1h_input_tokens: number;
+    };
+}
+/**
+ * Calculate token usage summary by model from usage array
+ * @param usages Array of usage data from agent operations
+ * @returns Array of token summaries grouped by model
+ */
+export declare function calculateTokenSummary(usages: Usage[]): Record<string, TokenSummary>;
+/**
+ * Display usage summary in a formatted way
+ * @param usages Array of usage data from agent operations
+ * @param sessionFilePath Optional session file path to display
+ */
+export declare function displayUsageSummary(usages: Usage[], sessionFilePath?: string): void;
+//# sourceMappingURL=usageSummary.d.ts.map

package/dist/utils/usageSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usageSummary.d.ts","sourceRoot":"","sources":["../../src/utils/usageSummary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE;QACV,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IAEF,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE;QACf,yBAAyB,EAAE,MAAM,CAAC;QAClC,yBAAyB,EAAE,MAAM,CAAC;KACnC,CAAC;CACH;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,KAAK,EAAE,GACd,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAyE9B;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,eAAe,CAAC,EAAE,MAAM,GACvB,IAAI,CAwHN"}

package/dist/utils/usageSummary.js

@@ -0,0 +1,154 @@
+/**
+ * Calculate token usage summary by model from usage array
+ * @param usages Array of usage data from agent operations
+ * @returns Array of token summaries grouped by model
+ */
+export function calculateTokenSummary(usages) {
+    const summaryMap = new Map();
+    for (const usage of usages) {
+        const model = usage.model || "unknown";
+        if (!summaryMap.has(model)) {
+            summaryMap.set(model, {
+                model,
+                prompt_tokens: 0,
+                completion_tokens: 0,
+                total_tokens: 0,
+                operations: {
+                    agent_calls: 0,
+                    compressions: 0,
+                },
+            });
+        }
+        const summary = summaryMap.get(model);
+        summary.prompt_tokens += usage.prompt_tokens;
+        summary.completion_tokens += usage.completion_tokens;
+        summary.total_tokens += usage.total_tokens;
+        // Handle cache tokens if present and non-zero
+        if (usage.cache_read_input_tokens && usage.cache_read_input_tokens > 0) {
+            summary.cache_read_input_tokens =
+                (summary.cache_read_input_tokens || 0) + usage.cache_read_input_tokens;
+        }
+        if (usage.cache_creation_input_tokens &&
+            usage.cache_creation_input_tokens > 0) {
+            summary.cache_creation_input_tokens =
+                (summary.cache_creation_input_tokens || 0) +
+                    usage.cache_creation_input_tokens;
+        }
+        if (usage.cache_creation &&
+            (usage.cache_creation.ephemeral_5m_input_tokens > 0 ||
+                usage.cache_creation.ephemeral_1h_input_tokens > 0)) {
+            if (!summary.cache_creation) {
+                summary.cache_creation = {
+                    ephemeral_5m_input_tokens: 0,
+                    ephemeral_1h_input_tokens: 0,
+                };
+            }
+            summary.cache_creation.ephemeral_5m_input_tokens +=
+                usage.cache_creation.ephemeral_5m_input_tokens || 0;
+            summary.cache_creation.ephemeral_1h_input_tokens +=
+                usage.cache_creation.ephemeral_1h_input_tokens || 0;
+        }
+        // Track operation types
+        if (usage.operation_type === "agent") {
+            summary.operations.agent_calls += 1;
+        }
+        else if (usage.operation_type === "compress") {
+            summary.operations.compressions += 1;
+        }
+    }
+    // Convert Map to Record and sort by total tokens
+    const result = {};
+    const sortedEntries = Array.from(summaryMap.entries()).sort((a, b) => b[1].total_tokens - a[1].total_tokens);
+    for (const [model, summary] of sortedEntries) {
+        result[model] = summary;
+    }
+    return result;
+}
+/**
+ * Display usage summary in a formatted way
+ * @param usages Array of usage data from agent operations
+ * @param sessionFilePath Optional session file path to display
+ */
+export function displayUsageSummary(usages, sessionFilePath) {
+    if (usages.length === 0) {
+        return; // No usage data to display
+    }
+    const summaries = calculateTokenSummary(usages);
+    console.log("\nToken Usage Summary:");
+    console.log("==================");
+    if (sessionFilePath) {
+        console.log(`Session: ${sessionFilePath}`);
+    }
+    let totalPrompt = 0;
+    let totalCompletion = 0;
+    let totalTokens = 0;
+    let totalAgentCalls = 0;
+    let totalCompressions = 0;
+    let totalCacheRead = 0;
+    let totalCacheCreation = 0;
+    let totalCache5m = 0;
+    let totalCache1h = 0;
+    let hasCacheData = false;
+    for (const [, summary] of Object.entries(summaries)) {
+        console.log(`Model: ${summary.model}`);
+        console.log(`  Prompt tokens: ${summary.prompt_tokens.toLocaleString()}`);
+        console.log(`  Completion tokens: ${summary.completion_tokens.toLocaleString()}`);
+        console.log(`  Total tokens: ${summary.total_tokens.toLocaleString()}`);
+        // Display cache information if available
+        if (summary.cache_read_input_tokens ||
+            summary.cache_creation_input_tokens ||
+            summary.cache_creation) {
+            hasCacheData = true;
+            console.log("  Cache Usage:");
+            if (summary.cache_read_input_tokens &&
+                summary.cache_read_input_tokens > 0) {
+                console.log(`    Read from cache: ${summary.cache_read_input_tokens.toLocaleString()} tokens`);
+                totalCacheRead += summary.cache_read_input_tokens;
+            }
+            if (summary.cache_creation_input_tokens &&
+                summary.cache_creation_input_tokens > 0) {
+                console.log(`    Created cache: ${summary.cache_creation_input_tokens.toLocaleString()} tokens`);
+                totalCacheCreation += summary.cache_creation_input_tokens;
+            }
+            if (summary.cache_creation) {
+                if (summary.cache_creation.ephemeral_5m_input_tokens > 0) {
+                    console.log(`    5m cache: ${summary.cache_creation.ephemeral_5m_input_tokens.toLocaleString()} tokens`);
+                    totalCache5m += summary.cache_creation.ephemeral_5m_input_tokens;
+                }
+                if (summary.cache_creation.ephemeral_1h_input_tokens > 0) {
+                    console.log(`    1h cache: ${summary.cache_creation.ephemeral_1h_input_tokens.toLocaleString()} tokens`);
+                    totalCache1h += summary.cache_creation.ephemeral_1h_input_tokens;
+                }
+            }
+        }
+        console.log(`  Operations: ${summary.operations.agent_calls} agent calls, ${summary.operations.compressions} compressions`);
+        console.log();
+        totalPrompt += summary.prompt_tokens;
+        totalCompletion += summary.completion_tokens;
+        totalTokens += summary.total_tokens;
+        totalAgentCalls += summary.operations.agent_calls;
+        totalCompressions += summary.operations.compressions;
+    }
+    if (Object.keys(summaries).length > 1) {
+        console.log("Overall Total:");
+        console.log(`  Prompt tokens: ${totalPrompt.toLocaleString()}`);
+        console.log(`  Completion tokens: ${totalCompletion.toLocaleString()}`);
+        console.log(`  Total tokens: ${totalTokens.toLocaleString()}`);
+        if (hasCacheData) {
+            console.log("  Cache Usage:");
+            if (totalCacheRead > 0) {
+                console.log(`    Read from cache: ${totalCacheRead.toLocaleString()} tokens`);
+            }
+            if (totalCacheCreation > 0) {
+                console.log(`    Created cache: ${totalCacheCreation.toLocaleString()} tokens`);
+            }
+            if (totalCache5m > 0) {
+                console.log(`    5m cache: ${totalCache5m.toLocaleString()} tokens`);
+            }
+            if (totalCache1h > 0) {
+                console.log(`    1h cache: ${totalCache1h.toLocaleString()} tokens`);
+            }
+        }
+        console.log(`  Operations: ${totalAgentCalls} agent calls, ${totalCompressions} compressions`);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "keywords": [
     "ai",
@@ -24,14 +24,18 @@
     "README.md"
   ],
   "dependencies": {
-    "ink": "^6.0.1",
-    "react": "^19.1.0",
-    "yargs": "^17.7.2",
+    "chalk": "^5.6.2",
     "diff": "^8.0.2",
     "glob": "^11.0.3",
-    "wave-agent-sdk": "0.0.4"
+    "ink": "^6.5.1",
+    "marked": "^11.2.0",
+    "marked-terminal": "^7.3.0",
+    "react": "^19.1.0",
+    "yargs": "^17.7.2",
+    "wave-agent-sdk": "0.0.8"
   },
   "devDependencies": {
+    "@types/marked-terminal": "^6.1.1",
     "@types/react": "^19.1.8",
     "@types/yargs": "^17.0.0",
     "eslint-plugin-react": "^7.37.5",
@@ -52,7 +56,7 @@
   "scripts": {
     "build": "rimraf dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "type-check": "tsc --noEmit --incremental",
-    "dev": "tsc -p tsconfig.build.json --watch & tsc-alias -p tsconfig.build.json --watch",
+    "watch": "tsc -p tsconfig.build.json --watch & tsc-alias -p tsconfig.build.json --watch",
     "test": "vitest run",
     "lint": "eslint --cache",
     "format": "prettier --write ."

package/src/components/ChatInterface.tsx

@@ -1,9 +1,8 @@
-import React, { useRef, useEffect } from "react";
+import React from "react";
 import { Box } from "ink";
 import { MessageList } from "./MessageList.js";
 import { InputBox } from "./InputBox.js";
 import { useChat } from "../contexts/useChat.js";
-import type { Message } from "wave-agent-sdk";
 
 export const ChatInterface: React.FC = () => {
   const {
@@ -19,54 +18,25 @@ export const ChatInterface: React.FC = () => {
     connectMcpServer,
     disconnectMcpServer,
     isExpanded,
+    sessionId,
     latestTotalTokens,
     slashCommands,
     hasSlashCommand,
   } = useChat();
 
-  // Create a ref to store messages in expanded mode
-  const expandedMessagesRef = useRef<Message[]>([]);
-
-  useEffect(() => {
-    // Only sync when collapsed
-    if (!isExpanded) {
-      expandedMessagesRef.current = messages.map((message, index) => {
-        // If it's the last message, deep copy its blocks
-        if (index === messages.length - 1) {
-          return {
-            ...message,
-            blocks: message.blocks.map((block) => ({ ...block })),
-          };
-        }
-        return message;
-      });
-    }
-  }, [isExpanded, messages]);
+  if (!sessionId) return null;
 
   return (
-    <Box flexDirection="column" height="100%">
-      <Box flexGrow={1} flexDirection="column" paddingX={1}>
-        {isExpanded ? (
-          // Expanded mode uses messages from ref, loading and tokens are hardcoded to false and 0
-          <MessageList
-            messages={expandedMessagesRef.current}
-            isLoading={false}
-            isCommandRunning={false}
-            latestTotalTokens={0}
-            isExpanded={true}
-          />
-        ) : (
-          // Normal mode uses real-time state
-          <MessageList
-            messages={messages}
-            isLoading={isLoading}
-            isCommandRunning={isCommandRunning}
-            isCompressing={isCompressing}
-            latestTotalTokens={latestTotalTokens}
-            isExpanded={false}
-          />
-        )}
-      </Box>
+    <Box flexDirection="column" height="100%" paddingY={1}>
+      <MessageList
+        messages={messages}
+        isLoading={isLoading}
+        isCommandRunning={isCommandRunning}
+        isCompressing={isCompressing}
+        latestTotalTokens={latestTotalTokens}
+        isExpanded={isExpanded}
+        key={String(isExpanded) + sessionId}
+      />
 
       {!isExpanded && (
         <InputBox

package/src/components/CommandSelector.tsx

@@ -41,7 +41,7 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
   const filteredCommands = allCommands.filter(
     (command) =>
       !searchQuery ||
-      command.name.toLowerCase().includes(searchQuery.toLowerCase()),
+      command.id.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
   useInput((input, key) => {
@@ -50,7 +50,7 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
         filteredCommands.length > 0 &&
         selectedIndex < filteredCommands.length
       ) {
-        const selectedCommand = filteredCommands[selectedIndex].name;
+        const selectedCommand = filteredCommands[selectedIndex].id;
         onSelect(selectedCommand);
       }
       return;
@@ -61,7 +61,7 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
         filteredCommands.length > 0 &&
         selectedIndex < filteredCommands.length
       ) {
-        const selectedCommand = filteredCommands[selectedIndex].name;
+        const selectedCommand = filteredCommands[selectedIndex].id;
         onInsert(selectedCommand);
       }
       return;
@@ -116,12 +116,12 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
       </Box>
 
       {filteredCommands.map((command, index) => (
-        <Box key={command.name} flexDirection="column">
+        <Box key={command.id} flexDirection="column">
           <Text
             color={index === selectedIndex ? "black" : "white"}
             backgroundColor={index === selectedIndex ? "magenta" : undefined}
           >
-            {index === selectedIndex ? "▶ " : "  "}/{command.name}
+            {index === selectedIndex ? "▶ " : "  "}/{command.id}
           </Text>
           {index === selectedIndex && (
             <Box marginLeft={4}>