wave-code 0.0.2

package/src/components/ChatInterface.tsx

@@ -0,0 +1,88 @@
+import React, { useRef, useEffect } 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 {
+    messages,
+    isLoading,
+    isCommandRunning,
+    userInputHistory,
+    isCompressing,
+    sendMessage,
+    abortMessage,
+    saveMemory,
+    mcpServers,
+    connectMcpServer,
+    disconnectMcpServer,
+    isExpanded,
+    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]);
+
+  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>
+
+      {!isExpanded && (
+        <InputBox
+          isLoading={isLoading}
+          isCommandRunning={isCommandRunning}
+          userInputHistory={userInputHistory}
+          sendMessage={sendMessage}
+          abortMessage={abortMessage}
+          saveMemory={saveMemory}
+          mcpServers={mcpServers}
+          connectMcpServer={connectMcpServer}
+          disconnectMcpServer={disconnectMcpServer}
+          slashCommands={slashCommands}
+          hasSlashCommand={hasSlashCommand}
+        />
+      )}
+    </Box>
+  );
+};

package/src/components/CommandOutputDisplay.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import type { CommandOutputBlock } from "wave-agent-sdk";
+
+interface CommandOutputDisplayProps {
+  block: CommandOutputBlock;
+  isExpanded?: boolean;
+}
+
+export const CommandOutputDisplay: React.FC<CommandOutputDisplayProps> = ({
+  block,
+  isExpanded = false,
+}) => {
+  const { command, output, isRunning, exitCode } = block;
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const MAX_LINES = 10; // Set maximum display lines
+
+  // Detect if content is overflowing
+  useEffect(() => {
+    if (output) {
+      const lines = output.split("\n");
+      setIsOverflowing(!isExpanded && lines.length > MAX_LINES);
+    }
+  }, [output, isExpanded]);
+
+  const getStatusColor = () => {
+    if (isRunning) return "yellow";
+    if (exitCode === 0) return "green";
+    if (exitCode !== null && exitCode !== 0) return "red";
+    return "gray"; // Unknown state
+  };
+
+  const getStatusText = () => {
+    if (isRunning) return "🔄";
+    if (exitCode === 0) return "✅";
+    if (exitCode === 130) return "⚠️"; // SIGINT (Ctrl+C)
+    if (exitCode !== null && exitCode !== 0) return "❌";
+    return ""; // Don't display text for unknown state
+  };
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color="cyan">$ </Text>
+        <Text color="white">{command}</Text>
+        <Text color={getStatusColor()}> {getStatusText()}</Text>
+      </Box>
+
+      {output && (
+        <Box marginTop={1} flexDirection="column">
+          <Box
+            paddingLeft={2}
+            borderLeft
+            borderColor="gray"
+            flexDirection="column"
+            height={
+              isExpanded
+                ? undefined
+                : Math.min(output.split("\n").length, MAX_LINES)
+            }
+            overflow="hidden"
+          >
+            <Text color="gray">
+              {isOverflowing
+                ? output.split("\n").slice(-MAX_LINES).join("\n")
+                : output}
+            </Text>
+          </Box>
+          {isOverflowing && (
+            <Box paddingLeft={2} marginTop={1}>
+              <Text color="yellow" dimColor>
+                Content truncated ({output.split("\n").length} lines total,
+                showing last {MAX_LINES} lines)
+              </Text>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/CommandSelector.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import type { SlashCommand } from "wave-agent-sdk";
+
+const AVAILABLE_COMMANDS: SlashCommand[] = [
+  {
+    id: "bashes",
+    name: "bashes",
+    description: "View and manage background bash shells",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+  {
+    id: "mcp",
+    name: "mcp",
+    description: "View and manage MCP servers",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+];
+
+export interface CommandSelectorProps {
+  searchQuery: string;
+  onSelect: (command: string) => void;
+  onInsert?: (command: string) => void; // New: Tab key to insert command into input box
+  onCancel: () => void;
+  commands?: SlashCommand[]; // New optional command list parameter
+}
+
+export const CommandSelector: React.FC<CommandSelectorProps> = ({
+  searchQuery,
+  onSelect,
+  onInsert,
+  onCancel,
+  commands = [], // Default to empty array
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // Merge agent commands and local commands
+  const allCommands = [...commands, ...AVAILABLE_COMMANDS];
+
+  // Filter command list
+  const filteredCommands = allCommands.filter(
+    (command) =>
+      !searchQuery ||
+      command.name.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  useInput((input, key) => {
+    if (key.return) {
+      if (
+        filteredCommands.length > 0 &&
+        selectedIndex < filteredCommands.length
+      ) {
+        const selectedCommand = filteredCommands[selectedIndex].name;
+        onSelect(selectedCommand);
+      }
+      return;
+    }
+
+    if (key.tab && onInsert) {
+      if (
+        filteredCommands.length > 0 &&
+        selectedIndex < filteredCommands.length
+      ) {
+        const selectedCommand = filteredCommands[selectedIndex].name;
+        onInsert(selectedCommand);
+      }
+      return;
+    }
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex(
+        Math.min(filteredCommands.length - 1, selectedIndex + 1),
+      );
+      return;
+    }
+  });
+
+  if (filteredCommands.length === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="yellow"
+        padding={1}
+        marginBottom={1}
+      >
+        <Text color="yellow">No commands found for "{searchQuery}"</Text>
+        <Text dimColor>Press Escape to cancel</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="magenta"
+      padding={1}
+      gap={1}
+      marginBottom={1}
+    >
+      <Box>
+        <Text color="magenta" bold>
+          Command Selector {searchQuery && `(filtering: "${searchQuery}")`}
+        </Text>
+      </Box>
+
+      {filteredCommands.map((command, index) => (
+        <Box key={command.name} flexDirection="column">
+          <Text
+            color={index === selectedIndex ? "black" : "white"}
+            backgroundColor={index === selectedIndex ? "magenta" : undefined}
+          >
+            {index === selectedIndex ? "▶ " : "  "}/{command.name}
+          </Text>
+          {index === selectedIndex && (
+            <Box marginLeft={4}>
+              <Text color="gray" dimColor>
+                {command.description}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      ))}
+
+      <Box>
+        <Text dimColor>
+          ↑↓ navigate • Enter execute • {onInsert ? "Tab insert • " : ""}Esc
+          cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/CompressDisplay.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import type { CompressBlock } from "wave-agent-sdk";
+
+interface CompressDisplayProps {
+  block: CompressBlock;
+  isExpanded?: boolean;
+}
+
+export const CompressDisplay: React.FC<CompressDisplayProps> = ({
+  block,
+  isExpanded = false,
+}) => {
+  const { content } = block;
+  const MAX_LINES = 3; // Set maximum display lines for compressed content
+
+  const { displayContent, isOverflowing } = useMemo(() => {
+    if (!content) {
+      return { displayContent: "", isOverflowing: false };
+    }
+
+    const lines = content.split("\n");
+    const overflow = !isExpanded && lines.length > MAX_LINES;
+
+    const display = overflow ? lines.slice(0, MAX_LINES).join("\n") : content;
+
+    return { displayContent: display, isOverflowing: overflow };
+  }, [content, isExpanded]);
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text>📦 Compressed Messages</Text>
+      </Box>
+
+      {content && (
+        <Box marginTop={1} flexDirection="column">
+          <Box
+            paddingLeft={2}
+            borderLeft
+            borderColor="gray"
+            flexDirection="column"
+          >
+            <Text color="white">{displayContent}</Text>
+          </Box>
+          {isOverflowing && (
+            <Box paddingLeft={2} marginTop={1}>
+              <Text color="yellow" dimColor>
+                Content truncated ({content.split("\n").length} lines total,
+                showing first {MAX_LINES} lines. Press Ctrl+O to expand.
+              </Text>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/DiffViewer.tsx

@@ -0,0 +1,321 @@
+import React, { useMemo } from "react";
+import { Text, Box } from "ink";
+import { diffWords } from "diff";
+import type { DiffBlock } from "wave-agent-sdk";
+
+interface DiffViewerProps {
+  block: DiffBlock;
+  isExpanded?: boolean;
+}
+
+// Render word-level diff
+const renderWordLevelDiff = (removedLine: string, addedLine: string) => {
+  const changes = diffWords(removedLine, addedLine);
+
+  const removedParts: React.ReactNode[] = [];
+  const addedParts: React.ReactNode[] = [];
+
+  changes.forEach((part, index) => {
+    if (part.removed) {
+      removedParts.push(
+        <Text key={`removed-${index}`} color="black" backgroundColor="red">
+          {part.value}
+        </Text>,
+      );
+    } else if (part.added) {
+      addedParts.push(
+        <Text key={`added-${index}`} color="black" backgroundColor="green">
+          {part.value}
+        </Text>,
+      );
+    } else {
+      // Unchanged parts, need to display on both sides
+      removedParts.push(
+        <Text key={`removed-unchanged-${index}`} color="red">
+          {part.value}
+        </Text>,
+      );
+      addedParts.push(
+        <Text key={`added-unchanged-${index}`} color="green">
+          {part.value}
+        </Text>,
+      );
+    }
+  });
+
+  return { removedParts, addedParts };
+};
+
+export const DiffViewer: React.FC<DiffViewerProps> = ({
+  block,
+  isExpanded = false,
+}) => {
+  const { diffResult } = block;
+
+  const diffLines = useMemo(() => {
+    if (!diffResult) return [];
+
+    const lines: Array<{
+      content: string;
+      type: "added" | "removed" | "unchanged" | "separator";
+      lineNumber?: number;
+      rawContent?: string; // Store original content for word-level comparison
+      wordDiff?: {
+        removedParts: React.ReactNode[];
+        addedParts: React.ReactNode[];
+      };
+    }> = [];
+
+    let originalLineNum = 1;
+    let modifiedLineNum = 1;
+    const maxContext = 3; // Show at most 3 lines of context
+
+    // Buffer for storing context
+    let contextBuffer: Array<{
+      content: string;
+      type: "unchanged";
+      lineNumber: number;
+    }> = [];
+
+    let hasAnyChanges = false;
+    let afterChangeContext = 0;
+
+    // Temporarily store adjacent deleted and added lines for word-level comparison
+    let pendingRemovedLines: Array<{
+      content: string;
+      rawContent: string;
+      lineNumber: number;
+    }> = [];
+
+    const flushPendingLines = () => {
+      pendingRemovedLines.forEach((line) => {
+        lines.push({
+          content: line.content,
+          type: "removed",
+          lineNumber: line.lineNumber,
+          rawContent: line.rawContent,
+        });
+      });
+      pendingRemovedLines = [];
+    };
+
+    diffResult.forEach(
+      (part: { value: string; added?: boolean; removed?: boolean }) => {
+        const partLines = part.value.split("\n");
+        // Remove the last empty line (produced by split)
+        if (partLines[partLines.length - 1] === "") {
+          partLines.pop();
+        }
+
+        if (part.removed) {
+          // If this is the first change encountered, add preceding context
+          if (!hasAnyChanges) {
+            // Take the last few lines from the buffer as preceding context
+            const preContext = contextBuffer.slice(-maxContext);
+            if (contextBuffer.length > maxContext) {
+              lines.push({
+                content: "...",
+                type: "separator",
+              });
+            }
+            lines.push(...preContext);
+          } else if (afterChangeContext > maxContext) {
+            // If there's too much context after the previous change, add a separator
+            lines.push({
+              content: "...",
+              type: "separator",
+            });
+          }
+
+          // Temporarily store deleted lines, waiting for possible added lines for word-level comparison
+          partLines.forEach((line: string) => {
+            pendingRemovedLines.push({
+              content: `- ${line}`,
+              rawContent: line,
+              lineNumber: originalLineNum++,
+            });
+          });
+
+          hasAnyChanges = true;
+          afterChangeContext = 0;
+          contextBuffer = []; // Clear buffer
+        } else if (part.added) {
+          // If this is the first change encountered, add preceding context
+          if (!hasAnyChanges) {
+            const preContext = contextBuffer.slice(-maxContext);
+            if (contextBuffer.length > maxContext) {
+              lines.push({
+                content: "...",
+                type: "separator",
+              });
+            }
+            lines.push(...preContext);
+          } else if (afterChangeContext > maxContext) {
+            lines.push({
+              content: "...",
+              type: "separator",
+            });
+          }
+
+          // Process added lines, try to do word-level comparison with pending deleted lines
+          partLines.forEach((line: string, index: number) => {
+            if (index < pendingRemovedLines.length) {
+              // Has corresponding deleted line, perform word-level comparison
+              const removedLine = pendingRemovedLines[index];
+              const wordDiff = renderWordLevelDiff(
+                removedLine.rawContent,
+                line,
+              );
+
+              // Add deleted line (with word-level highlighting)
+              lines.push({
+                content: `- ${removedLine.rawContent}`,
+                type: "removed",
+                lineNumber: removedLine.lineNumber,
+                rawContent: removedLine.rawContent,
+                wordDiff: {
+                  removedParts: wordDiff.removedParts,
+                  addedParts: [],
+                },
+              });
+
+              // Add added line (with word-level highlighting)
+              lines.push({
+                content: `+ ${line}`,
+                type: "added",
+                lineNumber: modifiedLineNum++,
+                rawContent: line,
+                wordDiff: { removedParts: [], addedParts: wordDiff.addedParts },
+              });
+            } else {
+              // No corresponding deleted line, directly add the added line
+              lines.push({
+                content: `+ ${line}`,
+                type: "added",
+                lineNumber: modifiedLineNum++,
+                rawContent: line,
+              });
+            }
+          });
+
+          // If there are more deleted lines than added lines, add remaining deleted lines
+          for (let i = partLines.length; i < pendingRemovedLines.length; i++) {
+            const removedLine = pendingRemovedLines[i];
+            lines.push({
+              content: removedLine.content,
+              type: "removed",
+              lineNumber: removedLine.lineNumber,
+              rawContent: removedLine.rawContent,
+            });
+          }
+
+          pendingRemovedLines = []; // Clear pending deleted lines
+          hasAnyChanges = true;
+          afterChangeContext = 0;
+          contextBuffer = [];
+        } else {
+          // Before processing unchanged lines, first clear pending deleted lines
+          flushPendingLines();
+
+          // Process unchanged lines
+          partLines.forEach((line: string) => {
+            const contextLine = {
+              content: `  ${line}`,
+              type: "unchanged" as const,
+              lineNumber: originalLineNum,
+            };
+
+            if (hasAnyChanges) {
+              // If there are already changes, these are post-change context
+              if (afterChangeContext < maxContext) {
+                lines.push(contextLine);
+                afterChangeContext++;
+              }
+            } else {
+              // If no changes yet, add to buffer
+              contextBuffer.push(contextLine);
+            }
+
+            originalLineNum++;
+            modifiedLineNum++;
+          });
+        }
+      },
+    );
+
+    // 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, isExpanded]);
+
+  if (!diffResult || diffResult.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text color="gray">No changes detected</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="column">
+        <Box flexDirection="column">
+          {diffLines.map((line, index) => {
+            // If has word-level diff, render special effects
+            if (line.wordDiff) {
+              const prefix = line.type === "removed" ? "- " : "+ ";
+              const parts =
+                line.type === "removed"
+                  ? line.wordDiff.removedParts
+                  : line.wordDiff.addedParts;
+
+              return (
+                <Box key={index} flexDirection="row">
+                  <Text color={line.type === "removed" ? "red" : "green"}>
+                    {prefix}
+                  </Text>
+                  <Box flexDirection="row" flexWrap="wrap">
+                    {parts}
+                  </Box>
+                </Box>
+              );
+            }
+
+            // Normal rendering
+            return (
+              <Text
+                key={index}
+                color={
+                  line.type === "added"
+                    ? "green"
+                    : line.type === "removed"
+                      ? "red"
+                      : line.type === "separator"
+                        ? "gray"
+                        : "white"
+                }
+                dimColor={line.type === "separator"}
+              >
+                {line.content}
+              </Text>
+            );
+          })}
+        </Box>
+      </Box>
+    </Box>
+  );
+};