@within-7/minto 0.1.4 → 0.1.6

package/dist/commands/agents/AgentsCommand.js

@@ -0,0 +1,2342 @@
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  useReducer,
+  Fragment
+} from "react";
+import { Box, Text, useInput } from "ink";
+import InkTextInput from "ink-text-input";
+import {
+  getActiveAgents,
+  clearAgentCache
+} from "../../utils/agentLoader.js";
+import * as path from "path";
+import * as os from "os";
+import { exec } from "child_process";
+import { promisify } from "util";
+import { getTheme } from "../../utils/theme.js";
+const execAsync = promisify(exec);
+import { getMCPTools } from "../../services/mcpClient.js";
+import { getModelManager } from "../../utils/model.js";
+import { randomUUID } from "crypto";
+import {
+  UI_ICONS,
+  TOOL_CATEGORIES
+} from "./constants.js";
+import {
+  getAgentFilePath,
+  saveAgent,
+  deleteAgent,
+  openInEditor,
+  updateAgent
+} from "./utils.js";
+function getDisplayModelName(modelId) {
+  if (!modelId) return "Inherit";
+  try {
+    const profiles = getModelManager().getActiveModelProfiles();
+    const profile = profiles.find(
+      (p) => p.modelName === modelId || p.name === modelId
+    );
+    return profile ? profile.name : `Custom (${modelId})`;
+  } catch (error) {
+    console.warn("Failed to get model profiles:", error);
+    return modelId ? `Custom (${modelId})` : "Inherit";
+  }
+}
+async function generateAgentWithClaude(prompt) {
+  const { queryModel } = await import("../../services/claude.js");
+  const systemPrompt = `You are an expert at creating AI agent configurations. Based on the user's description, generate a specialized agent configuration.
+
+Return your response as a JSON object with exactly these fields:
+- identifier: A short, kebab-case identifier for the agent (e.g., "code-reviewer", "security-auditor")
+- whenToUse: A clear description of when this agent should be used (50-200 words)
+- systemPrompt: A comprehensive system prompt that defines the agent's role, capabilities, and behavior (200-500 words)
+
+Make the agent highly specialized and effective for the described use case.`;
+  try {
+    const messages = [
+      {
+        type: "user",
+        uuid: randomUUID(),
+        message: { role: "user", content: prompt }
+      }
+    ];
+    const response = await queryModel("main", messages, [systemPrompt]);
+    let responseText = "";
+    if (typeof response.message?.content === "string") {
+      responseText = response.message.content;
+    } else if (Array.isArray(response.message?.content)) {
+      const textContent = response.message.content.find(
+        (c) => c.type === "text"
+      );
+      responseText = textContent?.text || "";
+    } else if (response.message?.content?.[0]?.text) {
+      responseText = response.message.content[0].text;
+    }
+    if (!responseText) {
+      throw new Error("No text content in Claude response");
+    }
+    const MAX_JSON_SIZE = 1e5;
+    const MAX_FIELD_LENGTH = 1e4;
+    if (responseText.length > MAX_JSON_SIZE) {
+      throw new Error("Response too large");
+    }
+    let parsed;
+    try {
+      parsed = JSON.parse(responseText.trim());
+    } catch {
+      const startIdx = responseText.indexOf("{");
+      const endIdx = responseText.lastIndexOf("}");
+      if (startIdx === -1 || endIdx === -1 || startIdx >= endIdx) {
+        throw new Error("No valid JSON found in Claude response");
+      }
+      const jsonStr = responseText.substring(startIdx, endIdx + 1);
+      if (jsonStr.length > MAX_JSON_SIZE) {
+        throw new Error("JSON content too large");
+      }
+      try {
+        parsed = JSON.parse(jsonStr);
+      } catch (parseError) {
+        throw new Error(
+          `Invalid JSON format: ${parseError instanceof Error ? parseError.message : "Unknown error"}`
+        );
+      }
+    }
+    const identifier = String(parsed.identifier || "").slice(0, 100).trim();
+    const whenToUse = String(parsed.whenToUse || "").slice(0, MAX_FIELD_LENGTH).trim();
+    const agentSystemPrompt = String(parsed.systemPrompt || "").slice(0, MAX_FIELD_LENGTH).trim();
+    if (!identifier || !whenToUse || !agentSystemPrompt) {
+      throw new Error(
+        "Invalid response structure: missing required fields (identifier, whenToUse, systemPrompt)"
+      );
+    }
+    const sanitize = (str) => str.replace(/[\x00-\x1F\x7F-\x9F]/g, "");
+    const cleanIdentifier = sanitize(identifier);
+    if (!/^[a-zA-Z0-9-]+$/.test(cleanIdentifier)) {
+      throw new Error(
+        "Invalid identifier format: only letters, numbers, and hyphens allowed"
+      );
+    }
+    return {
+      identifier: cleanIdentifier,
+      whenToUse: sanitize(whenToUse),
+      systemPrompt: sanitize(agentSystemPrompt)
+    };
+  } catch (error) {
+    console.error("AI generation failed:", error);
+    const fallbackId = prompt.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").slice(0, 30);
+    return {
+      identifier: fallbackId || "custom-agent",
+      whenToUse: `Use this agent when you need assistance with: ${prompt}`,
+      systemPrompt: `You are a specialized assistant focused on helping with ${prompt}. Provide expert-level assistance in this domain.`
+    };
+  }
+}
+function validateAgentType(agentType, existingAgents = []) {
+  const errors = [];
+  const warnings = [];
+  if (!agentType) {
+    errors.push("Agent type is required");
+    return { isValid: false, errors, warnings };
+  }
+  if (!/^[a-zA-Z]/.test(agentType)) {
+    errors.push("Agent type must start with a letter");
+  }
+  if (!/^[a-zA-Z0-9-]+$/.test(agentType)) {
+    errors.push("Agent type can only contain letters, numbers, and hyphens");
+  }
+  if (agentType.length < 3) {
+    errors.push("Agent type must be at least 3 characters long");
+  }
+  if (agentType.length > 50) {
+    errors.push("Agent type must be less than 50 characters");
+  }
+  const reserved = ["help", "exit", "quit", "agents", "task"];
+  if (reserved.includes(agentType.toLowerCase())) {
+    errors.push("This name is reserved");
+  }
+  const duplicate = existingAgents.find((a) => a.agentType === agentType);
+  if (duplicate) {
+    errors.push(
+      `An agent with this name already exists in ${duplicate.location}`
+    );
+  }
+  if (agentType.includes("--")) {
+    warnings.push("Consider avoiding consecutive hyphens");
+  }
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings
+  };
+}
+function validateAgentConfig(config, existingAgents = []) {
+  const errors = [];
+  const warnings = [];
+  if (config.agentType) {
+    const typeValidation = validateAgentType(config.agentType, existingAgents);
+    errors.push(...typeValidation.errors);
+    warnings.push(...typeValidation.warnings);
+  }
+  if (!config.whenToUse) {
+    errors.push("Description is required");
+  } else if (config.whenToUse.length < 10) {
+    warnings.push(
+      "Description should be more descriptive (at least 10 characters)"
+    );
+  }
+  if (!config.systemPrompt) {
+    errors.push("System prompt is required");
+  } else if (config.systemPrompt.length < 20) {
+    warnings.push(
+      "System prompt might be too short for effective agent behavior"
+    );
+  }
+  if (!config.selectedTools || config.selectedTools.length === 0) {
+    warnings.push("No tools selected - agent will have limited capabilities");
+  }
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings
+  };
+}
+function Header({ title, subtitle, step, totalSteps, children }) {
+  const theme = getTheme();
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.primary }, title), subtitle && /* @__PURE__ */ React.createElement(Text, { color: theme.secondary }, step && totalSteps ? `Step ${step}/${totalSteps}: ` : "", subtitle), children);
+}
+function InstructionBar({
+  instructions = "Press \u2191\u2193 to navigate \xB7 Enter to select \xB7 Esc to go back"
+}) {
+  const theme = getTheme();
+  return /* @__PURE__ */ React.createElement(Box, { marginTop: 2 }, /* @__PURE__ */ React.createElement(Box, { borderStyle: "round", borderColor: theme.secondary, paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondary }, instructions)));
+}
+function SelectList({
+  options,
+  selectedIndex,
+  onChange,
+  onCancel,
+  numbered = true
+}) {
+  const theme = getTheme();
+  useInput((input, key) => {
+    if (key.escape && onCancel) {
+      onCancel();
+    } else if (key.return) {
+      onChange(options[selectedIndex].value);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, options.map((option, idx) => /* @__PURE__ */ React.createElement(Box, { key: option.value }, /* @__PURE__ */ React.createElement(Text, { color: idx === selectedIndex ? theme.primary : void 0 }, idx === selectedIndex ? `${UI_ICONS.pointer} ` : "  ", numbered ? `${idx + 1}. ` : "", option.label))));
+}
+function MultilineTextInput({
+  value,
+  onChange,
+  placeholder = "",
+  onSubmit,
+  focus = true,
+  rows = 5,
+  error
+}) {
+  const theme = getTheme();
+  const [internalValue, setInternalValue] = useState(value);
+  const [cursorBlink, setCursorBlink] = useState(true);
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (!focus) return;
+    const timer = setInterval(() => {
+      setCursorBlink((prev) => !prev);
+    }, 500);
+    return () => clearInterval(timer);
+  }, [focus]);
+  const lines = internalValue.split("\n");
+  const lineCount = lines.length;
+  const charCount = internalValue.length;
+  const isEmpty = !internalValue.trim();
+  const hasContent = !isEmpty;
+  const formatLines = (text) => {
+    if (!text && placeholder) {
+      return [placeholder];
+    }
+    const maxWidth = 70;
+    const result = [];
+    const textLines = text.split("\n");
+    textLines.forEach((line) => {
+      if (line.length <= maxWidth) {
+        result.push(line);
+      } else {
+        let remaining = line;
+        while (remaining.length > 0) {
+          result.push(remaining.slice(0, maxWidth));
+          remaining = remaining.slice(maxWidth);
+        }
+      }
+    });
+    return result.length > 0 ? result : [""];
+  };
+  const displayLines = formatLines(internalValue);
+  const visibleLines = displayLines.slice(
+    Math.max(0, displayLines.length - rows)
+  );
+  const handleSubmit = () => {
+    if (internalValue.trim() && onSubmit) {
+      onSubmit();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: "100%" }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      borderStyle: "round",
+      borderColor: focus ? theme.primary : "gray",
+      paddingX: 2,
+      paddingY: 1,
+      minHeight: rows + 2
+    },
+    /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+      InkTextInput,
+      {
+        value: internalValue,
+        onChange: (val) => {
+          setInternalValue(val);
+          onChange(val);
+        },
+        onSubmit: handleSubmit,
+        focus,
+        placeholder
+      }
+    ), focus && cursorBlink && hasContent && /* @__PURE__ */ React.createElement(Text, { color: theme.primary }, "_"))
+  ), /* @__PURE__ */ React.createElement(Box, { marginTop: 1, flexDirection: "row", justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Box, null, hasContent ? /* @__PURE__ */ React.createElement(Text, { color: theme.success }, "\u2713 ", charCount, " chars \u2022 ", lineCount, " line", lineCount !== 1 ? "s" : "") : /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "\u25CB Type to begin...")), /* @__PURE__ */ React.createElement(Box, null, error ? /* @__PURE__ */ React.createElement(Text, { color: theme.error }, "\u26A0 ", error) : /* @__PURE__ */ React.createElement(Text, { dimColor: true }, hasContent ? "Ready" : "Waiting")))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press Enter to submit \xB7 Shift+Enter for new line")));
+}
+function LoadingSpinner({ text }) {
+  const theme = getTheme();
+  const [frame, setFrame] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFrame((prev) => (prev + 1) % UI_ICONS.loading.length);
+    }, 100);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: theme.primary }, UI_ICONS.loading[frame]), text && /* @__PURE__ */ React.createElement(Text, { color: theme.secondary }, " ", text));
+}
+function AgentsUI({ onExit }) {
+  const theme = getTheme();
+  const [modeState, setModeState] = useState({
+    mode: "list-agents",
+    location: "all"
+  });
+  const [agents, setAgents] = useState([]);
+  const [changes, setChanges] = useState([]);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [tools, setTools] = useState([]);
+  const [createState, setCreateState] = useReducer(
+    (state, action) => {
+      switch (action.type) {
+        case "RESET":
+          return {
+            location: null,
+            agentType: "",
+            method: null,
+            generationPrompt: "",
+            whenToUse: "",
+            selectedTools: [],
+            selectedModel: null,
+            selectedColor: null,
+            systemPrompt: "",
+            isGenerating: false,
+            wasGenerated: false,
+            isAIGenerated: false,
+            error: null,
+            warnings: [],
+            agentTypeCursor: 0,
+            whenToUseCursor: 0,
+            promptCursor: 0,
+            generationPromptCursor: 0
+          };
+        case "SET_LOCATION":
+          return { ...state, location: action.value };
+        case "SET_METHOD":
+          return { ...state, method: action.value };
+        case "SET_AGENT_TYPE":
+          return { ...state, agentType: action.value, error: null };
+        case "SET_GENERATION_PROMPT":
+          return { ...state, generationPrompt: action.value };
+        case "SET_WHEN_TO_USE":
+          return { ...state, whenToUse: action.value, error: null };
+        case "SET_SELECTED_TOOLS":
+          return { ...state, selectedTools: action.value };
+        case "SET_SELECTED_MODEL":
+          return { ...state, selectedModel: action.value };
+        case "SET_SELECTED_COLOR":
+          return { ...state, selectedColor: action.value };
+        case "SET_SYSTEM_PROMPT":
+          return { ...state, systemPrompt: action.value };
+        case "SET_IS_GENERATING":
+          return { ...state, isGenerating: action.value };
+        case "SET_WAS_GENERATED":
+          return { ...state, wasGenerated: action.value };
+        case "SET_IS_AI_GENERATED":
+          return { ...state, isAIGenerated: action.value };
+        case "SET_ERROR":
+          return { ...state, error: action.value };
+        case "SET_WARNINGS":
+          return { ...state, warnings: action.value };
+        case "SET_CURSOR":
+          return { ...state, [action.field]: action.value };
+        default:
+          return state;
+      }
+    },
+    {
+      location: null,
+      agentType: "",
+      method: null,
+      generationPrompt: "",
+      whenToUse: "",
+      selectedTools: [],
+      selectedModel: null,
+      selectedColor: null,
+      systemPrompt: "",
+      isGenerating: false,
+      wasGenerated: false,
+      isAIGenerated: false,
+      error: null,
+      warnings: [],
+      agentTypeCursor: 0,
+      whenToUseCursor: 0,
+      promptCursor: 0,
+      generationPromptCursor: 0
+    }
+  );
+  const loadAgents = useCallback(async () => {
+    setLoading(true);
+    clearAgentCache();
+    const abortController = new AbortController();
+    const loadingId = Date.now();
+    try {
+      const result = await getActiveAgents();
+      if (abortController.signal.aborted) {
+        return;
+      }
+      setAgents(result);
+      if (modeState.selectedAgent) {
+        const freshSelectedAgent = result.find(
+          (a) => a.agentType === modeState.selectedAgent.agentType
+        );
+        if (freshSelectedAgent) {
+          setModeState((prev) => ({ ...prev, selectedAgent: freshSelectedAgent }));
+        }
+      }
+      const availableTools = [];
+      let coreTools = [
+        { name: "Read", description: "Read files from filesystem" },
+        { name: "Write", description: "Write files to filesystem" },
+        { name: "Edit", description: "Edit existing files" },
+        { name: "MultiEdit", description: "Make multiple edits to files" },
+        { name: "NotebookEdit", description: "Edit Jupyter notebooks" },
+        { name: "Bash", description: "Execute bash commands" },
+        { name: "Glob", description: "Find files matching patterns" },
+        { name: "Grep", description: "Search file contents" },
+        { name: "LS", description: "List directory contents" },
+        { name: "WebFetch", description: "Fetch web content" },
+        { name: "WebSearch", description: "Search the web" },
+        { name: "TodoWrite", description: "Manage task lists" }
+      ];
+      coreTools = coreTools.filter(
+        (t) => t.name !== "Task" && t.name !== "ExitPlanMode"
+      );
+      availableTools.push(...coreTools);
+      try {
+        const mcpTools = await getMCPTools();
+        if (Array.isArray(mcpTools) && mcpTools.length > 0) {
+          availableTools.push(...mcpTools);
+        }
+      } catch (error) {
+        console.warn("Failed to load MCP tools:", error);
+      }
+      if (!abortController.signal.aborted) {
+        setTools(availableTools);
+      }
+    } catch (error) {
+      if (!abortController.signal.aborted) {
+        console.error("Failed to load agents:", error);
+      }
+    } finally {
+      if (!abortController.signal.aborted) {
+        setLoading(false);
+      }
+    }
+    return () => abortController.abort();
+  }, []);
+  useEffect(() => {
+    let cleanup;
+    const load = async () => {
+      cleanup = await loadAgents();
+    };
+    load();
+    return () => {
+      if (cleanup) {
+        cleanup();
+      }
+    };
+  }, [refreshKey, loadAgents]);
+  useInput((input, key) => {
+    if (!key.escape) return;
+    const changesSummary = changes.length > 0 ? `Agent changes:
+${changes.join("\n")}` : void 0;
+    const current = modeState.mode;
+    if (current === "list-agents") {
+      onExit(changesSummary);
+      return;
+    }
+    switch (current) {
+      case "create-location":
+        setModeState({ mode: "list-agents", location: "all" });
+        break;
+      case "create-method":
+        setModeState({ mode: "create-location", location: modeState.location });
+        break;
+      case "create-generate":
+        setModeState({ mode: "create-location", location: modeState.location });
+        break;
+      case "create-type":
+        setModeState({ mode: "create-generate", location: modeState.location });
+        break;
+      case "create-prompt":
+        setModeState({ mode: "create-type", location: modeState.location });
+        break;
+      case "create-description":
+        setModeState({ mode: "create-prompt", location: modeState.location });
+        break;
+      case "create-tools":
+        setModeState({
+          mode: "create-description",
+          location: modeState.location
+        });
+        break;
+      case "create-model":
+        setModeState({ mode: "create-tools", location: modeState.location });
+        break;
+      case "create-color":
+        setModeState({ mode: "create-model", location: modeState.location });
+        break;
+      case "create-confirm":
+        setModeState({ mode: "create-color", location: modeState.location });
+        break;
+      case "agent-menu":
+        setModeState({ mode: "list-agents", location: "all" });
+        break;
+      case "view-agent":
+        setModeState({
+          mode: "agent-menu",
+          selectedAgent: modeState.selectedAgent
+        });
+        break;
+      case "edit-agent":
+        setModeState({
+          mode: "agent-menu",
+          selectedAgent: modeState.selectedAgent
+        });
+        break;
+      case "edit-tools":
+      case "edit-model":
+      case "edit-color":
+        setModeState({
+          mode: "edit-agent",
+          selectedAgent: modeState.selectedAgent
+        });
+        break;
+      case "delete-confirm":
+        setModeState({
+          mode: "agent-menu",
+          selectedAgent: modeState.selectedAgent
+        });
+        break;
+      default:
+        setModeState({ mode: "list-agents", location: "all" });
+        break;
+    }
+  });
+  const handleAgentSelect = useCallback(
+    (agent) => {
+      setModeState({
+        mode: "agent-menu",
+        location: modeState.location,
+        selectedAgent: agent
+      });
+    },
+    [modeState]
+  );
+  const handleCreateNew = useCallback(() => {
+    console.log("=== STARTING AGENT CREATION FLOW ===");
+    console.log("Current mode state:", modeState);
+    setCreateState({ type: "RESET" });
+    console.log("Reset create state");
+    setModeState({ mode: "create-location" });
+    console.log("Set mode to create-location");
+    console.log("=== CREATE NEW HANDLER COMPLETED ===");
+  }, [modeState]);
+  const handleAgentCreated = useCallback((message) => {
+    setChanges((prev) => [...prev, message]);
+    setRefreshKey((prev) => prev + 1);
+    setModeState({ mode: "list-agents", location: "all" });
+  }, []);
+  const handleAgentDeleted = useCallback((message) => {
+    setChanges((prev) => [...prev, message]);
+    setRefreshKey((prev) => prev + 1);
+    setModeState({ mode: "list-agents", location: "all" });
+  }, []);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "Agents" }, /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(LoadingSpinner, { text: "Loading agents..." }))), /* @__PURE__ */ React.createElement(InstructionBar, null));
+  }
+  switch (modeState.mode) {
+    case "list-agents":
+      return /* @__PURE__ */ React.createElement(
+        AgentListView,
+        {
+          location: modeState.location || "all",
+          agents,
+          allAgents: agents,
+          onBack: () => onExit(),
+          onSelect: handleAgentSelect,
+          onCreateNew: handleCreateNew,
+          changes
+        }
+      );
+    case "create-location":
+      return /* @__PURE__ */ React.createElement(
+        LocationSelect,
+        {
+          createState,
+          setCreateState,
+          setModeState
+        }
+      );
+    case "create-method":
+      return /* @__PURE__ */ React.createElement(
+        MethodSelect,
+        {
+          createState,
+          setCreateState,
+          setModeState
+        }
+      );
+    case "create-generate":
+      return /* @__PURE__ */ React.createElement(
+        GenerateStep,
+        {
+          createState,
+          setCreateState,
+          setModeState,
+          existingAgents: agents
+        }
+      );
+    case "create-type":
+      return /* @__PURE__ */ React.createElement(
+        TypeStep,
+        {
+          createState,
+          setCreateState,
+          setModeState,
+          existingAgents: agents
+        }
+      );
+    case "create-description":
+      return /* @__PURE__ */ React.createElement(
+        DescriptionStep,
+        {
+          createState,
+          setCreateState,
+          setModeState
+        }
+      );
+    case "create-tools":
+      return /* @__PURE__ */ React.createElement(
+        ToolsStep,
+        {
+          createState,
+          setCreateState,
+          setModeState,
+          tools
+        }
+      );
+    case "create-model":
+      return /* @__PURE__ */ React.createElement(
+        ModelStep,
+        {
+          createState,
+          setCreateState,
+          setModeState
+        }
+      );
+    case "create-color":
+      return /* @__PURE__ */ React.createElement(
+        ColorStep,
+        {
+          createState,
+          setCreateState,
+          setModeState
+        }
+      );
+    case "create-prompt":
+      return /* @__PURE__ */ React.createElement(
+        PromptStep,
+        {
+          createState,
+          setCreateState,
+          setModeState
+        }
+      );
+    case "create-confirm":
+      return /* @__PURE__ */ React.createElement(
+        ConfirmStep,
+        {
+          createState,
+          setCreateState,
+          setModeState,
+          tools,
+          onAgentCreated: handleAgentCreated
+        }
+      );
+    case "agent-menu":
+      return /* @__PURE__ */ React.createElement(
+        AgentMenu,
+        {
+          agent: modeState.selectedAgent,
+          setModeState
+        }
+      );
+    case "view-agent":
+      return /* @__PURE__ */ React.createElement(
+        ViewAgent,
+        {
+          agent: modeState.selectedAgent,
+          tools,
+          setModeState
+        }
+      );
+    case "edit-agent":
+      return /* @__PURE__ */ React.createElement(
+        EditMenu,
+        {
+          agent: modeState.selectedAgent,
+          setModeState
+        }
+      );
+    case "edit-tools":
+      return /* @__PURE__ */ React.createElement(
+        EditToolsStep,
+        {
+          agent: modeState.selectedAgent,
+          tools,
+          setModeState,
+          onAgentUpdated: (message, updated) => {
+            setChanges((prev) => [...prev, message]);
+            setRefreshKey((prev) => prev + 1);
+            setModeState({ mode: "agent-menu", selectedAgent: updated });
+          }
+        }
+      );
+    case "edit-model":
+      return /* @__PURE__ */ React.createElement(
+        EditModelStep,
+        {
+          agent: modeState.selectedAgent,
+          setModeState,
+          onAgentUpdated: (message, updated) => {
+            setChanges((prev) => [...prev, message]);
+            setRefreshKey((prev) => prev + 1);
+            setModeState({ mode: "agent-menu", selectedAgent: updated });
+          }
+        }
+      );
+    case "edit-color":
+      return /* @__PURE__ */ React.createElement(
+        EditColorStep,
+        {
+          agent: modeState.selectedAgent,
+          setModeState,
+          onAgentUpdated: (message, updated) => {
+            setChanges((prev) => [...prev, message]);
+            setRefreshKey((prev) => prev + 1);
+            setModeState({ mode: "agent-menu", selectedAgent: updated });
+          }
+        }
+      );
+    case "delete-confirm":
+      return /* @__PURE__ */ React.createElement(
+        DeleteConfirm,
+        {
+          agent: modeState.selectedAgent,
+          setModeState,
+          onAgentDeleted: handleAgentDeleted
+        }
+      );
+    default:
+      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "Agents" }, /* @__PURE__ */ React.createElement(Text, null, "Mode: ", modeState.mode, " (Not implemented yet)"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, "Press Esc to go back"))), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "Esc to go back" }));
+  }
+}
+function AgentListView({
+  location,
+  agents,
+  allAgents,
+  onBack,
+  onSelect,
+  onCreateNew,
+  changes
+}) {
+  const theme = getTheme();
+  const allAgentsList = allAgents || agents;
+  const customAgents = allAgentsList.filter((a) => a.location !== "built-in");
+  const builtInAgents = allAgentsList.filter((a) => a.location === "built-in");
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  const [onCreateOption, setOnCreateOption] = useState(true);
+  const [currentLocation, setCurrentLocation] = useState(location);
+  const [inLocationTabs, setInLocationTabs] = useState(false);
+  const [selectedLocationTab, setSelectedLocationTab] = useState(0);
+  const locationTabs = [
+    { label: "All", value: "all" },
+    { label: "Personal", value: "user" },
+    { label: "Project", value: "project" }
+  ];
+  const activeMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    agents.forEach((a) => map.set(a.agentType, a));
+    return map;
+  }, [agents]);
+  const checkOverride = (agent) => {
+    const active = activeMap.get(agent.agentType);
+    const isOverridden = !!(active && active.location !== agent.location);
+    return {
+      isOverridden,
+      overriddenBy: isOverridden ? active.location : null
+    };
+  };
+  const renderCreateOption = () => /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { color: onCreateOption ? theme.primary : void 0 }, onCreateOption ? `${UI_ICONS.pointer} ` : "  "), /* @__PURE__ */ React.createElement(Text, { bold: true, color: onCreateOption ? theme.primary : void 0 }, "\u2728 Create new agent"));
+  const renderAgent = (agent, isBuiltIn = false) => {
+    const isSelected = !isBuiltIn && !onCreateOption && selectedAgent?.agentType === agent.agentType && selectedAgent?.location === agent.location;
+    const { isOverridden, overriddenBy } = checkOverride(agent);
+    const dimmed = isBuiltIn || isOverridden;
+    const color = !isBuiltIn && isSelected ? theme.primary : void 0;
+    const agentModel = agent.model || null;
+    const modelDisplay = getDisplayModelName(agentModel);
+    return /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        key: `${agent.agentType}-${agent.location}`,
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", alignItems: "center", minWidth: 3 }, /* @__PURE__ */ React.createElement(Text, { dimColor: dimmed && !isSelected, color }, isBuiltIn ? "" : isSelected ? `${UI_ICONS.pointer} ` : "  ")),
+      /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", alignItems: "center", flexGrow: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: dimmed && !isSelected, color }, agent.agentType), /* @__PURE__ */ React.createElement(Text, { dimColor: true, color: dimmed ? void 0 : "gray" }, " \xB7 ", modelDisplay)),
+      overriddenBy && /* @__PURE__ */ React.createElement(Box, { marginLeft: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: !isSelected, color: isSelected ? "yellow" : "gray" }, UI_ICONS.warning, " overridden by ", overriddenBy))
+    );
+  };
+  const displayAgents = useMemo(() => {
+    if (currentLocation === "all") {
+      return [
+        ...customAgents.filter((a) => a.location === "user"),
+        ...customAgents.filter((a) => a.location === "project")
+      ];
+    } else if (currentLocation === "user" || currentLocation === "project") {
+      return customAgents.filter((a) => a.location === currentLocation);
+    }
+    return customAgents;
+  }, [customAgents, currentLocation]);
+  useEffect(() => {
+    const tabIndex = locationTabs.findIndex(
+      (tab) => tab.value === currentLocation
+    );
+    if (tabIndex !== -1) {
+      setSelectedLocationTab(tabIndex);
+    }
+  }, [currentLocation, locationTabs]);
+  useEffect(() => {
+    if (displayAgents.length > 0 && !selectedAgent && !onCreateOption) {
+      setOnCreateOption(true);
+    }
+  }, [displayAgents.length, selectedAgent, onCreateOption]);
+  useInput((input, key) => {
+    if (key.escape) {
+      if (inLocationTabs) {
+        setInLocationTabs(false);
+        return;
+      }
+      onBack();
+      return;
+    }
+    if (key.return) {
+      if (inLocationTabs) {
+        setCurrentLocation(locationTabs[selectedLocationTab].value);
+        setInLocationTabs(false);
+        return;
+      }
+      if (onCreateOption && onCreateNew) {
+        onCreateNew();
+      } else if (selectedAgent) {
+        onSelect(selectedAgent);
+      }
+      return;
+    }
+    if (key.tab) {
+      setInLocationTabs(!inLocationTabs);
+      return;
+    }
+    if (inLocationTabs) {
+      if (key.leftArrow) {
+        setSelectedLocationTab(
+          (prev) => prev > 0 ? prev - 1 : locationTabs.length - 1
+        );
+      } else if (key.rightArrow) {
+        setSelectedLocationTab(
+          (prev) => prev < locationTabs.length - 1 ? prev + 1 : 0
+        );
+      }
+      return;
+    }
+    if (key.upArrow || key.downArrow) {
+      const allNavigableItems = [];
+      if (onCreateNew) {
+        allNavigableItems.push({ type: "create", agent: null });
+      }
+      displayAgents.forEach((agent) => {
+        const { isOverridden } = checkOverride(agent);
+        if (!isOverridden) {
+          allNavigableItems.push({ type: "agent", agent });
+        }
+      });
+      if (allNavigableItems.length === 0) return;
+      if (key.upArrow) {
+        if (onCreateOption) {
+          const lastAgent = allNavigableItems[allNavigableItems.length - 1];
+          if (lastAgent.type === "agent") {
+            setSelectedAgent(lastAgent.agent);
+            setOnCreateOption(false);
+          }
+        } else if (selectedAgent) {
+          const currentIndex = allNavigableItems.findIndex(
+            (item) => item.type === "agent" && item.agent?.agentType === selectedAgent.agentType && item.agent?.location === selectedAgent.location
+          );
+          if (currentIndex > 0) {
+            const prevItem = allNavigableItems[currentIndex - 1];
+            if (prevItem.type === "create") {
+              setOnCreateOption(true);
+              setSelectedAgent(null);
+            } else {
+              setSelectedAgent(prevItem.agent);
+            }
+          } else {
+            if (onCreateNew) {
+              setOnCreateOption(true);
+              setSelectedAgent(null);
+            }
+          }
+        }
+      } else if (key.downArrow) {
+        if (onCreateOption) {
+          const firstAgent = allNavigableItems.find(
+            (item) => item.type === "agent"
+          );
+          if (firstAgent) {
+            setSelectedAgent(firstAgent.agent);
+            setOnCreateOption(false);
+          }
+        } else if (selectedAgent) {
+          const currentIndex = allNavigableItems.findIndex(
+            (item) => item.type === "agent" && item.agent?.agentType === selectedAgent.agentType && item.agent?.location === selectedAgent.location
+          );
+          if (currentIndex < allNavigableItems.length - 1) {
+            const nextItem = allNavigableItems[currentIndex + 1];
+            if (nextItem.type === "agent") {
+              setSelectedAgent(nextItem.agent);
+            }
+          } else {
+            if (onCreateNew) {
+              setOnCreateOption(true);
+              setSelectedAgent(null);
+            }
+          }
+        }
+      }
+    }
+  });
+  const EmptyStateInput = () => {
+    useInput((input, key) => {
+      if (key.escape) {
+        onBack();
+        return;
+      }
+      if (key.return && onCreateNew) {
+        onCreateNew();
+        return;
+      }
+    });
+    return null;
+  };
+  if (!agents.length || currentLocation !== "built-in" && !customAgents.length) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(EmptyStateInput, null), /* @__PURE__ */ React.createElement(Header, { title: "\u{1F916} Agents", subtitle: "" }, onCreateNew && /* @__PURE__ */ React.createElement(Box, { marginY: 1 }, renderCreateOption()), /* @__PURE__ */ React.createElement(Box, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.primary }, "\u{1F4AD} What are agents?")), /* @__PURE__ */ React.createElement(Text, null, "Specialized AI assistants that Minto can delegate to for specific tasks, compatible with Claude Code `.claude` agent packs."), /* @__PURE__ */ React.createElement(Text, null, "Each agent has its own context, prompt, and tools."), /* @__PURE__ */ React.createElement(Box, { marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.primary }, "\u{1F4A1} Popular agent ideas:")), /* @__PURE__ */ React.createElement(Box, { paddingLeft: 2, flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, null, "\u2022 \u{1F50D} Code Reviewer - Reviews PRs for best practices"), /* @__PURE__ */ React.createElement(Text, null, "\u2022 \u{1F512} Security Auditor - Finds vulnerabilities"), /* @__PURE__ */ React.createElement(Text, null, "\u2022 \u26A1 Performance Optimizer - Improves code speed"), /* @__PURE__ */ React.createElement(Text, null, "\u2022 \u{1F9D1}\u200D\u{1F4BC} Tech Lead - Makes architecture decisions"), /* @__PURE__ */ React.createElement(Text, null, "\u2022 \u{1F3A8} UX Expert - Improves user experience"))), currentLocation !== "built-in" && builtInAgents.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, UI_ICONS.separator.repeat(40))), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginBottom: 1, paddingLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.secondary }, "Built-in (always available):"), builtInAgents.map((a) => renderAgent(a, true))))), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "Press Enter to create new agent \xB7 Esc to go back" }));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "\u{1F916} Agents", subtitle: "" }, changes.length > 0 && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, changes[changes.length - 1])), /* @__PURE__ */ React.createElement(Box, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 2 }, locationTabs.map((tab, idx) => {
+    const isActive = currentLocation === tab.value;
+    const isSelected = inLocationTabs && idx === selectedLocationTab;
+    return /* @__PURE__ */ React.createElement(Box, { key: tab.value, flexDirection: "row" }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        color: isSelected || isActive ? theme.primary : void 0,
+        bold: isActive,
+        dimColor: !isActive && !isSelected
+      },
+      isSelected ? "\u25B6 " : isActive ? "\u25C9 " : "\u25CB ",
+      tab.label
+    ), idx < locationTabs.length - 1 && /* @__PURE__ */ React.createElement(Text, { dimColor: true }, " | "));
+  })), /* @__PURE__ */ React.createElement(Box, { marginTop: 0 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, currentLocation === "all" ? "Showing all agents" : currentLocation === "user" ? "Personal agents (~/.claude/agents)" : "Project agents (.claude/agents)"))), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, onCreateNew && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, renderCreateOption()), currentLocation === "all" ? /* @__PURE__ */ React.createElement(React.Fragment, null, customAgents.filter((a) => a.location === "user").length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.secondary }, "Personal:"), customAgents.filter((a) => a.location === "user").map((a) => renderAgent(a))), customAgents.filter((a) => a.location === "project").length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      marginTop: customAgents.filter((a) => a.location === "user").length > 0 ? 1 : 0
+    },
+    /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.secondary }, "Project:")
+  ), customAgents.filter((a) => a.location === "project").map((a) => renderAgent(a))), builtInAgents.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { marginTop: customAgents.length > 0 ? 1 : 0 }, /* @__PURE__ */ React.createElement(Text, null, UI_ICONS.separator.repeat(40))), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.secondary }, "Built-in:"), builtInAgents.map((a) => renderAgent(a, true))))) : /* @__PURE__ */ React.createElement(React.Fragment, null, displayAgents.map((a) => renderAgent(a)), currentLocation !== "built-in" && builtInAgents.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, UI_ICONS.separator.repeat(40))), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.secondary }, "Built-in:"), builtInAgents.map((a) => renderAgent(a, true))))))), /* @__PURE__ */ React.createElement(
+    InstructionBar,
+    {
+      instructions: inLocationTabs ? "\u2190\u2192 Switch tabs \u2022 Enter Select \u2022 Tab Exit tabs" : "\u2191\u2193 Navigate \u2022 Tab Location \u2022 Enter Select"
+    }
+  ));
+}
+function GenerateStep({
+  createState,
+  setCreateState,
+  setModeState,
+  existingAgents
+}) {
+  const handleSubmit = async () => {
+    if (createState.generationPrompt.trim()) {
+      setCreateState({ type: "SET_IS_GENERATING", value: true });
+      setCreateState({ type: "SET_ERROR", value: null });
+      try {
+        const generated = await generateAgentWithClaude(
+          createState.generationPrompt
+        );
+        const validation = validateAgentType(
+          generated.identifier,
+          existingAgents
+        );
+        let finalIdentifier = generated.identifier;
+        if (!validation.isValid) {
+          let counter = 1;
+          while (true) {
+            const testId = `${generated.identifier}-${counter}`;
+            const testValidation = validateAgentType(testId, existingAgents);
+            if (testValidation.isValid) {
+              finalIdentifier = testId;
+              break;
+            }
+            counter++;
+            if (counter > 10) {
+              finalIdentifier = `custom-agent-${Date.now()}`;
+              break;
+            }
+          }
+        }
+        setCreateState({ type: "SET_AGENT_TYPE", value: finalIdentifier });
+        setCreateState({ type: "SET_WHEN_TO_USE", value: generated.whenToUse });
+        setCreateState({
+          type: "SET_SYSTEM_PROMPT",
+          value: generated.systemPrompt
+        });
+        setCreateState({ type: "SET_WAS_GENERATED", value: true });
+        setCreateState({ type: "SET_IS_GENERATING", value: false });
+        setModeState({ mode: "create-tools", location: createState.location });
+      } catch (error) {
+        console.error("Generation failed:", error);
+        setCreateState({
+          type: "SET_ERROR",
+          value: "Failed to generate agent. Please try again or use manual configuration."
+        });
+        setCreateState({ type: "SET_IS_GENERATING", value: false });
+      }
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "\u2728 New Agent",
+      subtitle: "What should it do?",
+      step: 2,
+      totalSteps: 8
+    },
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, createState.isGenerating ? /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, createState.generationPrompt), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(LoadingSpinner, { text: "Generating agent configuration..." }))) : /* @__PURE__ */ React.createElement(
+      MultilineTextInput,
+      {
+        value: createState.generationPrompt,
+        onChange: (value) => setCreateState({ type: "SET_GENERATION_PROMPT", value }),
+        placeholder: "An expert that reviews pull requests for best practices, security issues, and suggests improvements...",
+        onSubmit: handleSubmit,
+        error: createState.error,
+        rows: 3
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(InstructionBar, null));
+}
+function TypeStep({
+  createState,
+  setCreateState,
+  setModeState,
+  existingAgents
+}) {
+  const handleSubmit = () => {
+    const validation = validateAgentType(createState.agentType, existingAgents);
+    if (validation.isValid) {
+      setModeState({ mode: "create-prompt", location: createState.location });
+    } else {
+      setCreateState({ type: "SET_ERROR", value: validation.errors[0] });
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Create new agent",
+      subtitle: "Enter agent identifier",
+      step: 3,
+      totalSteps: 8
+    },
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+      InkTextInput,
+      {
+        value: createState.agentType,
+        onChange: (value) => setCreateState({ type: "SET_AGENT_TYPE", value }),
+        placeholder: "e.g. code-reviewer, tech-lead",
+        onSubmit: handleSubmit
+      }
+    ), createState.error && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "red" }, "\u26A0 ", createState.error)))
+  ), /* @__PURE__ */ React.createElement(InstructionBar, null));
+}
+function DescriptionStep({
+  createState,
+  setCreateState,
+  setModeState
+}) {
+  const handleSubmit = () => {
+    if (createState.whenToUse.trim()) {
+      setModeState({ mode: "create-tools", location: createState.location });
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Create new agent",
+      subtitle: "Describe when to use this agent",
+      step: 5,
+      totalSteps: 8
+    },
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+      MultilineTextInput,
+      {
+        value: createState.whenToUse,
+        onChange: (value) => setCreateState({ type: "SET_WHEN_TO_USE", value }),
+        placeholder: "Use this agent when you need to review code for best practices, security issues...",
+        onSubmit: handleSubmit,
+        error: createState.error,
+        rows: 4
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(InstructionBar, null));
+}
+function ToolsStep({
+  createState,
+  setCreateState,
+  setModeState,
+  tools
+}) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const initialSelection = createState.selectedTools.length > 0 ? new Set(createState.selectedTools) : new Set(tools.map((t) => t.name));
+  const [selectedTools, setSelectedTools] = useState(initialSelection);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState("all");
+  const categorizedTools = useMemo(() => {
+    const categories = {
+      read: [],
+      edit: [],
+      execution: [],
+      web: [],
+      mcp: [],
+      other: []
+    };
+    tools.forEach((tool) => {
+      let categorized = false;
+      if (tool.name.startsWith("mcp__")) {
+        categories.mcp.push(tool);
+        categorized = true;
+      } else {
+        for (const [category, toolNames] of Object.entries(TOOL_CATEGORIES)) {
+          if (Array.isArray(toolNames) && toolNames.includes(tool.name)) {
+            categories[category]?.push(tool);
+            categorized = true;
+            break;
+          }
+        }
+      }
+      if (!categorized) {
+        categories.other.push(tool);
+      }
+    });
+    return categories;
+  }, [tools]);
+  const displayTools = useMemo(() => {
+    if (selectedCategory === "all") {
+      return tools;
+    }
+    return categorizedTools[selectedCategory] || [];
+  }, [selectedCategory, tools, categorizedTools]);
+  const allSelected = selectedTools.size === tools.length && tools.length > 0;
+  const categoryOptions = [
+    { id: "all", label: `All (${tools.length})` },
+    { id: "read", label: `Read (${categorizedTools.read.length})` },
+    { id: "edit", label: `Edit (${categorizedTools.edit.length})` },
+    {
+      id: "execution",
+      label: `Execution (${categorizedTools.execution.length})`
+    },
+    { id: "web", label: `Web (${categorizedTools.web.length})` },
+    { id: "mcp", label: `MCP (${categorizedTools.mcp.length})` },
+    { id: "other", label: `Other (${categorizedTools.other.length})` }
+  ].filter((cat) => cat.id === "all" || categorizedTools[cat.id]?.length > 0);
+  const readSelected = categorizedTools.read.every(
+    (tool) => selectedTools.has(tool.name)
+  );
+  const editSelected = categorizedTools.edit.every(
+    (tool) => selectedTools.has(tool.name)
+  );
+  const execSelected = categorizedTools.execution.every(
+    (tool) => selectedTools.has(tool.name)
+  );
+  const webSelected = categorizedTools.web.every(
+    (tool) => selectedTools.has(tool.name)
+  );
+  const options = [
+    { id: "continue", label: "Save", isContinue: true },
+    {
+      id: "separator1",
+      label: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500",
+      isSeparator: true
+    },
+    {
+      id: "all",
+      label: `${allSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} All tools`,
+      isAll: true
+    },
+    {
+      id: "read",
+      label: `${readSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Read-only tools`,
+      isCategory: true
+    },
+    {
+      id: "edit",
+      label: `${editSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Edit tools`,
+      isCategory: true
+    },
+    {
+      id: "execution",
+      label: `${execSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Execution tools`,
+      isCategory: true
+    },
+    {
+      id: "separator2",
+      label: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500",
+      isSeparator: true
+    },
+    {
+      id: "advanced",
+      label: `[ ${showAdvanced ? "Hide" : "Show"} advanced options ]`,
+      isAdvancedToggle: true
+    },
+    ...showAdvanced ? displayTools.map((tool) => ({
+      id: tool.name,
+      label: `${selectedTools.has(tool.name) ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} ${tool.name}`,
+      isTool: true
+    })) : []
+  ];
+  const handleSelect = () => {
+    const option = options[selectedIndex];
+    if (!option) return;
+    if (option.isSeparator) return;
+    if (option.isContinue) {
+      const result = allSelected ? ["*"] : Array.from(selectedTools);
+      setCreateState({ type: "SET_SELECTED_TOOLS", value: result });
+      setModeState({ mode: "create-model", location: createState.location });
+    } else if (option.isAdvancedToggle) {
+      setShowAdvanced(!showAdvanced);
+    } else if (option.isAll) {
+      if (allSelected) {
+        setSelectedTools(/* @__PURE__ */ new Set());
+      } else {
+        setSelectedTools(new Set(tools.map((t) => t.name)));
+      }
+    } else if (option.isCategory) {
+      const categoryName = option.id;
+      const categoryTools = categorizedTools[categoryName] || [];
+      const newSelected = new Set(selectedTools);
+      const categorySelected = categoryTools.every(
+        (tool) => selectedTools.has(tool.name)
+      );
+      if (categorySelected) {
+        categoryTools.forEach((tool) => newSelected.delete(tool.name));
+      } else {
+        categoryTools.forEach((tool) => newSelected.add(tool.name));
+      }
+      setSelectedTools(newSelected);
+    } else if (option.isTool) {
+      const newSelected = new Set(selectedTools);
+      if (newSelected.has(option.id)) {
+        newSelected.delete(option.id);
+      } else {
+        newSelected.add(option.id);
+      }
+      setSelectedTools(newSelected);
+    }
+  };
+  useInput((input, key) => {
+    if (key.return) {
+      handleSelect();
+    } else if (key.upArrow) {
+      setSelectedIndex((prev) => {
+        let newIndex = prev > 0 ? prev - 1 : options.length - 1;
+        while (options[newIndex] && options[newIndex].isSeparator) {
+          newIndex = newIndex > 0 ? newIndex - 1 : options.length - 1;
+        }
+        return newIndex;
+      });
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => {
+        let newIndex = prev < options.length - 1 ? prev + 1 : 0;
+        while (options[newIndex] && options[newIndex].isSeparator) {
+          newIndex = newIndex < options.length - 1 ? newIndex + 1 : 0;
+        }
+        return newIndex;
+      });
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "\u{1F527} Tool Permissions", subtitle: "", step: 3, totalSteps: 5 }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, options.map((option, idx) => {
+    const isSelected = idx === selectedIndex;
+    const isContinue = option.isContinue;
+    const isAdvancedToggle = option.isAdvancedToggle;
+    const isSeparator = option.isSeparator;
+    return /* @__PURE__ */ React.createElement(Box, { key: option.id }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        color: isSelected && !isSeparator ? "cyan" : isSeparator ? "gray" : void 0,
+        bold: isContinue,
+        dimColor: isSeparator
+      },
+      isSeparator ? option.label : `${isSelected ? `${UI_ICONS.pointer} ` : "  "}${isContinue || isAdvancedToggle ? `${option.label}` : option.label}`
+    ), option.isTool && isSelected && tools.find((t) => t.name === option.id)?.description && /* @__PURE__ */ React.createElement(Box, { marginLeft: 4 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, tools.find((t) => t.name === option.id)?.description)));
+  }), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, allSelected ? "All tools selected" : `${selectedTools.size} of ${tools.length} tools selected`), selectedCategory !== "all" && /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Filtering: ", selectedCategory, " tools")))), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "\u2191\u2193 Navigate \u2022 Enter Toggle \u2022 Esc Back" }));
+}
+function ModelStep({ createState, setCreateState, setModeState }) {
+  const theme = getTheme();
+  const manager = getModelManager();
+  const profiles = manager.getActiveModelProfiles();
+  const groupedModels = profiles.reduce((acc, profile) => {
+    const provider = profile.provider || "Default";
+    if (!acc[provider]) acc[provider] = [];
+    acc[provider].push(profile);
+    return acc;
+  }, {});
+  const modelOptions = [
+    {
+      id: null,
+      name: "\u25C8 Inherit from parent",
+      provider: "System",
+      modelName: "default"
+    },
+    ...Object.entries(groupedModels).flatMap(
+      ([provider, models]) => models.map((p) => ({
+        id: p.modelName,
+        name: p.name,
+        provider,
+        modelName: p.modelName
+      }))
+    )
+  ];
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    const idx = modelOptions.findIndex((m) => m.id === createState.selectedModel);
+    return idx >= 0 ? idx : 0;
+  });
+  const handleSelect = (modelId) => {
+    setCreateState({ type: "SET_SELECTED_MODEL", value: modelId });
+    setModeState({ mode: "create-color", location: createState.location });
+  };
+  useInput((input, key) => {
+    if (key.return) {
+      handleSelect(modelOptions[selectedIndex].id);
+    } else if (key.upArrow) {
+      setSelectedIndex((prev) => prev > 0 ? prev - 1 : modelOptions.length - 1);
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => prev < modelOptions.length - 1 ? prev + 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "\u{1F916} Select Model", subtitle: "", step: 4, totalSteps: 5 }, /* @__PURE__ */ React.createElement(Box, { marginTop: 1, flexDirection: "column" }, modelOptions.map((model, index) => {
+    const isSelected = index === selectedIndex;
+    const isInherit = model.id === null;
+    return /* @__PURE__ */ React.createElement(Box, { key: model.id || "inherit", marginBottom: 0 }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { color: isSelected ? theme.primary : void 0 }, isSelected ? UI_ICONS.pointer : " "), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 1 }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        bold: isInherit,
+        color: isSelected ? theme.primary : void 0
+      },
+      model.name
+    ), !isInherit && /* @__PURE__ */ React.createElement(Text, { dimColor: true }, model.provider, " \u2022 ", model.modelName)))));
+  }))), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "\u2191\u2193 Navigate \u2022 Enter Select" }));
+}
+function ColorStep({ createState, setCreateState, setModeState }) {
+  const theme = getTheme();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const colors = [
+    { label: "Default", value: null, displayColor: null },
+    { label: "Yellow", value: "yellow", displayColor: "yellow" },
+    { label: "Blue", value: "blue", displayColor: "blue" },
+    { label: "Magenta", value: "magenta", displayColor: "magenta" },
+    { label: "Cyan", value: "cyan", displayColor: "cyan" },
+    { label: "Gray", value: "gray", displayColor: "gray" },
+    { label: "White", value: "white", displayColor: "white" }
+  ];
+  const handleSelect = (value) => {
+    setCreateState({ type: "SET_SELECTED_COLOR", value });
+    setModeState({ mode: "create-confirm", location: createState.location });
+  };
+  useInput((input, key) => {
+    if (key.return) {
+      handleSelect(colors[selectedIndex].value);
+    } else if (key.upArrow) {
+      setSelectedIndex((prev) => prev > 0 ? prev - 1 : colors.length - 1);
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => prev < colors.length - 1 ? prev + 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "\u{1F3A8} Color Theme", subtitle: "", step: 5, totalSteps: 5 }, /* @__PURE__ */ React.createElement(Box, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Choose how your agent appears in the list:")), colors.map((color, idx) => {
+    const isSelected = idx === selectedIndex;
+    return /* @__PURE__ */ React.createElement(Box, { key: idx, flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: isSelected ? theme.primary : void 0 }, isSelected ? "\u276F " : "  "), /* @__PURE__ */ React.createElement(Box, { minWidth: 12 }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        bold: isSelected,
+        color: color.displayColor || void 0
+      },
+      color.label
+    )));
+  }), /* @__PURE__ */ React.createElement(Box, { marginTop: 1, paddingLeft: 2 }, /* @__PURE__ */ React.createElement(Text, null, "Preview: "), /* @__PURE__ */ React.createElement(Text, { bold: true, color: colors[selectedIndex].displayColor || void 0 }, createState.agentType || "your-agent")))), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "\u2191\u2193 Navigate \u2022 Enter Select" }));
+}
+function PromptStep({ createState, setCreateState, setModeState }) {
+  const handleSubmit = () => {
+    if (createState.systemPrompt.trim()) {
+      setModeState({
+        mode: "create-description",
+        location: createState.location
+      });
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Create new agent",
+      subtitle: "System prompt",
+      step: 4,
+      totalSteps: 8
+    },
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+      MultilineTextInput,
+      {
+        value: createState.systemPrompt,
+        onChange: (value) => setCreateState({ type: "SET_SYSTEM_PROMPT", value }),
+        placeholder: "You are a helpful assistant that specializes in...",
+        onSubmit: handleSubmit,
+        error: createState.error,
+        rows: 5
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(InstructionBar, null));
+}
+function ConfirmStep({
+  createState,
+  setCreateState,
+  setModeState,
+  tools,
+  onAgentCreated
+}) {
+  const [isCreating, setIsCreating] = useState(false);
+  const theme = getTheme();
+  const handleConfirm = async () => {
+    setIsCreating(true);
+    try {
+      await saveAgent(
+        createState.location,
+        createState.agentType,
+        createState.whenToUse,
+        createState.selectedTools,
+        createState.systemPrompt,
+        createState.selectedModel,
+        createState.selectedColor || void 0
+      );
+      onAgentCreated(`Created agent: ${createState.agentType}`);
+    } catch (error) {
+      setCreateState({ type: "SET_ERROR", value: error.message });
+      setIsCreating(false);
+    }
+  };
+  const validation = validateAgentConfig(createState);
+  const toolNames = createState.selectedTools.includes("*") ? "All tools" : createState.selectedTools.length > 0 ? createState.selectedTools.join(", ") : "No tools";
+  const handleEditInEditor = async () => {
+    const filePath = createState.location === "project" ? path.join(
+      process.cwd(),
+      ".claude",
+      "agents",
+      `${createState.agentType}.md`
+    ) : path.join(
+      os.homedir(),
+      ".claude",
+      "agents",
+      `${createState.agentType}.md`
+    );
+    try {
+      await saveAgent(
+        createState.location,
+        createState.agentType,
+        createState.whenToUse,
+        createState.selectedTools,
+        createState.systemPrompt,
+        createState.selectedModel,
+        createState.selectedColor || void 0
+      );
+      const command = process.platform === "win32" ? "start" : process.platform === "darwin" ? "open" : "xdg-open";
+      await execAsync(`${command} "${filePath}"`);
+      onAgentCreated(`Created agent: ${createState.agentType}`);
+    } catch (error) {
+      setCreateState({ type: "SET_ERROR", value: error.message });
+    }
+  };
+  useInput((input, key) => {
+    if (isCreating) return;
+    if ((key.return || input === "s") && !isCreating) {
+      handleConfirm();
+    } else if (input === "e") {
+      handleEditInEditor();
+    } else if (key.escape) {
+      setModeState({ mode: "create-color", location: createState.location });
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "\u2705 Review & Create", subtitle: "" }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.primary }, "\u{1F4CB} Configuration")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 0 }, /* @__PURE__ */ React.createElement(Text, null, "\u2022 ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Agent ID:"), " ", createState.agentType), /* @__PURE__ */ React.createElement(Text, null, "\u2022 ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Location:"), " ", createState.location === "project" ? "Project" : "Personal"), /* @__PURE__ */ React.createElement(Text, null, "\u2022 ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Tools:"), " ", toolNames.length > 50 ? toolNames.slice(0, 50) + "..." : toolNames), /* @__PURE__ */ React.createElement(Text, null, "\u2022 ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Model:"), " ", getDisplayModelName(createState.selectedModel)), createState.selectedColor && /* @__PURE__ */ React.createElement(Text, null, "\u2022 ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Color:"), " ", /* @__PURE__ */ React.createElement(Text, { color: createState.selectedColor }, createState.selectedColor))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.primary }, "\u{1F4DD} Purpose")), /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1 }, /* @__PURE__ */ React.createElement(Text, null, createState.whenToUse)), validation.warnings.length > 0 && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Warnings:")), validation.warnings.map((warning, idx) => /* @__PURE__ */ React.createElement(Fragment, { key: idx }, /* @__PURE__ */ React.createElement(Text, { color: theme.warning }, " \u2022 ", warning)))), createState.error && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.error }, "\u2717 ", createState.error)), /* @__PURE__ */ React.createElement(Box, { marginTop: 2 }, isCreating ? /* @__PURE__ */ React.createElement(LoadingSpinner, { text: "Creating agent..." }) : null))), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "Enter Save \u2022 E Edit \u2022 Esc Back" }));
+}
+function LocationSelect({
+  createState,
+  setCreateState,
+  setModeState
+}) {
+  const theme = getTheme();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const options = [
+    { label: "\u{1F4C1} Project", value: "project", desc: ".claude/agents/" },
+    { label: "\u{1F3E0} Personal", value: "user", desc: "~/.claude/agents/" }
+  ];
+  const handleChange = (value) => {
+    setCreateState({ type: "SET_LOCATION", value });
+    setCreateState({ type: "SET_METHOD", value: "generate" });
+    setModeState({ mode: "create-generate", location: value });
+  };
+  const handleCancel = () => {
+    setModeState({ mode: "list-agents", location: "all" });
+  };
+  useInput((input, key) => {
+    if (key.escape) {
+      handleCancel();
+    } else if (key.return) {
+      handleChange(options[selectedIndex].value);
+    } else if (key.upArrow) {
+      setSelectedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "\u{1F4E6} Save Location", subtitle: "", step: 1, totalSteps: 5 }, /* @__PURE__ */ React.createElement(Box, { marginTop: 1, flexDirection: "column" }, options.map((opt, idx) => /* @__PURE__ */ React.createElement(Box, { key: opt.value, flexDirection: "column", marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { color: idx === selectedIndex ? theme.primary : void 0 }, idx === selectedIndex ? "\u276F " : "  ", opt.label), /* @__PURE__ */ React.createElement(Box, { marginLeft: 3 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, opt.desc)))))), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "\u2191\u2193 Navigate \u2022 Enter Select" }));
+}
+function MethodSelect({
+  createState,
+  setCreateState,
+  setModeState
+}) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const options = [
+    { label: "Generate with Claude (recommended)", value: "generate" },
+    { label: "Manual configuration", value: "manual" }
+  ];
+  const handleChange = (value) => {
+    setCreateState({
+      type: "SET_METHOD",
+      value
+    });
+    if (value === "generate") {
+      setCreateState({ type: "SET_IS_AI_GENERATED", value: true });
+      setModeState({ mode: "create-generate", location: createState.location });
+    } else {
+      setCreateState({ type: "SET_IS_AI_GENERATED", value: false });
+      setModeState({ mode: "create-type", location: createState.location });
+    }
+  };
+  const handleCancel = () => {
+    setModeState({ mode: "create-location" });
+  };
+  useInput((input, key) => {
+    if (key.escape) {
+      handleCancel();
+    } else if (key.return) {
+      handleChange(options[selectedIndex].value);
+    } else if (key.upArrow) {
+      setSelectedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Create new agent",
+      subtitle: "Creation method",
+      step: 2,
+      totalSteps: 9
+    },
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+      SelectList,
+      {
+        options,
+        selectedIndex,
+        onChange: handleChange,
+        onCancel: handleCancel
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(InstructionBar, null));
+}
+function AgentMenu({ agent, setModeState }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const options = [
+    { label: "View details", value: "view" },
+    {
+      label: "Edit agent",
+      value: "edit",
+      disabled: agent.location === "built-in"
+    },
+    {
+      label: "Delete agent",
+      value: "delete",
+      disabled: agent.location === "built-in"
+    }
+  ];
+  const availableOptions = options.filter((opt) => !opt.disabled);
+  const handleSelect = (value) => {
+    switch (value) {
+      case "view":
+        setModeState({ mode: "view-agent", selectedAgent: agent });
+        break;
+      case "edit":
+        setModeState({ mode: "edit-agent", selectedAgent: agent });
+        break;
+      case "delete":
+        setModeState({ mode: "delete-confirm", selectedAgent: agent });
+        break;
+    }
+  };
+  useInput((input, key) => {
+    if (key.return) {
+      handleSelect(availableOptions[selectedIndex].value);
+    } else if (key.upArrow) {
+      setSelectedIndex(
+        (prev) => prev > 0 ? prev - 1 : availableOptions.length - 1
+      );
+    } else if (key.downArrow) {
+      setSelectedIndex(
+        (prev) => prev < availableOptions.length - 1 ? prev + 1 : 0
+      );
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: `Agent: ${agent.agentType}`,
+      subtitle: `${agent.location}`
+    },
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+      SelectList,
+      {
+        options: availableOptions,
+        selectedIndex,
+        onChange: handleSelect,
+        numbered: false
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(InstructionBar, null));
+}
+function EditMenu({ agent, setModeState }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isOpening, setIsOpening] = useState(false);
+  const theme = getTheme();
+  const options = [
+    { label: "Open in editor", value: "open-editor" },
+    { label: "Edit tools", value: "edit-tools" },
+    { label: "Edit model", value: "edit-model" },
+    { label: "Edit color", value: "edit-color" }
+  ];
+  const handleSelect = async (value) => {
+    switch (value) {
+      case "open-editor":
+        setIsOpening(true);
+        try {
+          const filePath = getAgentFilePath(agent);
+          await openInEditor(filePath);
+          setModeState({ mode: "agent-menu", selectedAgent: agent });
+        } catch (error) {
+          console.error("Failed to open editor:", error);
+        } finally {
+          setIsOpening(false);
+        }
+        break;
+      case "edit-tools":
+        setModeState({ mode: "edit-tools", selectedAgent: agent });
+        break;
+      case "edit-model":
+        setModeState({ mode: "edit-model", selectedAgent: agent });
+        break;
+      case "edit-color":
+        setModeState({ mode: "edit-color", selectedAgent: agent });
+        break;
+    }
+  };
+  const handleBack = () => {
+    setModeState({ mode: "agent-menu", selectedAgent: agent });
+  };
+  useInput((input, key) => {
+    if (key.escape) {
+      handleBack();
+    } else if (key.return && !isOpening) {
+      handleSelect(options[selectedIndex].value);
+    } else if (key.upArrow) {
+      setSelectedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
+    }
+  });
+  if (isOpening) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+      Header,
+      {
+        title: `Edit agent: ${agent.agentType}`,
+        subtitle: "Opening in editor..."
+      },
+      /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(LoadingSpinner, { text: "Opening file in editor..." }))
+    ), /* @__PURE__ */ React.createElement(InstructionBar, null));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: `Edit agent: ${agent.agentType}`,
+      subtitle: `Location: ${agent.location}`
+    },
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+      SelectList,
+      {
+        options,
+        selectedIndex,
+        onChange: handleSelect,
+        numbered: false
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back" }));
+}
+function EditToolsStep({
+  agent,
+  tools,
+  setModeState,
+  onAgentUpdated
+}) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const initialTools = Array.isArray(agent.tools) ? agent.tools : agent.tools === "*" ? tools.map((t) => t.name) : [];
+  const [selectedTools, setSelectedTools] = useState(
+    new Set(initialTools)
+  );
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const categorizedTools = useMemo(() => {
+    const categories = {
+      read: [],
+      edit: [],
+      execution: [],
+      web: [],
+      other: []
+    };
+    tools.forEach((tool) => {
+      let categorized = false;
+      for (const [category, toolNames] of Object.entries(TOOL_CATEGORIES)) {
+        if (Array.isArray(toolNames) && toolNames.includes(tool.name)) {
+          categories[category]?.push(tool);
+          categorized = true;
+          break;
+        }
+      }
+      if (!categorized) {
+        categories.other.push(tool);
+      }
+    });
+    return categories;
+  }, [tools]);
+  const allSelected = selectedTools.size === tools.length && tools.length > 0;
+  const readSelected = categorizedTools.read.every((tool) => selectedTools.has(tool.name)) && categorizedTools.read.length > 0;
+  const editSelected = categorizedTools.edit.every((tool) => selectedTools.has(tool.name)) && categorizedTools.edit.length > 0;
+  const execSelected = categorizedTools.execution.every((tool) => selectedTools.has(tool.name)) && categorizedTools.execution.length > 0;
+  const options = [
+    { id: "continue", label: "Save", isContinue: true },
+    {
+      id: "separator1",
+      label: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500",
+      isSeparator: true
+    },
+    {
+      id: "all",
+      label: `${allSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} All tools`,
+      isAll: true
+    },
+    {
+      id: "read",
+      label: `${readSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Read-only tools`,
+      isCategory: true
+    },
+    {
+      id: "edit",
+      label: `${editSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Edit tools`,
+      isCategory: true
+    },
+    {
+      id: "execution",
+      label: `${execSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Execution tools`,
+      isCategory: true
+    },
+    {
+      id: "separator2",
+      label: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500",
+      isSeparator: true
+    },
+    {
+      id: "advanced",
+      label: `[ ${showAdvanced ? "Hide" : "Show"} advanced options ]`,
+      isAdvancedToggle: true
+    },
+    ...showAdvanced ? tools.map((tool) => ({
+      id: tool.name,
+      label: `${selectedTools.has(tool.name) ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} ${tool.name}`,
+      isTool: true
+    })) : []
+  ];
+  const handleSave = async () => {
+    setIsUpdating(true);
+    try {
+      const toolsArray = allSelected ? "*" : Array.from(selectedTools);
+      await updateAgent(
+        agent,
+        agent.whenToUse,
+        toolsArray,
+        agent.systemPrompt,
+        agent.color,
+        agent.model
+      );
+      clearAgentCache();
+      const freshAgents = await getActiveAgents();
+      const updatedAgent = freshAgents.find(
+        (a) => a.agentType === agent.agentType
+      );
+      if (updatedAgent) {
+        onAgentUpdated(
+          `Updated tools for agent: ${agent.agentType}`,
+          updatedAgent
+        );
+        setModeState({ mode: "edit-agent", selectedAgent: updatedAgent });
+      } else {
+        console.error("Failed to find updated agent after save");
+        const fallbackAgent = {
+          ...agent,
+          tools: toolsArray.length === 1 && toolsArray[0] === "*" ? "*" : toolsArray
+        };
+        onAgentUpdated(
+          `Updated tools for agent: ${agent.agentType}`,
+          fallbackAgent
+        );
+        setModeState({ mode: "edit-agent", selectedAgent: fallbackAgent });
+      }
+    } catch (error) {
+      console.error("Failed to update agent tools:", error);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+  const handleSelect = () => {
+    const option = options[selectedIndex];
+    if (!option) return;
+    if (option.isSeparator) return;
+    if (option.isContinue) {
+      handleSave();
+    } else if (option.isAdvancedToggle) {
+      setShowAdvanced(!showAdvanced);
+    } else if (option.isAll) {
+      if (allSelected) {
+        setSelectedTools(/* @__PURE__ */ new Set());
+      } else {
+        setSelectedTools(new Set(tools.map((t) => t.name)));
+      }
+    } else if (option.isCategory) {
+      const categoryName = option.id;
+      const categoryTools = categorizedTools[categoryName] || [];
+      const newSelected = new Set(selectedTools);
+      const categorySelected = categoryTools.every(
+        (tool) => selectedTools.has(tool.name)
+      );
+      if (categorySelected) {
+        categoryTools.forEach((tool) => newSelected.delete(tool.name));
+      } else {
+        categoryTools.forEach((tool) => newSelected.add(tool.name));
+      }
+      setSelectedTools(newSelected);
+    } else if (option.isTool) {
+      const newSelected = new Set(selectedTools);
+      if (newSelected.has(option.id)) {
+        newSelected.delete(option.id);
+      } else {
+        newSelected.add(option.id);
+      }
+      setSelectedTools(newSelected);
+    }
+  };
+  useInput((input, key) => {
+    if (key.escape) {
+      setModeState({ mode: "edit-agent", selectedAgent: agent });
+    } else if (key.return && !isUpdating) {
+      handleSelect();
+    } else if (key.upArrow) {
+      setSelectedIndex((prev) => {
+        let newIndex = prev > 0 ? prev - 1 : options.length - 1;
+        while (options[newIndex] && options[newIndex].isSeparator) {
+          newIndex = newIndex > 0 ? newIndex - 1 : options.length - 1;
+        }
+        return newIndex;
+      });
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => {
+        let newIndex = prev < options.length - 1 ? prev + 1 : 0;
+        while (options[newIndex] && options[newIndex].isSeparator) {
+          newIndex = newIndex < options.length - 1 ? newIndex + 1 : 0;
+        }
+        return newIndex;
+      });
+    }
+  });
+  if (isUpdating) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: `Edit agent: ${agent.agentType}` }, /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(LoadingSpinner, { text: "Updating agent tools..." }))), /* @__PURE__ */ React.createElement(InstructionBar, null));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: `Edit agent: ${agent.agentType}` }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, options.map((option, idx) => {
+    const isSelected = idx === selectedIndex;
+    const isContinue = "isContinue" in option && option.isContinue;
+    const isAdvancedToggle = option.isAdvancedToggle;
+    const isSeparator = option.isSeparator;
+    return /* @__PURE__ */ React.createElement(Box, { key: option.id }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        color: isSelected && !isSeparator ? "cyan" : isSeparator ? "gray" : void 0,
+        bold: isContinue,
+        dimColor: isSeparator
+      },
+      isSeparator ? option.label : `${isSelected ? `${UI_ICONS.pointer} ` : "  "}${isContinue || isAdvancedToggle ? option.label : option.label}`
+    ), option.isTool && isSelected && tools.find((t) => t.name === option.id)?.description && /* @__PURE__ */ React.createElement(Box, { marginLeft: 4 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, tools.find((t) => t.name === option.id)?.description)));
+  }), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, allSelected ? "All tools selected" : `${selectedTools.size} of ${tools.length} tools selected`)))), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "Enter toggle selection \xB7 \u2191\u2193 navigate \xB7 Esc back" }));
+}
+function EditModelStep({
+  agent,
+  setModeState,
+  onAgentUpdated
+}) {
+  const manager = getModelManager();
+  const profiles = manager.getActiveModelProfiles();
+  const currentModel = agent.model || null;
+  const modelOptions = [
+    {
+      id: null,
+      name: "Inherit from parent",
+      description: "Use the model from task configuration"
+    },
+    ...profiles.map((p) => ({
+      id: p.modelName,
+      name: p.name,
+      description: `${p.provider || "provider"} \xB7 ${p.modelName}`
+    }))
+  ];
+  const defaultIndex = modelOptions.findIndex((m) => m.id === currentModel);
+  const [selectedIndex, setSelectedIndex] = useState(
+    defaultIndex >= 0 ? defaultIndex : 0
+  );
+  const [isUpdating, setIsUpdating] = useState(false);
+  const handleSave = async (modelId) => {
+    setIsUpdating(true);
+    try {
+      const modelValue = modelId === null ? void 0 : modelId;
+      await updateAgent(
+        agent,
+        agent.whenToUse,
+        agent.tools,
+        agent.systemPrompt,
+        agent.color,
+        modelValue
+      );
+      clearAgentCache();
+      const freshAgents = await getActiveAgents();
+      const updatedAgent = freshAgents.find(
+        (a) => a.agentType === agent.agentType
+      );
+      if (updatedAgent) {
+        onAgentUpdated(
+          `Updated model for agent: ${agent.agentType}`,
+          updatedAgent
+        );
+        setModeState({ mode: "edit-agent", selectedAgent: updatedAgent });
+      } else {
+        console.error("Failed to find updated agent after save");
+        const fallbackAgent = { ...agent };
+        if (modelValue) {
+          ;
+          fallbackAgent.model = modelValue;
+        } else {
+          delete fallbackAgent.model;
+        }
+        onAgentUpdated(
+          `Updated model for agent: ${agent.agentType}`,
+          fallbackAgent
+        );
+        setModeState({ mode: "edit-agent", selectedAgent: fallbackAgent });
+      }
+    } catch (error) {
+      console.error("Failed to update agent model:", error);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+  useInput((input, key) => {
+    if (key.escape) {
+      setModeState({ mode: "edit-agent", selectedAgent: agent });
+    } else if (key.return && !isUpdating) {
+      handleSave(modelOptions[selectedIndex].id);
+    } else if (key.upArrow) {
+      setSelectedIndex((prev) => prev > 0 ? prev - 1 : modelOptions.length - 1);
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => prev < modelOptions.length - 1 ? prev + 1 : 0);
+    }
+  });
+  if (isUpdating) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: `Edit agent: ${agent.agentType}` }, /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(LoadingSpinner, { text: "Updating agent model..." }))), /* @__PURE__ */ React.createElement(InstructionBar, null));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: `Edit agent: ${agent.agentType}`,
+      subtitle: "Model determines the agent's reasoning capabilities and speed."
+    },
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 2 }, /* @__PURE__ */ React.createElement(
+      SelectList,
+      {
+        options: modelOptions.map((m, i) => ({
+          label: `${i + 1}. ${m.name}${m.description ? `
+${m.description}` : ""}`,
+          value: m.id
+        })),
+        selectedIndex,
+        onChange: (val) => handleSave(val),
+        numbered: false
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back" }));
+}
+function EditColorStep({
+  agent,
+  setModeState,
+  onAgentUpdated
+}) {
+  const currentColor = agent.color || null;
+  const colors = [
+    { label: "Automatic color", value: null },
+    { label: "Yellow", value: "yellow" },
+    { label: "Blue", value: "blue" },
+    { label: "Magenta", value: "magenta" },
+    { label: "Cyan", value: "cyan" },
+    { label: "Gray", value: "gray" },
+    { label: "White", value: "white" }
+  ];
+  const defaultIndex = colors.findIndex((color) => color.value === currentColor);
+  const [selectedIndex, setSelectedIndex] = useState(
+    defaultIndex >= 0 ? defaultIndex : 0
+  );
+  const [isUpdating, setIsUpdating] = useState(false);
+  const handleSave = async (color) => {
+    setIsUpdating(true);
+    try {
+      const colorValue = color === null ? void 0 : color;
+      await updateAgent(
+        agent,
+        agent.whenToUse,
+        agent.tools,
+        agent.systemPrompt,
+        colorValue,
+        agent.model
+      );
+      clearAgentCache();
+      const freshAgents = await getActiveAgents();
+      const updatedAgent = freshAgents.find(
+        (a) => a.agentType === agent.agentType
+      );
+      if (updatedAgent) {
+        onAgentUpdated(
+          `Updated color for agent: ${agent.agentType}`,
+          updatedAgent
+        );
+        setModeState({ mode: "edit-agent", selectedAgent: updatedAgent });
+      } else {
+        console.error("Failed to find updated agent after save");
+        const fallbackAgent = {
+          ...agent,
+          ...colorValue ? { color: colorValue } : { color: void 0 }
+        };
+        onAgentUpdated(
+          `Updated color for agent: ${agent.agentType}`,
+          fallbackAgent
+        );
+        setModeState({ mode: "edit-agent", selectedAgent: fallbackAgent });
+      }
+    } catch (error) {
+      console.error("Failed to update agent color:", error);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+  useInput((input, key) => {
+    if (key.escape) {
+      setModeState({ mode: "edit-agent", selectedAgent: agent });
+    } else if (key.return && !isUpdating) {
+      handleSave(colors[selectedIndex].value);
+    } else if (key.upArrow) {
+      setSelectedIndex((prev) => prev > 0 ? prev - 1 : colors.length - 1);
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => prev < colors.length - 1 ? prev + 1 : 0);
+    }
+  });
+  if (isUpdating) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: `Edit agent: ${agent.agentType}` }, /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(LoadingSpinner, { text: "Updating agent color..." }))), /* @__PURE__ */ React.createElement(InstructionBar, null));
+  }
+  const selectedColor = colors[selectedIndex];
+  const previewColor = selectedColor.value || void 0;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: `Edit agent: ${agent.agentType}`,
+      subtitle: "Choose background color"
+    },
+    /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, colors.map((color, index) => {
+      const isSelected = index === selectedIndex;
+      const isCurrent = color.value === currentColor;
+      return /* @__PURE__ */ React.createElement(Box, { key: color.value || "automatic" }, /* @__PURE__ */ React.createElement(Text, { color: isSelected ? "cyan" : void 0 }, isSelected ? "\u276F " : "  "), /* @__PURE__ */ React.createElement(Text, { color: color.value || void 0 }, "\u25CF"), /* @__PURE__ */ React.createElement(Text, null, " ", color.label, isCurrent && /* @__PURE__ */ React.createElement(Text, { color: "green" }, " \u2714")));
+    }), /* @__PURE__ */ React.createElement(Box, { marginTop: 2 }, /* @__PURE__ */ React.createElement(Text, null, "Preview: "), /* @__PURE__ */ React.createElement(Text, { color: previewColor }, agent.agentType)))
+  ), /* @__PURE__ */ React.createElement(InstructionBar, { instructions: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc back" }));
+}
+function ViewAgent({ agent, tools, setModeState }) {
+  const theme = getTheme();
+  const agentTools = Array.isArray(agent.tools) ? agent.tools : [];
+  const hasAllTools = agent.tools === "*" || agentTools.includes("*");
+  const locationPath = agent.location === "user" ? `~/.claude/agents/${agent.agentType}.md` : agent.location === "project" ? `.claude/agents/${agent.agentType}.md` : "(built-in)";
+  const displayModel = getDisplayModelName(agent.model || null);
+  const allowedTools = useMemo(() => {
+    if (hasAllTools) return tools;
+    return tools.filter(
+      (tool) => agentTools.some((allowedTool) => {
+        if (allowedTool.includes("*")) {
+          const prefix = allowedTool.replace("*", "");
+          return tool.name.startsWith(prefix);
+        }
+        return tool.name === allowedTool;
+      })
+    );
+  }, [tools, agentTools, hasAllTools]);
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: `Agent: ${agent.agentType}`, subtitle: "Details" }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Type:"), " ", agent.agentType), /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Location:"), " ", agent.location, " ", locationPath !== "(built-in)" ? `\xB7 ${locationPath}` : ""), /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Description:"), " ", agent.whenToUse), /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Model:"), " ", displayModel), /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Color:"), " ", agent.color || "auto"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Tools:")), hasAllTools ? /* @__PURE__ */ React.createElement(Text, { color: theme.secondary }, "All tools (", tools.length, " available)") : /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, allowedTools.map((tool) => /* @__PURE__ */ React.createElement(Fragment, { key: tool.name }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondary }, "\u2022 ", tool.name)))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "System Prompt:")), /* @__PURE__ */ React.createElement(Box, { paddingLeft: 2 }, /* @__PURE__ */ React.createElement(Text, null, agent.systemPrompt)))), /* @__PURE__ */ React.createElement(InstructionBar, null));
+}
+function EditAgent({
+  agent,
+  tools,
+  setModeState,
+  onAgentUpdated
+}) {
+  const theme = getTheme();
+  const [currentStep, setCurrentStep] = useState("description");
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [editedDescription, setEditedDescription] = useState(agent.whenToUse);
+  const [editedTools, setEditedTools] = useState(
+    Array.isArray(agent.tools) ? agent.tools : agent.tools === "*" ? ["*"] : []
+  );
+  const [editedPrompt, setEditedPrompt] = useState(agent.systemPrompt);
+  const [error, setError] = useState(null);
+  const handleSave = async () => {
+    setIsUpdating(true);
+    try {
+      await updateAgent(
+        agent,
+        editedDescription,
+        editedTools,
+        editedPrompt,
+        agent.color
+      );
+      clearAgentCache();
+      onAgentUpdated(`Updated agent: ${agent.agentType}`);
+    } catch (error2) {
+      setError(error2.message);
+      setIsUpdating(false);
+    }
+  };
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case "description":
+        return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Edit Description:"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+          MultilineTextInput,
+          {
+            value: editedDescription,
+            onChange: setEditedDescription,
+            placeholder: "Describe when to use this agent...",
+            onSubmit: () => setCurrentStep("tools"),
+            error,
+            rows: 4
+          }
+        )));
+      case "tools":
+        return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Edit Tools:"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+          ToolsStep,
+          {
+            createState: {
+              selectedTools: editedTools
+            },
+            setCreateState: (action) => {
+              if (action.type === "SET_SELECTED_TOOLS") {
+                setEditedTools(action.value);
+                setCurrentStep("prompt");
+              }
+            },
+            setModeState: () => {
+            },
+            tools
+          }
+        )));
+      case "prompt":
+        return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Edit System Prompt:"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+          MultilineTextInput,
+          {
+            value: editedPrompt,
+            onChange: setEditedPrompt,
+            placeholder: "System prompt for the agent...",
+            onSubmit: () => setCurrentStep("confirm"),
+            error,
+            rows: 5
+          }
+        )));
+      case "confirm":
+        const validation = validateAgentConfig({
+          agentType: agent.agentType,
+          whenToUse: editedDescription,
+          systemPrompt: editedPrompt,
+          selectedTools: editedTools
+        });
+        return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Confirm Changes:"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Agent:"), " ", agent.agentType), /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Description:"), " ", editedDescription), /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Tools:"), " ", editedTools.includes("*") ? "All tools" : editedTools.join(", ")), /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "System Prompt:"), " ", editedPrompt.slice(0, 100), editedPrompt.length > 100 ? "..." : ""), validation.warnings.length > 0 && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, validation.warnings.map((warning, idx) => /* @__PURE__ */ React.createElement(Fragment, { key: idx }, /* @__PURE__ */ React.createElement(Text, { color: theme.warning }, "\u26A0 ", warning)))), error && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.error }, "\u2717 ", error)), /* @__PURE__ */ React.createElement(Box, { marginTop: 2 }, isUpdating ? /* @__PURE__ */ React.createElement(LoadingSpinner, { text: "Updating agent..." }) : /* @__PURE__ */ React.createElement(Text, null, "Press Enter to save changes"))));
+    }
+  };
+  useInput((input, key) => {
+    if (key.escape) {
+      if (currentStep === "description") {
+        setModeState({ mode: "agent-menu", selectedAgent: agent });
+      } else {
+        const steps = [
+          "description",
+          "tools",
+          "prompt",
+          "confirm"
+        ];
+        const currentIndex = steps.indexOf(currentStep);
+        if (currentIndex > 0) {
+          setCurrentStep(steps[currentIndex - 1]);
+        }
+      }
+      return;
+    }
+    if (key.return && currentStep === "confirm" && !isUpdating) {
+      handleSave();
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: `Edit Agent: ${agent.agentType}`,
+      subtitle: `Step ${["description", "tools", "prompt", "confirm"].indexOf(currentStep) + 1}/4`
+    },
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, renderStepContent())
+  ), /* @__PURE__ */ React.createElement(
+    InstructionBar,
+    {
+      instructions: currentStep === "confirm" ? "Press Enter to save \xB7 Esc to go back" : "Enter to continue \xB7 Esc to go back"
+    }
+  ));
+}
+function DeleteConfirm({
+  agent,
+  setModeState,
+  onAgentDeleted
+}) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [selected, setSelected] = useState(false);
+  const handleConfirm = async () => {
+    if (selected) {
+      setIsDeleting(true);
+      try {
+        await deleteAgent(agent);
+        clearAgentCache();
+        onAgentDeleted(`Deleted agent: ${agent.agentType}`);
+      } catch (error) {
+        console.error("Failed to delete agent:", error);
+        setIsDeleting(false);
+      }
+    } else {
+      setModeState({ mode: "agent-menu", selectedAgent: agent });
+    }
+  };
+  useInput((input, key) => {
+    if (key.return) {
+      handleConfirm();
+    } else if (key.leftArrow || key.rightArrow || key.tab) {
+      setSelected(!selected);
+    }
+  });
+  if (isDeleting) {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "Delete agent", subtitle: "Deleting..." }, /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(LoadingSpinner, { text: "Deleting agent..." }))), /* @__PURE__ */ React.createElement(InstructionBar, null));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Header, { title: "Delete agent", subtitle: `Delete "${agent.agentType}"?` }, /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, "This action cannot be undone. The agent file will be permanently deleted."), /* @__PURE__ */ React.createElement(Box, { marginTop: 2, gap: 3 }, /* @__PURE__ */ React.createElement(Text, { color: !selected ? "cyan" : void 0 }, !selected ? `${UI_ICONS.pointer} ` : "  ", "No"), /* @__PURE__ */ React.createElement(Text, { color: selected ? "red" : void 0 }, selected ? `${UI_ICONS.pointer} ` : "  ", "Yes, delete")))), /* @__PURE__ */ React.createElement(InstructionBar, null));
+}
+var AgentsCommand_default = {
+  name: "agents",
+  description: "Manage agent configurations",
+  type: "local-jsx",
+  isEnabled: true,
+  isHidden: false,
+  async call(onExit) {
+    return /* @__PURE__ */ React.createElement(AgentsUI, { onExit });
+  },
+  userFacingName() {
+    return "agents";
+  }
+};
+export {
+  AgentsCommand_default as default
+};
+//# sourceMappingURL=AgentsCommand.js.map