deepagentsdk 0.9.2

package/src/cli/components/FilePreview.tsx

@@ -0,0 +1,237 @@
+/**
+ * File preview component with line numbers.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { emoji, colors } from "../theme.js";
+import type { FileInfo } from "../../types.js";
+
+interface FilePreviewProps {
+  /** File path */
+  path: string;
+  /** File content */
+  content: string;
+  /** Maximum lines to show */
+  maxLines?: number;
+  /** Whether this is a write preview (vs read) */
+  isWrite?: boolean;
+}
+
+export function FilePreview({
+  path,
+  content,
+  maxLines = 20,
+  isWrite = false,
+}: FilePreviewProps): React.ReactElement {
+  const lines = content.split("\n");
+  const totalLines = lines.length;
+  const displayLines = lines.slice(0, maxLines);
+  const truncated = totalLines > maxLines;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.muted}
+      marginY={1}
+    >
+      {/* Header */}
+      <Box paddingX={2} paddingY={1} borderBottom>
+        <Text color={colors.info}>
+          {emoji.file} {isWrite ? "Writing:" : "Reading:"}{" "}
+        </Text>
+        <Text color={colors.file}>{path}</Text>
+        <Text dimColor> ({totalLines} lines)</Text>
+      </Box>
+
+      {/* Content with line numbers */}
+      <Box flexDirection="column" paddingX={2} paddingY={1}>
+        {displayLines.map((line, index) => (
+          <Box key={index}>
+            <Text dimColor>{String(index + 1).padStart(4, " ")} </Text>
+            <Text>{truncateLine(line, 70)}</Text>
+          </Box>
+        ))}
+        {truncated && (
+          <Box marginTop={1}>
+            <Text dimColor>
+              ... {totalLines - maxLines} more lines ...
+            </Text>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Truncate a line if too long.
+ */
+function truncateLine(line: string, maxLength: number): string {
+  if (line.length <= maxLength) {
+    return line;
+  }
+  return line.substring(0, maxLength - 3) + "...";
+}
+
+/**
+ * Compact file written notification.
+ */
+interface FileWrittenProps {
+  path: string;
+}
+
+export function FileWritten({ path }: FileWrittenProps): React.ReactElement {
+  return (
+    <Box>
+      <Text color={colors.success}>✓ Wrote: </Text>
+      <Text color={colors.file}>{path}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Compact file edited notification.
+ */
+interface FileEditedProps {
+  path: string;
+  occurrences: number;
+}
+
+export function FileEdited({
+  path,
+  occurrences,
+}: FileEditedProps): React.ReactElement {
+  return (
+    <Box>
+      <Text color={colors.success}>{emoji.edit} Edited: </Text>
+      <Text color={colors.file}>{path}</Text>
+      <Text dimColor>
+        {" "}
+        ({occurrences} change{occurrences === 1 ? "" : "s"})
+      </Text>
+    </Box>
+  );
+}
+
+/**
+ * Compact file read notification.
+ */
+interface FileReadProps {
+  path: string;
+  lines: number;
+}
+
+export function FileRead({ path, lines }: FileReadProps): React.ReactElement {
+  return (
+    <Box>
+      <Text color={colors.info}>📖 Read: </Text>
+      <Text color={colors.file}>{path}</Text>
+      <Text dimColor> ({lines} lines)</Text>
+    </Box>
+  );
+}
+
+/**
+ * Compact ls result notification.
+ */
+interface LsResultProps {
+  path: string;
+  count: number;
+}
+
+export function LsResult({ path, count }: LsResultProps): React.ReactElement {
+  return (
+    <Box>
+      <Text color={colors.info}>📂 Listed: </Text>
+      <Text color={colors.file}>{path}</Text>
+      <Text dimColor> ({count} item{count === 1 ? "" : "s"})</Text>
+    </Box>
+  );
+}
+
+/**
+ * Compact glob result notification.
+ */
+interface GlobResultProps {
+  pattern: string;
+  count: number;
+}
+
+export function GlobResult({ pattern, count }: GlobResultProps): React.ReactElement {
+  return (
+    <Box>
+      <Text color={colors.info}>🔍 Glob: </Text>
+      <Text color={colors.tool}>{pattern}</Text>
+      <Text dimColor> ({count} match{count === 1 ? "" : "es"})</Text>
+    </Box>
+  );
+}
+
+/**
+ * Compact grep result notification.
+ */
+interface GrepResultProps {
+  pattern: string;
+  count: number;
+}
+
+export function GrepResult({ pattern, count }: GrepResultProps): React.ReactElement {
+  return (
+    <Box>
+      <Text color={colors.info}>🔎 Grep: </Text>
+      <Text color={colors.tool}>{pattern}</Text>
+      <Text dimColor> ({count} match{count === 1 ? "" : "es"})</Text>
+    </Box>
+  );
+}
+
+/**
+ * File list panel for /files command.
+ */
+interface FileListProps {
+  files: FileInfo[];
+  workDir?: string;
+}
+
+export function FileList({
+  files,
+  workDir,
+}: FileListProps): React.ReactElement {
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.muted}
+      paddingX={2}
+      paddingY={1}
+      marginY={1}
+    >
+      <Box marginBottom={1}>
+        <Text bold color={colors.info}>
+          {emoji.file} Files
+        </Text>
+        {workDir && <Text dimColor> in {workDir}</Text>}
+      </Box>
+
+      {files.length === 0 ? (
+        <Box paddingLeft={2}>
+          <Text dimColor>No files found.</Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {files.map((file) => (
+            <Box key={file.path} paddingLeft={2}>
+              <Text>{file.is_dir ? "📁" : "📄"} </Text>
+              <Text color={colors.file}>{file.path}</Text>
+              {file.size !== undefined && (
+                <Text dimColor> ({file.size} bytes)</Text>
+              )}
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
+

package/src/cli/components/Input.tsx

@@ -0,0 +1,277 @@
+/**
+ * Text input component with slash command suggestions.
+ * Clean, minimal design inspired by Claude Code and OpenAI Codex.
+ */
+import React, { useState, useRef } from "react";
+import { Box, Text, useInput } from "ink";
+import { colors } from "../theme.js";
+import { SlashMenu } from "./SlashMenu.js";
+
+interface InputProps {
+  /** Called when user submits input */
+  onSubmit: (value: string) => void;
+  /** Whether input is disabled (e.g., during generation) */
+  disabled?: boolean;
+  /** Placeholder text */
+  placeholder?: string;
+}
+
+// Module-level history storage to persist across re-renders
+const inputHistory: string[] = [];
+const MAX_HISTORY = 100;
+
+export function Input({
+  onSubmit,
+  disabled = false,
+  placeholder = "Plan, search, build anything",
+}: InputProps): React.ReactElement {
+  const [value, setValue] = useState("");
+  const [cursorPos, setCursorPos] = useState(0);
+  const showMenu = value.startsWith("/") && !disabled;
+  
+  // History navigation state
+  // -1 means we're at the current input (not browsing history)
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  // Store the current input when user starts navigating history
+  const savedInputRef = useRef("");
+
+  // Helper function to delete the previous word from cursor position
+  const deleteWord = () => {
+    if (cursorPos === 0) return;
+    
+    let end = cursorPos;
+    // Skip trailing spaces
+    while (end > 0 && value[end - 1] === " ") {
+      end--;
+    }
+    // Find start of current word
+    while (end > 0 && value[end - 1] !== " ") {
+      end--;
+    }
+    
+    const newValue = value.slice(0, end) + value.slice(cursorPos);
+    setValue(newValue);
+    setCursorPos(end);
+  };
+
+  useInput(
+    (input, key) => {
+      if (disabled) return;
+
+      // Handle Enter - submit
+      if (key.return) {
+        if (value.trim()) {
+          // Add to history (avoid duplicates of the last entry)
+          if (inputHistory.length === 0 || inputHistory[0] !== value) {
+            inputHistory.unshift(value);
+            if (inputHistory.length > MAX_HISTORY) {
+              inputHistory.pop();
+            }
+          }
+          onSubmit(value);
+          setValue("");
+          setCursorPos(0);
+          setHistoryIndex(-1);
+          savedInputRef.current = "";
+        }
+        return;
+      }
+
+      // Handle up arrow - navigate to older history
+      if (key.upArrow) {
+        if (inputHistory.length === 0) return;
+        
+        if (historyIndex === -1) {
+          // Save current input before navigating history
+          savedInputRef.current = value;
+        }
+        
+        const newIndex = Math.min(historyIndex + 1, inputHistory.length - 1);
+        if (newIndex !== historyIndex) {
+          const historyValue = inputHistory[newIndex];
+          if (historyValue !== undefined) {
+            setHistoryIndex(newIndex);
+            setValue(historyValue);
+            setCursorPos(historyValue.length);
+          }
+        }
+        return;
+      }
+
+      // Handle down arrow - navigate to newer history
+      if (key.downArrow) {
+        if (historyIndex === -1) return;
+        
+        const newIndex = historyIndex - 1;
+        if (newIndex === -1) {
+          // Return to saved current input
+          setHistoryIndex(-1);
+          setValue(savedInputRef.current);
+          setCursorPos(savedInputRef.current.length);
+        } else {
+          const historyValue = inputHistory[newIndex];
+          if (historyValue !== undefined) {
+            setHistoryIndex(newIndex);
+            setValue(historyValue);
+            setCursorPos(historyValue.length);
+          }
+        }
+        return;
+      }
+
+      // Handle left arrow - move cursor left
+      if (key.leftArrow) {
+        if (key.meta || key.ctrl) {
+          // Option/Ctrl+Left: jump to start of previous word
+          let pos = cursorPos;
+          // Skip spaces
+          while (pos > 0 && value[pos - 1] === " ") {
+            pos--;
+          }
+          // Skip word characters
+          while (pos > 0 && value[pos - 1] !== " ") {
+            pos--;
+          }
+          setCursorPos(pos);
+        } else {
+          setCursorPos((prev) => Math.max(0, prev - 1));
+        }
+        return;
+      }
+
+      // Handle right arrow - move cursor right
+      if (key.rightArrow) {
+        if (key.meta || key.ctrl) {
+          // Option/Ctrl+Right: jump to end of next word
+          let pos = cursorPos;
+          // Skip current word characters
+          while (pos < value.length && value[pos] !== " ") {
+            pos++;
+          }
+          // Skip spaces
+          while (pos < value.length && value[pos] === " ") {
+            pos++;
+          }
+          setCursorPos(pos);
+        } else {
+          setCursorPos((prev) => Math.min(value.length, prev + 1));
+        }
+        return;
+      }
+
+      // Handle Ctrl+A - move to start of line
+      if (key.ctrl && input === "a") {
+        setCursorPos(0);
+        return;
+      }
+
+      // Handle Ctrl+E - move to end of line
+      if (key.ctrl && input === "e") {
+        setCursorPos(value.length);
+        return;
+      }
+
+      // Handle Option+Backspace (Alt+Backspace) - delete previous word
+      if ((key.backspace || key.delete) && key.meta) {
+        deleteWord();
+        return;
+      }
+
+      // Handle Ctrl+W - delete previous word (Unix-style)
+      if (key.ctrl && input === "w") {
+        deleteWord();
+        return;
+      }
+
+      // Handle Ctrl+U - delete from start to cursor
+      if (key.ctrl && input === "u") {
+        setValue(value.slice(cursorPos));
+        setCursorPos(0);
+        return;
+      }
+
+      // Handle Ctrl+K - delete from cursor to end
+      if (key.ctrl && input === "k") {
+        setValue(value.slice(0, cursorPos));
+        return;
+      }
+
+      // Handle Backspace/Delete - single character
+      if (key.backspace || key.delete) {
+        if (cursorPos > 0) {
+          setValue((prev) => prev.slice(0, cursorPos - 1) + prev.slice(cursorPos));
+          setCursorPos((prev) => prev - 1);
+        }
+        return;
+      }
+
+      // Tab for autocomplete - complete first matching command
+      if (key.tab && value.startsWith("/")) {
+        return;
+      }
+
+      // Ignore other control keys
+      if (key.ctrl || key.meta || key.escape || key.tab) {
+        return;
+      }
+
+      // Handle pasted text or typed characters
+      // Filter to only printable characters
+      if (input) {
+        const printable = input
+          .split("")
+          .filter((char) => char >= " " || char === "\t")
+          .join("");
+        
+        if (printable) {
+          // Reset history navigation when user types
+          if (historyIndex !== -1) {
+            setHistoryIndex(-1);
+            savedInputRef.current = "";
+          }
+          setValue((prev) => prev.slice(0, cursorPos) + printable + prev.slice(cursorPos));
+          setCursorPos((prev) => prev + printable.length);
+        }
+      }
+    },
+    { isActive: !disabled }
+  );
+
+  // Render text with cursor at the correct position
+  const renderTextWithCursor = () => {
+    if (!value) {
+      return (
+        <Text>
+          <Text color={colors.primary}>▌</Text>
+          <Text dimColor>{placeholder}</Text>
+        </Text>
+      );
+    }
+
+    const beforeCursor = value.slice(0, cursorPos);
+    const afterCursor = value.slice(cursorPos);
+
+    return (
+      <Text>
+        {beforeCursor}
+        <Text color={colors.primary}>▌</Text>
+        {afterCursor}
+      </Text>
+    );
+  };
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color={colors.muted}>{"→ "}</Text>
+        {disabled ? (
+          <Text dimColor>...</Text>
+        ) : (
+          renderTextWithCursor()
+        )}
+      </Box>
+      {showMenu && <SlashMenu filter={value} />}
+    </Box>
+  );
+}
+

package/src/cli/components/Message.tsx

@@ -0,0 +1,93 @@
+/**
+ * Message display component for user and assistant messages.
+ * Clean, minimal design inspired by Claude Code and OpenAI Codex.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme.js";
+import { ToolCallSummary } from "./ToolCallSummary.js";
+
+export type MessageRole = "user" | "assistant";
+
+/**
+ * Data for a single tool call.
+ */
+export interface ToolCallData {
+  /** Tool name that was called */
+  toolName: string;
+  /** Arguments passed to the tool */
+  args?: unknown;
+  /** Result returned by the tool */
+  result?: unknown;
+  /** Whether the tool call succeeded or failed */
+  status: "success" | "error";
+}
+
+export interface MessageData {
+  id: string;
+  role: MessageRole;
+  content: string;
+  timestamp?: Date;
+  /** Tool calls made during this message (for assistant messages) */
+  toolCalls?: ToolCallData[];
+}
+
+interface MessageProps {
+  message: MessageData;
+}
+
+export function Message({ message }: MessageProps): React.ReactElement {
+  const isUser = message.role === "user";
+  const hasToolCalls = message.toolCalls && message.toolCalls.length > 0;
+
+  if (isUser) {
+    // User message: "> message" style (like Claude Code)
+    return (
+      <Box marginBottom={1}>
+        <Text color={colors.muted} bold>{"> "}</Text>
+        <Text bold>{message.content}</Text>
+      </Box>
+    );
+  }
+
+  // Assistant message: "● message" style (like Claude Code)
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color={colors.success}>{"● "}</Text>
+        <Text>{message.content}</Text>
+      </Box>
+      {/* Show tool calls summary for assistant messages */}
+      {hasToolCalls && (
+        <Box marginLeft={2}>
+          <ToolCallSummary toolCalls={message.toolCalls!} />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+interface StreamingMessageProps {
+  /** Current streamed text content */
+  content: string;
+  /** Whether the message is still streaming */
+  isStreaming?: boolean;
+}
+
+export function StreamingMessage({
+  content,
+  isStreaming = true,
+}: StreamingMessageProps): React.ReactElement {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color={colors.success}>{"● "}</Text>
+        <Text>
+          {content}
+          {isStreaming && <Text color={colors.muted}>▌</Text>}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+