wave-code 0.0.5 → 0.0.6

package/dist/utils/usageSummary.js

@@ -23,6 +23,31 @@ export function calculateTokenSummary(usages) {
         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;
@@ -59,11 +84,43 @@ export function displayUsageSummary(usages, sessionFilePath) {
     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;
@@ -77,6 +134,21 @@ export function displayUsageSummary(usages, sessionFilePath) {
         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.5",
+  "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.7"
+    "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}>

package/src/components/DiffViewer.tsx

@@ -5,7 +5,7 @@ import type { DiffBlock } from "wave-agent-sdk";
 
 interface DiffViewerProps {
   block: DiffBlock;
-  isExpanded?: boolean;
+  isStatic?: boolean;
 }
 
 // Render word-level diff
@@ -48,7 +48,7 @@ const renderWordLevelDiff = (removedLine: string, addedLine: string) => {
 
 export const DiffViewer: React.FC<DiffViewerProps> = ({
   block,
-  isExpanded = false,
+  isStatic = true,
 }) => {
   const { diffResult } = block;
 
@@ -246,21 +246,22 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
     // Handle remaining deleted lines at the end
     flushPendingLines();
 
-    // Only limit displayed lines in collapsed state
-    if (!isExpanded) {
-      const MAX_DISPLAY_LINES = 50;
-      if (lines.length > MAX_DISPLAY_LINES) {
-        const truncatedLines = lines.slice(0, MAX_DISPLAY_LINES);
-        truncatedLines.push({
-          content: `... (${lines.length - MAX_DISPLAY_LINES} more lines truncated, press Ctrl+O to expand)`,
-          type: "separator",
-        });
-        return truncatedLines;
-      }
+    return lines;
+  }, [diffResult]);
+
+  // Truncate to last 10 lines for non-static items
+  const displayLines = useMemo(() => {
+    if (isStatic) {
+      return diffLines;
     }
 
-    return lines;
-  }, [diffResult, isExpanded]);
+    const MAX_LINES = 10;
+    if (diffLines.length <= MAX_LINES) {
+      return diffLines;
+    }
+
+    return diffLines.slice(-MAX_LINES);
+  }, [diffLines, isStatic]);
 
   if (!diffResult || diffResult.length === 0) {
     return (
@@ -270,11 +271,12 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
     );
   }
 
+  // Show traditional diff view
   return (
     <Box flexDirection="column">
       <Box flexDirection="column">
         <Box flexDirection="column">
-          {diffLines.map((line, index) => {
+          {displayLines.map((line, index) => {
             // If has word-level diff, render special effects
             if (line.wordDiff) {
               const prefix = line.type === "removed" ? "- " : "+ ";

package/src/components/FileSelector.tsx

@@ -22,7 +22,7 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   useInput((input, key) => {
-    if (key.return) {
+    if (key.return || key.tab) {
       if (files.length > 0 && selectedIndex < files.length) {
         onSelect(files[selectedIndex].path);
       }
@@ -126,7 +126,7 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
 
       <Box marginTop={1}>
         <Text dimColor>
-          Use ↑↓ to navigate, Enter to select, Escape to cancel
+          Use ↑↓ to navigate, Enter/Tab to select, Escape to cancel
         </Text>
         <Text dimColor>
           File {selectedIndex + 1} of {files.length}

package/src/components/InputBox.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { Box, Text } from "ink";
 import { useInput } from "ink";
 import { FileSelector } from "./FileSelector.js";
@@ -53,19 +53,13 @@ export const InputBox: React.FC<InputBoxProps> = ({
   slashCommands = [],
   hasSlashCommand = () => false,
 }) => {
-  // Get current working directory
-  const currentWorkdir = workdir || process.cwd();
-
-  // Simple history navigation reset function
-  const resetHistoryNavigation = useCallback(() => {
-    // This will be handled by InputManager through callbacks
-  }, []);
+  // Get current working directory - memoized to avoid repeated process.cwd() calls
+  const currentWorkdir = useMemo(() => workdir || process.cwd(), [workdir]);
 
   // Input manager with all input state and functionality (including images)
   const {
     inputText,
     cursorPosition,
-    clearInput,
     // Image management
     attachedImages,
     clearImages,
@@ -73,24 +67,23 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showFileSelector,
     filteredFiles,
     fileSearchQuery: searchQuery,
-    handleFileSelect: handleFileSelectorSelect,
+    handleFileSelect,
     handleCancelFileSelect,
     // Command selector
     showCommandSelector,
     commandSearchQuery,
-    handleCommandSelect: handleCommandSelectorSelect,
-    handleCommandInsert: handleCommandSelectorInsert,
+    handleCommandSelect,
+    handleCommandInsert,
     handleCancelCommandSelect,
     // Bash history selector
     showBashHistorySelector,
     bashHistorySearchQuery,
-    handleBashHistorySelect: handleBashHistorySelectorSelect,
-    handleBashHistoryExecute,
+    handleBashHistorySelect,
     handleCancelBashHistorySelect,
     // Memory type selector
     showMemoryTypeSelector,
     memoryMessage,
-    handleMemoryTypeSelect: handleMemoryTypeSelectorSelect,
+    handleMemoryTypeSelect,
     handleCancelMemoryTypeSelect,
     // Bash/MCP Manager
     showBashManager,
@@ -99,16 +92,17 @@ export const InputBox: React.FC<InputBoxProps> = ({
     setShowMcpManager,
     // Input history
     setUserInputHistory,
+    // Complex handlers combining multiple operations
+    handleBashHistoryExecuteAndSend,
     // Main handler
     handleInput,
+    // Manager ready state
+    isManagerReady,
   } = useInputManager({
-    onShowBashManager: () => setShowBashManager(true),
-    onShowMcpManager: () => setShowMcpManager(true),
     onSendMessage: sendMessage,
     onHasSlashCommand: hasSlashCommand,
     onSaveMemory: saveMemory,
     onAbortMessage: abortMessage,
-    onResetHistoryNavigation: resetHistoryNavigation,
   });
 
   // Set user input history when it changes
@@ -128,65 +122,14 @@ export const InputBox: React.FC<InputBoxProps> = ({
     );
   });
 
-  // Handler functions for keyboard events
-  const handleFileSelect = useCallback(
-    (filePath: string) => {
-      handleFileSelectorSelect(filePath);
-    },
-    [handleFileSelectorSelect],
-  );
-
-  const handleCommandSelect = useCallback(
-    (command: string) => {
-      handleCommandSelectorSelect(command);
-    },
-    [handleCommandSelectorSelect],
-  );
+  // These methods are already memoized in useInputManager, no need to wrap again
 
-  const handleBashHistorySelect = useCallback(
-    (command: string) => {
-      handleBashHistorySelectorSelect(command);
-    },
-    [handleBashHistorySelectorSelect],
-  );
-
-  const keyboardHandleBashHistoryExecute = useCallback(
-    (command: string) => {
-      const commandToExecute = handleBashHistoryExecute(command);
-      // Clear input box and execute command, ensure command starts with !
-      const bashCommand = commandToExecute.startsWith("!")
-        ? commandToExecute
-        : `!${commandToExecute}`;
-      clearInput();
-      sendMessage(bashCommand);
-    },
-    [handleBashHistoryExecute, clearInput, sendMessage],
-  );
-
-  const handleMemoryTypeSelect = useCallback(
-    async (type: "project" | "user") => {
-      const currentMessage = inputText.trim();
-      if (currentMessage.startsWith("#")) {
-        await saveMemory(currentMessage, type);
-      }
-      // Call the handler function to close the selector
-      handleMemoryTypeSelectorSelect(type);
-      // Clear input box
-      clearInput();
-    },
-    [inputText, saveMemory, handleMemoryTypeSelectorSelect, clearInput],
-  );
+  // These methods are already memoized in useInputManager and combine multiple operations
 
   const isPlaceholder = !inputText;
   const placeholderText = INPUT_PLACEHOLDER_TEXT;
 
-  // Create adapter function for CommandSelector
-  const handleCommandInsert = useCallback(
-    (command: string) => {
-      handleCommandSelectorInsert(command);
-    },
-    [handleCommandSelectorInsert],
-  );
+  // handleCommandSelectorInsert is already memoized in useInputManager, no need to wrap again
 
   // Split text into three parts: before cursor, cursor position, after cursor
   const displayText = isPlaceholder ? placeholderText : inputText;
@@ -198,8 +141,13 @@ export const InputBox: React.FC<InputBoxProps> = ({
   // Always show cursor, allow user to continue input during loading
   const shouldShowCursor = true;
 
+  // Only show the Box after InputManager is created on first mount
+  if (!isManagerReady) {
+    return null;
+  }
+
   return (
-    <Box flexDirection="column" width={"100%"}>
+    <Box flexDirection="column">
       {showFileSelector && (
         <FileSelector
           files={filteredFiles}
@@ -224,7 +172,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
           searchQuery={bashHistorySearchQuery}
           workdir={currentWorkdir}
           onSelect={handleBashHistorySelect}
-          onExecute={keyboardHandleBashHistoryExecute}
+          onExecute={handleBashHistoryExecuteAndSend}
           onCancel={handleCancelBashHistorySelect}
         />
       )}

package/src/components/Markdown.tsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from "react";
+import { Text } from "ink";
+import { marked } from "marked";
+import TerminalRenderer from "marked-terminal";
+
+export interface MarkdownProps {
+  children: string;
+}
+
+// Markdown component using marked-terminal with proper unescape option
+export const Markdown = React.memo(({ children }: MarkdownProps) => {
+  const result = useMemo(() => {
+    // Configure marked with TerminalRenderer using default options
+    marked.setOptions({
+      renderer: new TerminalRenderer({
+        // Use official unescape option to handle HTML entities
+        unescape: true,
+      }),
+    });
+
+    const output = marked(children);
+    return typeof output === "string" ? output.trim() : "";
+  }, [children]);
+
+  return <Text>{result}</Text>;
+});
+
+// Add display name for debugging
+Markdown.displayName = "Markdown";

package/src/components/MessageItem.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Message } from "wave-agent-sdk";
+import { MessageSource } from "wave-agent-sdk";
+import { DiffViewer } from "./DiffViewer.js";
+import { CommandOutputDisplay } from "./CommandOutputDisplay.js";
+import { ToolResultDisplay } from "./ToolResultDisplay.js";
+import { MemoryDisplay } from "./MemoryDisplay.js";
+import { CompressDisplay } from "./CompressDisplay.js";
+import { SubagentBlock } from "./SubagentBlock.js";
+import { Markdown } from "./Markdown.js";
+
+export interface MessageItemProps {
+  message: Message;
+  isExpanded: boolean;
+  shouldShowHeader: boolean;
+  isStatic?: boolean;
+}
+
+export const MessageItem = ({
+  message,
+  isExpanded,
+  shouldShowHeader,
+  isStatic = true,
+}: MessageItemProps) => {
+  if (message.blocks.length === 0) return null;
+  return (
+    <Box flexDirection="column" gap={1} marginTop={1}>
+      {shouldShowHeader && (
+        <Box>
+          <Text color={message.role === "user" ? "cyan" : "green"} bold>
+            {message.role === "user" ? "👤 You" : "🤖 Assistant"}
+          </Text>
+        </Box>
+      )}
+
+      <Box flexDirection="column" gap={1}>
+        {message.blocks.map((block, blockIndex) => (
+          <Box key={blockIndex}>
+            {block.type === "text" && block.content.trim() && (
+              <Box>
+                {block.customCommandContent && (
+                  <Text color="cyan" bold>
+                    ⚡{" "}
+                  </Text>
+                )}
+                {block.source === MessageSource.HOOK && (
+                  <Text color="magenta" bold>
+                    🔗{" "}
+                  </Text>
+                )}
+                {isStatic ? (
+                  <Markdown>{block.content}</Markdown>
+                ) : (
+                  <Text>{block.content.split("\n").slice(-10).join("\n")}</Text>
+                )}
+              </Box>
+            )}
+
+            {block.type === "error" && (
+              <Box>
+                <Text color="red">❌ Error: {block.content}</Text>
+              </Box>
+            )}
+
+            {block.type === "diff" && (
+              <DiffViewer block={block} isStatic={isStatic} />
+            )}
+
+            {block.type === "command_output" && (
+              <CommandOutputDisplay block={block} isExpanded={isExpanded} />
+            )}
+
+            {block.type === "tool" && (
+              <ToolResultDisplay block={block} isExpanded={isExpanded} />
+            )}
+
+            {block.type === "image" && (
+              <Box>
+                <Text color="magenta" bold>
+                  📷 Image
+                </Text>
+                {block.imageUrls && block.imageUrls.length > 0 && (
+                  <Text color="gray" dimColor>
+                    {" "}
+                    ({block.imageUrls.length})
+                  </Text>
+                )}
+              </Box>
+            )}
+
+            {block.type === "memory" && <MemoryDisplay block={block} />}
+
+            {block.type === "compress" && (
+              <CompressDisplay block={block} isExpanded={isExpanded} />
+            )}
+
+            {block.type === "subagent" && <SubagentBlock block={block} />}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};