deepagentsdk 0.9.2

package/src/cli/components/TodoList.tsx

@@ -0,0 +1,133 @@
+/**
+ * Todo list panel component.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { Badge } from "@inkjs/ui";
+import { emoji, colors } from "../theme.js";
+import type { TodoItem } from "../../types.js";
+
+interface TodoListProps {
+  todos: TodoItem[];
+  /** Whether to show as a full panel with border */
+  showPanel?: boolean;
+}
+
+export function TodoList({
+  todos,
+  showPanel = true,
+}: TodoListProps): React.ReactElement {
+  const completed = todos.filter((t) => t.status === "completed").length;
+  const inProgress = todos.filter((t) => t.status === "in_progress").length;
+  const pending = todos.filter((t) => t.status === "pending").length;
+  const total = todos.length;
+
+  const content = (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold color={colors.info}>
+          {emoji.todo} Todo List
+        </Text>
+        <Text dimColor>
+          {" "}
+          ({completed}/{total} done)
+        </Text>
+      </Box>
+
+      {todos.length === 0 ? (
+        <Box paddingLeft={2}>
+          <Text dimColor>No todos yet.</Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {todos.map((todo) => (
+            <TodoItemRow key={todo.id} todo={todo} />
+          ))}
+        </Box>
+      )}
+
+      {todos.length > 0 && (
+        <Box marginTop={1} gap={2}>
+          {inProgress > 0 && (
+            <Text color={colors.warning}>{inProgress} in progress</Text>
+          )}
+          {pending > 0 && <Text dimColor>{pending} pending</Text>}
+          {completed > 0 && (
+            <Text color={colors.success}>{completed} completed</Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+
+  if (!showPanel) {
+    return content;
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.muted}
+      paddingX={2}
+      paddingY={1}
+      marginY={1}
+    >
+      {content}
+    </Box>
+  );
+}
+
+interface TodoItemRowProps {
+  todo: TodoItem;
+}
+
+function TodoItemRow({ todo }: TodoItemRowProps): React.ReactElement {
+  const statusEmoji = emoji[todo.status] || "•";
+  const isFinished = todo.status === "completed" || todo.status === "cancelled";
+
+  const badgeColor = {
+    pending: "gray" as const,
+    in_progress: "yellow" as const,
+    completed: "green" as const,
+    cancelled: "red" as const,
+  }[todo.status];
+
+  return (
+    <Box paddingLeft={2}>
+      <Text>{statusEmoji} </Text>
+      <Badge color={badgeColor}>
+        {todo.status.replace("_", " ")}
+      </Badge>
+      <Text> </Text>
+      {isFinished ? (
+        <Text strikethrough dimColor>
+          {todo.content}
+        </Text>
+      ) : (
+        <Text>{todo.content}</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Compact todo change notification.
+ */
+interface TodosChangedProps {
+  todos: TodoItem[];
+}
+
+export function TodosChanged({ todos }: TodosChangedProps): React.ReactElement {
+  const completed = todos.filter((t) => t.status === "completed").length;
+  const total = todos.length;
+
+  return (
+    <Box marginY={1}>
+      <Text color={colors.info}>
+        {emoji.todo} Todos updated ({completed}/{total} done)
+      </Text>
+    </Box>
+  );
+}
+

package/src/cli/components/ToolApproval.tsx

@@ -0,0 +1,70 @@
+/**
+ * Tool approval component for interactive approval flow.
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+
+interface ToolApprovalProps {
+  toolName: string;
+  args: unknown;
+  onApprove: () => void;
+  onDeny: () => void;
+  onApproveAll?: () => void;
+}
+
+export function ToolApproval({
+  toolName,
+  args,
+  onApprove,
+  onDeny,
+  onApproveAll,
+}: ToolApprovalProps): React.ReactElement {
+  useInput((input, key) => {
+    if (input === "y" || input === "Y") {
+      onApprove();
+    } else if (input === "n" || input === "N" || key.escape) {
+      onDeny();
+    } else if ((input === "a" || input === "A") && onApproveAll) {
+      onApproveAll();
+    }
+  });
+
+  // Format args for display (truncate if too long)
+  const argsDisplay = JSON.stringify(args, null, 2);
+  const truncatedArgs =
+    argsDisplay.length > 500
+      ? argsDisplay.slice(0, 500) + "\n... (truncated)"
+      : argsDisplay;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="yellow"
+      paddingX={1}
+      marginY={1}
+    >
+      <Text bold color="yellow">
+        🛑 Tool Approval Required
+      </Text>
+      <Text>
+        Tool: <Text bold>{toolName}</Text>
+      </Text>
+      <Box marginTop={1}>
+        <Text dimColor>Arguments:</Text>
+      </Box>
+      <Text>{truncatedArgs}</Text>
+      <Box marginTop={1}>
+        <Text>
+          Press <Text bold color="green">[Y]</Text> to approve,{" "}
+          <Text bold color="red">[N]</Text> to deny
+          {onApproveAll && (
+            <>
+              , <Text bold color="blue">[A]</Text> to approve all (enable auto-approve)
+            </>
+          )}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/cli/components/ToolCall.tsx

@@ -0,0 +1,144 @@
+/**
+ * Tool call display component with spinner.
+ * Clean, minimal design.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { Spinner, StatusMessage } from "@inkjs/ui";
+import { colors } from "../theme.js";
+
+interface ToolCallProps {
+  /** Tool name being called */
+  toolName: string;
+  /** Whether the tool is currently executing */
+  isExecuting?: boolean;
+  /** Tool arguments (optional, for display) */
+  args?: unknown;
+}
+
+export function ToolCall({
+  toolName,
+  isExecuting = true,
+}: ToolCallProps): React.ReactElement {
+  if (isExecuting) {
+    return (
+      <Box>
+        <Spinner label={toolName} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Text color={colors.success}>✓</Text>
+      <Text> {toolName}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Tool result display.
+ */
+interface ToolResultProps {
+  toolName: string;
+  result: unknown;
+  maxLength?: number;
+}
+
+export function ToolResult({
+  toolName,
+  result,
+  maxLength = 100,
+}: ToolResultProps): React.ReactElement {
+  let resultStr = String(result);
+  if (resultStr.length > maxLength) {
+    resultStr = resultStr.substring(0, maxLength) + "...";
+  }
+
+  return (
+    <Box>
+      <Text color={colors.success}>✓ </Text>
+      <Text color={colors.tool}>{toolName}</Text>
+      <Text dimColor> → {resultStr}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Step indicator for multi-step operations.
+ */
+interface StepIndicatorProps {
+  stepNumber: number;
+}
+
+export function StepIndicator({
+  stepNumber,
+}: StepIndicatorProps): React.ReactElement {
+  return (
+    <Box>
+      <Text dimColor>step {stepNumber}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Thinking indicator with animated spinner.
+ */
+export function ThinkingIndicator(): React.ReactElement {
+  return (
+    <Box>
+      <Text color={colors.warning}>● </Text>
+      <Spinner label="" />
+    </Box>
+  );
+}
+
+/**
+ * Done indicator.
+ */
+interface DoneIndicatorProps {
+  todosCompleted: number;
+  todosTotal: number;
+  filesCount: number;
+}
+
+export function DoneIndicator({
+  todosCompleted,
+  todosTotal,
+  filesCount,
+}: DoneIndicatorProps): React.ReactElement {
+  const hasTodos = todosTotal > 0;
+  const hasFiles = filesCount > 0;
+  
+  if (!hasTodos && !hasFiles) {
+    return <></>;
+  }
+
+  return (
+    <Box>
+      <Text dimColor>
+        {hasTodos && `${todosCompleted}/${todosTotal} tasks`}
+        {hasTodos && hasFiles && " · "}
+        {hasFiles && `${filesCount} files`}
+      </Text>
+    </Box>
+  );
+}
+
+/**
+ * Error display.
+ */
+interface ErrorDisplayProps {
+  error: Error | string;
+}
+
+export function ErrorDisplay({ error }: ErrorDisplayProps): React.ReactElement {
+  const message = error instanceof Error ? error.message : error;
+
+  return (
+    <Box>
+      <Text color={colors.error}>✗ {message}</Text>
+    </Box>
+  );
+}
+

package/src/cli/components/ToolCallSummary.tsx

@@ -0,0 +1,175 @@
+/**
+ * Collapsible tool call summary component.
+ * Shows a collapsed summary of tool calls that can be expanded to see details.
+ */
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { colors, emoji } from "../theme.js";
+import type { ToolCallData } from "./Message.js";
+
+interface ToolCallSummaryProps {
+  /** Array of tool calls to display */
+  toolCalls: ToolCallData[];
+  /** Whether this summary is interactive (can be expanded) */
+  interactive?: boolean;
+  /** Initial expanded state */
+  defaultExpanded?: boolean;
+}
+
+/**
+ * Format a tool result for display.
+ */
+function formatResult(result: unknown, maxLength = 60): string {
+  if (result === undefined || result === null) {
+    return "done";
+  }
+  
+  let str: string;
+  if (typeof result === "string") {
+    str = result;
+  } else if (typeof result === "object") {
+    try {
+      str = JSON.stringify(result);
+    } catch {
+      str = String(result);
+    }
+  } else {
+    str = String(result);
+  }
+  
+  // Remove newlines and extra whitespace
+  str = str.replace(/\s+/g, " ").trim();
+  
+  if (str.length > maxLength) {
+    return str.slice(0, maxLength - 3) + "...";
+  }
+  return str;
+}
+
+/**
+ * Format tool arguments for display.
+ */
+function formatArgs(args: unknown): string {
+  if (!args) return "";
+  
+  if (typeof args === "object") {
+    const obj = args as Record<string, unknown>;
+    const keys = Object.keys(obj);
+    if (keys.length === 0) return "";
+    
+    // Show first 2 key-value pairs
+    const preview = keys.slice(0, 2).map(k => {
+      const v = obj[k];
+      const valueStr = typeof v === "string" 
+        ? (v.length > 20 ? v.slice(0, 17) + "..." : v)
+        : String(v).slice(0, 20);
+      return `${k}: ${valueStr}`;
+    }).join(", ");
+    
+    if (keys.length > 2) {
+      return `(${preview}, +${keys.length - 2} more)`;
+    }
+    return `(${preview})`;
+  }
+  
+  return String(args).slice(0, 30);
+}
+
+export function ToolCallSummary({
+  toolCalls,
+  interactive = false,
+  defaultExpanded = false,
+}: ToolCallSummaryProps): React.ReactElement {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  
+  // Allow toggling with Enter key when interactive
+  useInput(
+    (input, key) => {
+      if (key.return && interactive) {
+        setExpanded((prev) => !prev);
+      }
+    },
+    { isActive: interactive }
+  );
+  
+  if (toolCalls.length === 0) {
+    return <></>;
+  }
+  
+  const successCount = toolCalls.filter((tc) => tc.status === "success").length;
+  const errorCount = toolCalls.filter((tc) => tc.status === "error").length;
+  
+  // Collapsed view
+  if (!expanded) {
+    return (
+      <Box paddingLeft={2}>
+        <Text dimColor>
+          {emoji.tool} {toolCalls.length} tool call{toolCalls.length !== 1 ? "s" : ""}
+          {errorCount > 0 && (
+            <Text color={colors.error}> ({errorCount} failed)</Text>
+          )}
+          {interactive && <Text dimColor> [press enter to expand]</Text>}
+        </Text>
+      </Box>
+    );
+  }
+  
+  // Expanded view
+  return (
+    <Box flexDirection="column" paddingLeft={2} marginTop={1}>
+      <Box marginBottom={1}>
+        <Text dimColor>
+          {emoji.tool} {toolCalls.length} tool call{toolCalls.length !== 1 ? "s" : ""}
+          {interactive && <Text dimColor> [press enter to collapse]</Text>}
+        </Text>
+      </Box>
+      
+      {toolCalls.map((tc, index) => (
+        <Box key={index} flexDirection="column" marginBottom={1}>
+          <Box>
+            <Text color={tc.status === "success" ? colors.success : colors.error}>
+              {tc.status === "success" ? "✓" : "✗"}
+            </Text>
+            <Text> </Text>
+            <Text color={colors.tool} bold>
+              {tc.toolName}
+            </Text>
+            {tc.args !== undefined && (
+              <Text dimColor> {String(formatArgs(tc.args))}</Text>
+            )}
+          </Box>
+          {tc.result !== undefined && (
+            <Box paddingLeft={2}>
+              <Text dimColor>→ {formatResult(tc.result)}</Text>
+            </Box>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * Inline tool call display for showing during generation.
+ */
+interface InlineToolCallProps {
+  toolName: string;
+  args?: unknown;
+  isExecuting?: boolean;
+}
+
+export function InlineToolCall({
+  toolName,
+  args,
+  isExecuting = false,
+}: InlineToolCallProps): React.ReactElement {
+  return (
+    <Box>
+      <Text color={colors.tool}>
+        {isExecuting ? "⏳" : "✓"} {toolName}
+      </Text>
+      {args !== undefined && <Text dimColor> {String(formatArgs(args))}</Text>}
+    </Box>
+  );
+}
+

package/src/cli/components/Welcome.tsx

@@ -0,0 +1,75 @@
+/**
+ * Welcome banner component for the CLI.
+ * Clean, minimal design inspired by Claude Code and OpenAI Codex.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme.js";
+
+interface WelcomeProps {
+  /** Model name to display */
+  model?: string;
+  /** Working directory */
+  workDir?: string;
+}
+
+export function Welcome({ model, workDir }: WelcomeProps): React.ReactElement {
+  const displayDir = workDir 
+    ? workDir.replace(process.env.HOME || "", "~")
+    : process.cwd().replace(process.env.HOME || "", "~");
+  
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.muted}
+      paddingX={2}
+      paddingY={1}
+      marginBottom={1}
+    >
+      <Box>
+        <Text bold color={colors.primary}>{">"}_</Text>
+        <Text bold> Deep Agent</Text>
+      </Box>
+      <Box height={1} />
+      <Box>
+        <Text dimColor>model:</Text>
+        <Text>     {model || "anthropic/claude-haiku-4-5-20251001"}</Text>
+        <Text dimColor>  /model to change</Text>
+      </Box>
+      <Box>
+        <Text dimColor>directory:</Text>
+        <Text> {displayDir}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Compact help text shown below the welcome banner.
+ */
+export function WelcomeHint(): React.ReactElement {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text dimColor>
+        To get started, describe a task or try one of these commands:
+      </Text>
+      <Box height={1} />
+      <Box flexDirection="column">
+        <Text>
+          <Text color={colors.info}>/help</Text>
+          <Text dimColor> - show available commands</Text>
+        </Text>
+        <Text>
+          <Text color={colors.info}>/features</Text>
+          <Text dimColor> - show enabled features</Text>
+        </Text>
+        <Text>
+          <Text color={colors.info}>/model</Text>
+          <Text dimColor> - change the model</Text>
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+

package/src/cli/components/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Export all CLI components.
+ */
+export { Welcome, WelcomeHint } from "./Welcome.js";
+export { Input } from "./Input.js";
+export { SlashMenu, SlashMenuPanel } from "./SlashMenu.js";
+export { Message, StreamingMessage, type MessageData, type MessageRole, type ToolCallData } from "./Message.js";
+export { TodoList, TodosChanged } from "./TodoList.js";
+export { FilePreview, FileWritten, FileEdited, FileRead, LsResult, GlobResult, GrepResult, FileList } from "./FilePreview.js";
+export {
+  ToolCall,
+  ToolResult,
+  StepIndicator,
+  ThinkingIndicator,
+  DoneIndicator,
+  ErrorDisplay,
+} from "./ToolCall.js";
+export { SubagentStart, SubagentFinish, SubagentRunning } from "./Subagent.js";
+export { StatusBar } from "./StatusBar.js";
+export { ToolCallSummary, InlineToolCall } from "./ToolCallSummary.js";
+export { ModelSelectionPanel } from "./ModelSelection.js";
+export { ApiKeyInputPanel, ApiKeyStatus } from "./ApiKeyInput.js";
+export { ToolApproval } from "./ToolApproval.js";
+

package/src/cli/hooks/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Export all hooks.
+ */
+export {
+  useAgent,
+  type UseAgentOptions,
+  type UseAgentReturn,
+  type AgentStatus,
+  type AgentEventLog,
+} from "./useAgent.js";
+
+