wave-code 0.0.2

package/src/components/McpManager.tsx

@@ -0,0 +1,328 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { McpServerStatus } from "wave-agent-sdk";
+
+export interface McpManagerProps {
+  onCancel: () => void;
+  servers: McpServerStatus[];
+  onConnectServer: (serverName: string) => Promise<boolean>;
+  onDisconnectServer: (serverName: string) => Promise<boolean>;
+}
+
+export const McpManager: React.FC<McpManagerProps> = ({
+  onCancel,
+  servers,
+  onConnectServer,
+  onDisconnectServer,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [viewMode, setViewMode] = useState<"list" | "detail">("list");
+
+  // Dynamically calculate selectedServer based on selectedIndex and servers
+  const selectedServer =
+    viewMode === "detail" &&
+    servers.length > 0 &&
+    selectedIndex < servers.length
+      ? servers[selectedIndex]
+      : null;
+
+  const formatTime = (timestamp: number): string => {
+    return new Date(timestamp).toLocaleTimeString();
+  };
+
+  const getStatusColor = (status: string): string => {
+    switch (status) {
+      case "connected":
+        return "green";
+      case "connecting":
+        return "yellow";
+      case "error":
+        return "red";
+      default:
+        return "gray";
+    }
+  };
+
+  const getStatusIcon = (status: string): string => {
+    switch (status) {
+      case "connected":
+        return "✓";
+      case "connecting":
+        return "⟳";
+      case "error":
+        return "✗";
+      default:
+        return "○";
+    }
+  };
+
+  const handleConnect = async (serverName: string) => {
+    await onConnectServer(serverName);
+  };
+
+  const handleDisconnect = async (serverName: string) => {
+    await onDisconnectServer(serverName);
+  };
+
+  useInput((input, key) => {
+    if (viewMode === "list") {
+      // List mode navigation
+      if (key.return) {
+        if (servers.length > 0 && selectedIndex < servers.length) {
+          setViewMode("detail");
+        }
+        return;
+      }
+
+      if (key.escape) {
+        onCancel();
+        return;
+      }
+
+      if (key.upArrow) {
+        setSelectedIndex(Math.max(0, selectedIndex - 1));
+        return;
+      }
+
+      if (key.downArrow) {
+        setSelectedIndex(Math.min(servers.length - 1, selectedIndex + 1));
+        return;
+      }
+
+      // Hotkeys for server actions
+      if (
+        input === "c" &&
+        servers.length > 0 &&
+        selectedIndex < servers.length
+      ) {
+        const server = servers[selectedIndex];
+        if (server.status === "disconnected" || server.status === "error") {
+          handleConnect(server.name);
+        }
+        return;
+      }
+
+      if (
+        input === "d" &&
+        servers.length > 0 &&
+        selectedIndex < servers.length
+      ) {
+        const server = servers[selectedIndex];
+        if (server.status === "connected") {
+          handleDisconnect(server.name);
+        }
+        return;
+      }
+    } else if (viewMode === "detail") {
+      // Detail mode navigation
+      if (key.escape) {
+        setViewMode("list");
+        return;
+      }
+
+      if (selectedServer) {
+        if (
+          input === "c" &&
+          (selectedServer.status === "disconnected" ||
+            selectedServer.status === "error")
+        ) {
+          handleConnect(selectedServer.name);
+          return;
+        }
+
+        if (input === "d" && selectedServer.status === "connected") {
+          handleDisconnect(selectedServer.name);
+          return;
+        }
+      }
+    }
+  });
+
+  if (viewMode === "detail" && selectedServer) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="cyan"
+        padding={1}
+        gap={1}
+        marginBottom={1}
+      >
+        <Box>
+          <Text color="cyan" bold>
+            MCP Server Details: {selectedServer.name}
+          </Text>
+        </Box>
+
+        <Box flexDirection="column" gap={1}>
+          <Box>
+            <Text>
+              <Text color="blue">Status:</Text>{" "}
+              <Text color={getStatusColor(selectedServer.status)}>
+                {getStatusIcon(selectedServer.status)} {selectedServer.status}
+              </Text>
+            </Text>
+          </Box>
+          <Box>
+            <Text>
+              <Text color="blue">Command:</Text> {selectedServer.config.command}
+            </Text>
+          </Box>
+          {selectedServer.config.args && (
+            <Box>
+              <Text>
+                <Text color="blue">Args:</Text>{" "}
+                {selectedServer.config.args.join(" ")}
+              </Text>
+            </Box>
+          )}
+          {selectedServer.toolCount !== undefined && (
+            <Box>
+              <Text>
+                <Text color="blue">Tools:</Text> {selectedServer.toolCount}{" "}
+                tools
+              </Text>
+            </Box>
+          )}
+          {selectedServer.capabilities && (
+            <Box>
+              <Text>
+                <Text color="blue">Capabilities:</Text>{" "}
+                {selectedServer.capabilities.join(", ")}
+              </Text>
+            </Box>
+          )}
+          {selectedServer.lastConnected && (
+            <Box>
+              <Text>
+                <Text color="blue">Last Connected:</Text>{" "}
+                {formatTime(selectedServer.lastConnected)}
+              </Text>
+            </Box>
+          )}
+          {selectedServer.error && (
+            <Box>
+              <Text>
+                <Text color="red">Error:</Text> {selectedServer.error}
+              </Text>
+            </Box>
+          )}
+        </Box>
+
+        {selectedServer.config.env &&
+          Object.keys(selectedServer.config.env).length > 0 && (
+            <Box flexDirection="column" marginTop={1}>
+              <Text color="blue" bold>
+                Environment Variables:
+              </Text>
+              <Box borderStyle="single" borderColor="blue" padding={1}>
+                {Object.entries(selectedServer.config.env).map(
+                  ([key, value]) => (
+                    <Text key={key}>
+                      {key}={value}
+                    </Text>
+                  ),
+                )}
+              </Box>
+            </Box>
+          )}
+
+        <Box marginTop={1}>
+          <Text dimColor>
+            {selectedServer.status === "disconnected" ||
+            selectedServer.status === "error"
+              ? "c to connect · "
+              : ""}
+            {selectedServer.status === "connected" ? "d to disconnect · " : ""}
+            Esc to go back
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (servers.length === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="cyan"
+        padding={1}
+        marginBottom={1}
+      >
+        <Text color="cyan" bold>
+          Manage MCP servers
+        </Text>
+        <Text>No MCP servers configured</Text>
+        <Text dimColor>
+          Create a .mcp.json file in your project root to add servers
+        </Text>
+        <Text dimColor>Press Escape to close</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="cyan"
+      padding={1}
+      gap={1}
+      marginBottom={1}
+    >
+      <Box>
+        <Text color="cyan" bold>
+          Manage MCP servers
+        </Text>
+      </Box>
+      <Text dimColor>Select a server to view details</Text>
+
+      {servers.map((server, index) => (
+        <Box key={server.name} flexDirection="column">
+          <Text
+            color={index === selectedIndex ? "black" : "white"}
+            backgroundColor={index === selectedIndex ? "cyan" : undefined}
+          >
+            {index === selectedIndex ? "▶ " : "  "}
+            {index + 1}.{" "}
+            <Text color={getStatusColor(server.status)}>
+              {getStatusIcon(server.status)}
+            </Text>{" "}
+            {server.name}
+            {server.status === "connected" && server.toolCount && (
+              <Text color="green"> · {server.toolCount} tools</Text>
+            )}
+          </Text>
+          {index === selectedIndex && (
+            <Box marginLeft={4} flexDirection="column">
+              <Text color="gray" dimColor>
+                {server.config.command}
+                {server.config.args ? ` ${server.config.args.join(" ")}` : ""}
+              </Text>
+              {server.lastConnected && (
+                <Text color="gray" dimColor>
+                  Last connected: {formatTime(server.lastConnected)}
+                </Text>
+              )}
+            </Box>
+          )}
+        </Box>
+      ))}
+
+      <Box marginTop={1}>
+        <Text dimColor>
+          ↑/↓ to select · Enter to view ·{" "}
+          {servers[selectedIndex]?.status === "disconnected" ||
+          servers[selectedIndex]?.status === "error"
+            ? "c to connect · "
+            : ""}
+          {servers[selectedIndex]?.status === "connected"
+            ? "d to disconnect · "
+            : ""}
+          Esc to close
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/MemoryDisplay.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { MemoryBlock } from "wave-agent-sdk";
+
+interface MemoryDisplayProps {
+  block: MemoryBlock;
+}
+
+export const MemoryDisplay: React.FC<MemoryDisplayProps> = ({ block }) => {
+  const { content, isSuccess, memoryType, storagePath } = block;
+
+  const getStatusIcon = () => {
+    return isSuccess ? "💾" : "⚠️";
+  };
+
+  const getStatusColor = () => {
+    return isSuccess ? "green" : "red";
+  };
+
+  const getStatusText = () => {
+    return isSuccess ? "Added to memory" : "Failed to add memory";
+  };
+
+  const getStorageText = () => {
+    if (!isSuccess) return null;
+
+    if (memoryType === "user") {
+      return `Memory saved to ${storagePath || "user-memory.md"}`;
+    } else {
+      return `Memory saved to ${storagePath || "WAVE.md"}`;
+    }
+  };
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color={getStatusColor()}>{getStatusIcon()} </Text>
+        <Text color={getStatusColor()}>{getStatusText()}</Text>
+      </Box>
+
+      {content && (
+        <Box marginTop={1} paddingLeft={2}>
+          <Box
+            borderLeft
+            borderColor={isSuccess ? "green" : "red"}
+            paddingLeft={1}
+          >
+            <Text color="gray">{content}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {isSuccess && (
+        <Box paddingLeft={2} marginTop={1}>
+          <Text color="yellow" dimColor>
+            {getStorageText()}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/MemoryTypeSelector.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+
+export interface MemoryTypeSelectorProps {
+  message: string;
+  onSelect: (type: "project" | "user") => void;
+  onCancel: () => void;
+}
+
+export const MemoryTypeSelector: React.FC<MemoryTypeSelectorProps> = ({
+  message,
+  onSelect,
+  onCancel,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const options = [
+    {
+      type: "project" as const,
+      label: "Project Memory",
+      description: "Save to current project (WAVE.md)",
+    },
+    {
+      type: "user" as const,
+      label: "User Memory",
+      description: "Save to user global memory",
+    },
+  ];
+
+  useInput((input, key) => {
+    if (key.return) {
+      const selectedOption = options[selectedIndex];
+      onSelect(selectedOption.type);
+      return;
+    }
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex(Math.min(options.length - 1, selectedIndex + 1));
+      return;
+    }
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="green"
+      padding={1}
+      gap={1}
+      marginBottom={1}
+    >
+      <Box>
+        <Text color="green" bold>
+          Save Memory: "{message.substring(1).trim()}"
+        </Text>
+      </Box>
+
+      <Text color="gray">Choose where to save this memory:</Text>
+
+      {options.map((option, index) => (
+        <Box key={option.type} flexDirection="column">
+          <Text
+            color={index === selectedIndex ? "black" : "white"}
+            backgroundColor={index === selectedIndex ? "green" : undefined}
+            bold={index === selectedIndex}
+          >
+            {option.label}
+          </Text>
+          {index === selectedIndex && (
+            <Box marginLeft={2}>
+              <Text color="gray" dimColor>
+                {option.description}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      ))}
+
+      <Box>
+        <Text dimColor>
+          Use ↑↓ to navigate, Enter to select, Escape to cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/MessageList.tsx

@@ -0,0 +1,215 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import type { Message } 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 { usePagination } from "../hooks/usePagination.js";
+
+// Function to render a single message
+const renderMessageItem = (
+  message: Message,
+  originalIndex: number,
+  isExpanded: boolean,
+  previousMessage?: Message,
+) => {
+  const shouldShowHeader = previousMessage?.role !== message.role;
+
+  return (
+    <Box key={`message-${originalIndex}`} flexDirection="column" marginTop={1}>
+      {shouldShowHeader && (
+        <Box>
+          <Text color={message.role === "user" ? "cyan" : "green"} bold>
+            {message.role === "user" ? "👤 You" : "🤖 Assistant"}
+            <Text color="gray" dimColor>
+              {" "}
+              #{originalIndex + 1}
+            </Text>
+          </Text>
+        </Box>
+      )}
+
+      <Box
+        marginLeft={2}
+        flexDirection="column"
+        gap={1}
+        marginTop={shouldShowHeader ? 1 : 0}
+      >
+        {message.blocks.map((block, blockIndex) => (
+          <Box key={blockIndex}>
+            {block.type === "text" && block.content.trim() && (
+              <Box>
+                <Text>{block.content}</Text>
+              </Box>
+            )}
+
+            {block.type === "error" && (
+              <Box>
+                <Text color="red">❌ Error: {block.content}</Text>
+              </Box>
+            )}
+
+            {block.type === "diff" && (
+              <DiffViewer block={block} isExpanded={isExpanded} />
+            )}
+
+            {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 === "custom_command" && (
+              <Box>
+                <Text color="cyan" bold>
+                  ⚡
+                </Text>
+                <Text>{block.originalInput || `/${block.commandName}`}</Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export interface MessageListProps {
+  messages: Message[];
+  isLoading?: boolean;
+  isCommandRunning?: boolean;
+  isCompressing?: boolean;
+  latestTotalTokens?: number;
+  isExpanded?: boolean;
+}
+
+export const MessageList: React.FC<MessageListProps> = ({
+  messages,
+  isLoading = false,
+  isCommandRunning = false,
+  isCompressing = false,
+  latestTotalTokens = 0,
+  isExpanded = false,
+}) => {
+  // Use original messages for pagination calculation
+  const { displayInfo } = usePagination(messages);
+
+  // Get current page messages while preserving original index information
+  const currentMessagesWithIndex = useMemo(() => {
+    return messages
+      .slice(displayInfo.startIndex, displayInfo.endIndex)
+      .map((message, index) => ({
+        message,
+        originalIndex: displayInfo.startIndex + index,
+      }));
+  }, [messages, displayInfo.startIndex, displayInfo.endIndex]);
+
+  // Empty message state
+  if (messages.length === 0) {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Text color="gray">Welcome to WAVE Code Assistant!</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      {/* Message list */}
+      <Box flexDirection="column">
+        {currentMessagesWithIndex.map(({ message, originalIndex }) => {
+          // Get previous message
+          const previousMessage =
+            originalIndex > 0 ? messages[originalIndex - 1] : undefined;
+          return renderMessageItem(
+            message,
+            originalIndex,
+            isExpanded,
+            previousMessage,
+          );
+        })}
+      </Box>
+
+      {/* Loading state display - only show in non-expanded state */}
+      {!isExpanded && (isLoading || isCommandRunning || isCompressing) && (
+        <Box marginTop={1} flexDirection="column" gap={1}>
+          {isLoading && (
+            <Box>
+              <Text color="yellow">💭 AI is thinking... </Text>
+              <Text color="gray" dimColor>
+                {" "}
+                |{" "}
+              </Text>
+              <Text color="blue" bold>
+                {latestTotalTokens.toLocaleString()}
+              </Text>
+              <Text color="gray" dimColor>
+                {" "}
+                tokens |{" "}
+              </Text>
+              <Text color="red" bold>
+                Esc
+              </Text>
+              <Text color="gray" dimColor>
+                {" "}
+                to abort
+              </Text>
+            </Box>
+          )}
+          {isCommandRunning && (
+            <Text color="blue">🚀 Command is running...</Text>
+          )}
+          {isCompressing && (
+            <Text color="magenta">🗜️ Compressing message history...</Text>
+          )}
+        </Box>
+      )}
+
+      {/* Bottom info and shortcut key hints */}
+      {messages.length > 0 && (
+        <Box marginTop={1}>
+          <Box justifyContent="space-between" width="100%">
+            <Box>
+              <Text color="gray">
+                Messages {messages.length} Page {displayInfo.currentPage}/
+                {displayInfo.totalPages}
+              </Text>
+              <Text color="gray" dimColor>
+                {" "}
+                ← <Text color="cyan">Ctrl+U/D</Text> Navigate
+              </Text>
+            </Box>
+            <Text color="gray" dimColor>
+              <Text color="cyan">Ctrl+O</Text> Toggle{" "}
+              {isExpanded ? "Collapse" : "Expand"}
+            </Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};