deepagentsdk 0.9.2

package/src/cli/components/ModelSelection.tsx

@@ -0,0 +1,338 @@
+/**
+ * Model Selection Panel - Interactive model selection with arrow keys.
+ */
+
+import React, { useState, useEffect, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { Spinner } from "@inkjs/ui";
+import { colors, emoji } from "../theme.js";
+import {
+  getModelsByProvider,
+  detectAvailableProviders,
+  type AvailableModel,
+} from "../utils/model-list.js";
+
+interface ModelSelectionPanelProps {
+  currentModel?: string;
+  /** Callback when a model is selected */
+  onModelSelect?: (modelId: string) => void;
+  /** Callback to close the panel */
+  onClose?: () => void;
+}
+
+interface LoadingState {
+  loading: boolean;
+  anthropicModels: AvailableModel[];
+  openaiModels: AvailableModel[];
+  errors: { provider: string; error: string }[];
+}
+
+export function ModelSelectionPanel({
+  currentModel,
+  onModelSelect,
+  onClose,
+}: ModelSelectionPanelProps): React.ReactElement {
+  const providers = detectAvailableProviders();
+  const hasAnyKey = providers.anthropic || providers.openai;
+
+  const [state, setState] = useState<LoadingState>({
+    loading: true,
+    anthropicModels: [],
+    openaiModels: [],
+    errors: [],
+  });
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // Combine all models into a flat list for navigation
+  const allModels = useMemo(() => {
+    const models: AvailableModel[] = [];
+    if (state.anthropicModels.length > 0) {
+      models.push(...state.anthropicModels);
+    }
+    if (state.openaiModels.length > 0) {
+      models.push(...state.openaiModels);
+    }
+    return models;
+  }, [state.anthropicModels, state.openaiModels]);
+
+  // Find current model index to set initial selection
+  useEffect(() => {
+    if (allModels.length > 0 && currentModel) {
+      const currentIndex = allModels.findIndex((m) => isCurrentModel(currentModel, m));
+      if (currentIndex >= 0) {
+        setSelectedIndex(currentIndex);
+      }
+    }
+  }, [allModels, currentModel]);
+
+  // Handle keyboard input
+  useInput((input, key) => {
+    if (state.loading) return;
+
+    if (key.upArrow) {
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : allModels.length - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => (prev < allModels.length - 1 ? prev + 1 : 0));
+    } else if (key.return) {
+      const selectedModel = allModels[selectedIndex];
+      if (selectedModel) {
+        onModelSelect?.(selectedModel.id);
+        onClose?.();
+      }
+    } else if (key.escape) {
+      onClose?.();
+    }
+  });
+
+  // Fetch models on mount
+  useEffect(() => {
+    if (!hasAnyKey) {
+      setState({ loading: false, anthropicModels: [], openaiModels: [], errors: [] });
+      return;
+    }
+
+    let cancelled = false;
+
+    async function loadModels() {
+      try {
+        const result = await getModelsByProvider();
+        if (!cancelled) {
+          setState({
+            loading: false,
+            anthropicModels: result.anthropic || [],
+            openaiModels: result.openai || [],
+            errors: result.errors,
+          });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setState({
+            loading: false,
+            anthropicModels: [],
+            openaiModels: [],
+            errors: [{ provider: "Unknown", error: String(error) }],
+          });
+        }
+      }
+    }
+
+    loadModels();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [hasAnyKey]);
+
+  // No API keys configured
+  if (!hasAnyKey) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor={colors.warning}
+        paddingX={2}
+        paddingY={1}
+        marginY={1}
+      >
+        <Text bold color={colors.warning}>
+          ⚠️ No API Keys Found
+        </Text>
+        <Box height={1} />
+        <Text>Add an API key first to see available models.</Text>
+        <Box height={1} />
+        <Text color={colors.primary}>Run /apikey to add your API key</Text>
+        <Box height={1} />
+        <Text dimColor>Supported providers:</Text>
+        <Text dimColor>  • Anthropic (Claude)</Text>
+        <Text dimColor>  • OpenAI (GPT)</Text>
+      </Box>
+    );
+  }
+
+  // Loading state
+  if (state.loading) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor={colors.muted}
+        paddingX={2}
+        paddingY={1}
+        marginY={1}
+      >
+        <Text bold color={colors.info}>
+          {emoji.model} Select Model
+        </Text>
+        <Box height={1} />
+        <Box>
+          <Spinner label="Fetching models from API..." />
+        </Box>
+      </Box>
+    );
+  }
+
+  // Check if we have any models
+  const hasModels = allModels.length > 0;
+
+  // No models found (API errors)
+  if (!hasModels && state.errors.length > 0) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor={colors.error}
+        paddingX={2}
+        paddingY={1}
+        marginY={1}
+      >
+        <Text bold color={colors.error}>
+          {emoji.error} Failed to Fetch Models
+        </Text>
+        <Box height={1} />
+        {state.errors.map((err, i) => (
+          <Text key={i} color={colors.error}>
+            {err.provider}: {err.error}
+          </Text>
+        ))}
+        <Box height={1} />
+        <Text dimColor>Check your API key and try again with /apikey</Text>
+      </Box>
+    );
+  }
+
+  // Calculate the offset for each provider section
+  let anthropicOffset = 0;
+  let openaiOffset = state.anthropicModels.length;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.primary}
+      paddingX={2}
+      paddingY={1}
+      marginY={1}
+    >
+      <Text bold color={colors.info}>
+        {emoji.model} Select Model
+      </Text>
+      <Box height={1} />
+
+      {/* Show any errors */}
+      {state.errors.length > 0 && (
+        <>
+          {state.errors.map((err, i) => (
+            <Text key={i} color={colors.warning}>
+              {emoji.warning} {err.provider}: {err.error}
+            </Text>
+          ))}
+          <Box height={1} />
+        </>
+      )}
+
+      {/* Anthropic Models */}
+      {state.anthropicModels.length > 0 && (
+        <>
+          <Text bold color={colors.primary}>
+            Anthropic Claude
+          </Text>
+          {state.anthropicModels.map((model, index) => {
+            const globalIndex = anthropicOffset + index;
+            const isSelected = globalIndex === selectedIndex;
+            const isCurrent = isCurrentModel(currentModel, model);
+            return (
+              <ModelItem
+                key={model.id}
+                model={model}
+                isSelected={isSelected}
+                isCurrent={isCurrent}
+              />
+            );
+          })}
+          <Box height={1} />
+        </>
+      )}
+
+      {/* OpenAI Models */}
+      {state.openaiModels.length > 0 && (
+        <>
+          <Text bold color={colors.primary}>
+            OpenAI GPT
+          </Text>
+          {state.openaiModels.map((model, index) => {
+            const globalIndex = openaiOffset + index;
+            const isSelected = globalIndex === selectedIndex;
+            const isCurrent = isCurrentModel(currentModel, model);
+            return (
+              <ModelItem
+                key={model.id}
+                model={model}
+                isSelected={isSelected}
+                isCurrent={isCurrent}
+              />
+            );
+          })}
+          <Box height={1} />
+        </>
+      )}
+
+      {/* Navigation hint */}
+      <Text dimColor>↑/↓ Navigate • Enter Select • Esc Cancel</Text>
+    </Box>
+  );
+}
+
+/**
+ * Check if a model matches the current model.
+ */
+function isCurrentModel(currentModel: string | undefined, model: AvailableModel): boolean {
+  if (!currentModel) return false;
+  return (
+    currentModel === model.id ||
+    currentModel === model.name ||
+    currentModel === `${model.provider}/${model.name}` ||
+    (currentModel.startsWith(`${model.provider}/`) && currentModel === model.id)
+  );
+}
+
+interface ModelItemProps {
+  model: AvailableModel;
+  isSelected: boolean;
+  isCurrent: boolean;
+}
+
+function ModelItem({ model, isSelected, isCurrent }: ModelItemProps): React.ReactElement {
+  // Determine the indicator
+  let indicator = "  ";
+  let textColor: string | undefined = undefined;
+  let isBold = false;
+
+  if (isSelected) {
+    indicator = "▸ ";
+    textColor = colors.primary;
+    isBold = true;
+  }
+
+  if (isCurrent) {
+    indicator = isSelected ? "▸✓" : " ✓";
+    textColor = isSelected ? colors.primary : colors.success;
+  }
+
+  return (
+    <Box marginLeft={1}>
+      <Text color={isSelected ? colors.primary : isCurrent ? colors.success : undefined}>
+        {indicator}
+      </Text>
+      <Text color={textColor} bold={isBold}>
+        {model.id}
+      </Text>
+      {model.description && (
+        <>
+          <Text dimColor> - </Text>
+          <Text dimColor>{model.description}</Text>
+        </>
+      )}
+    </Box>
+  );
+}

package/src/cli/components/SlashMenu.tsx

@@ -0,0 +1,101 @@
+/**
+ * Slash command autocomplete menu component.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { colors, filterCommands, type SlashCommand } from "../theme.js";
+
+interface SlashMenuProps {
+  /** Current input value to filter commands */
+  filter: string;
+  /** Maximum number of items to show */
+  maxItems?: number;
+}
+
+export function SlashMenu({
+  filter,
+  maxItems = 8,
+}: SlashMenuProps): React.ReactElement | null {
+  // Only show menu when input starts with /
+  if (!filter.startsWith("/")) {
+    return null;
+  }
+
+  const filtered = filterCommands(filter);
+
+  if (filtered.length === 0) {
+    return (
+      <Box paddingLeft={2} marginTop={1}>
+        <Text dimColor>No matching commands</Text>
+      </Box>
+    );
+  }
+
+  const displayItems = filtered.slice(0, maxItems);
+  const hasMore = filtered.length > maxItems;
+
+  return (
+    <Box flexDirection="column" marginTop={1} paddingLeft={2}>
+      {displayItems.map((cmd) => (
+        <SlashMenuItem key={cmd.command} command={cmd} />
+      ))}
+      {hasMore && (
+        <Text dimColor>... and {filtered.length - maxItems} more</Text>
+      )}
+    </Box>
+  );
+}
+
+interface SlashMenuItemProps {
+  command: SlashCommand;
+}
+
+function SlashMenuItem({ command }: SlashMenuItemProps): React.ReactElement {
+  const aliases =
+    command.aliases.length > 0 ? ` (${command.aliases.join(", ")})` : "";
+
+  return (
+    <Box>
+      <Text color={colors.info}>{command.command}</Text>
+      <Text dimColor>{aliases}</Text>
+      <Text dimColor> - {command.description}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Full slash menu panel for /help command.
+ */
+export function SlashMenuPanel(): React.ReactElement {
+  const commands = filterCommands();
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.muted}
+      paddingX={2}
+      paddingY={1}
+      marginY={1}
+    >
+      <Text bold color={colors.info}>
+        Available Commands
+      </Text>
+      <Box height={1} />
+      {commands.map((cmd) => (
+        <Box key={cmd.command} flexDirection="column" marginBottom={1}>
+          <Box>
+            <Text color={colors.info}>{cmd.command}</Text>
+            {cmd.aliases.length > 0 && (
+              <Text dimColor> ({cmd.aliases.join(", ")})</Text>
+            )}
+          </Box>
+          <Box paddingLeft={2}>
+            <Text dimColor>{cmd.description}</Text>
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+

package/src/cli/components/StatusBar.tsx

@@ -0,0 +1,89 @@
+/**
+ * Compact status bar component.
+ * 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 FeatureFlags {
+  promptCaching: boolean;
+  eviction: boolean;
+  summarization: boolean;
+}
+
+interface StatusBarProps {
+  /** Current working directory */
+  workDir: string;
+  /** Current model name */
+  model: string;
+  /** Optional status indicator (idle, generating, etc.) */
+  status?: "idle" | "thinking" | "streaming" | "tool-call" | "subagent" | "done" | "error";
+  /** Feature flags to display */
+  features?: FeatureFlags;
+  /** Whether auto-approve mode is enabled */
+  autoApproveEnabled?: boolean;
+  /** Current session ID if checkpointing is enabled */
+  sessionId?: string;
+}
+
+export function StatusBar({
+  workDir,
+  model,
+  status = "idle",
+  features,
+  autoApproveEnabled = false,
+  sessionId,
+}: StatusBarProps): React.ReactElement {
+  // Get short model name
+  const shortModel = model.split("/").pop() || model;
+  
+  // Status indicator - minimal
+  const getStatusDisplay = () => {
+    switch (status) {
+      case "thinking":
+        return <Text color={colors.warning}>●</Text>;
+      case "streaming":
+        return <Text color={colors.success}>●</Text>;
+      case "tool-call":
+        return <Text color={colors.tool}>●</Text>;
+      case "subagent":
+        return <Text color={colors.secondary}>●</Text>;
+      case "error":
+        return <Text color={colors.error}>●</Text>;
+      case "done":
+        return <Text color={colors.success}>●</Text>;
+      default:
+        return <Text dimColor>○</Text>;
+    }
+  };
+
+  // Feature badges - compact
+  const featureBadges: string[] = [];
+  if (features?.promptCaching) featureBadges.push("⚡");
+  if (features?.eviction) featureBadges.push("📦");
+  if (features?.summarization) featureBadges.push("📝");
+
+  return (
+    <Box marginTop={1}>
+      <Text dimColor>
+        {getStatusDisplay()} {shortModel}
+        {featureBadges.length > 0 && ` ${featureBadges.join(" ")}`}
+        {" · "}
+        {autoApproveEnabled ? (
+          <Text color={colors.success}>🟢 Auto-approve</Text>
+        ) : (
+          <Text color={colors.warning}>🔴 Safe mode</Text>
+        )}
+        {sessionId && (
+          <>
+            {" · "}
+            <Text dimColor>Session: {sessionId}</Text>
+          </>
+        )}
+        {" · "}? for shortcuts
+      </Text>
+    </Box>
+  );
+}
+

package/src/cli/components/Subagent.tsx

@@ -0,0 +1,91 @@
+/**
+ * Subagent status display components.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { Spinner, StatusMessage } from "@inkjs/ui";
+import { emoji, colors } from "../theme.js";
+
+interface SubagentStartProps {
+  /** Subagent name */
+  name: string;
+  /** Task description */
+  task: string;
+  /** Maximum task length to display */
+  maxTaskLength?: number;
+}
+
+export function SubagentStart({
+  name,
+  task,
+  maxTaskLength = 60,
+}: SubagentStartProps): React.ReactElement {
+  const shortTask =
+    task.length > maxTaskLength
+      ? task.substring(0, maxTaskLength) + "..."
+      : task;
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Box>
+        <Spinner
+          label={`${emoji.subagent} Starting subagent: ${name}`}
+        />
+      </Box>
+      <Box paddingLeft={4}>
+        <Text dimColor>└─ {shortTask}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+interface SubagentFinishProps {
+  /** Subagent name */
+  name: string;
+}
+
+export function SubagentFinish({
+  name,
+}: SubagentFinishProps): React.ReactElement {
+  return (
+    <Box marginY={1}>
+      <StatusMessage variant="success">
+        {emoji.subagent} Subagent {name} completed
+      </StatusMessage>
+    </Box>
+  );
+}
+
+/**
+ * Subagent running indicator (for when a subagent is actively working).
+ */
+interface SubagentRunningProps {
+  name: string;
+  task: string;
+}
+
+export function SubagentRunning({
+  name,
+  task,
+}: SubagentRunningProps): React.ReactElement {
+  const shortTask = task.length > 50 ? task.substring(0, 50) + "..." : task;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.secondary}
+      paddingX={2}
+      paddingY={1}
+      marginY={1}
+    >
+      <Box>
+        <Spinner label={`${emoji.subagent} ${name}`} />
+      </Box>
+      <Box paddingLeft={2}>
+        <Text dimColor>{shortTask}</Text>
+      </Box>
+    </Box>
+  );
+}
+