@within-7/minto 0.3.9 → 0.3.10

package/dist/commands/agents/AgentsCommand.js

@@ -17,11 +17,13 @@ import * as os from "os";
 import { exec } from "child_process";
 import { promisify } from "util";
 import { getTheme } from "../../utils/theme.js";
+import { clearScreen } from "../../utils/terminal.js";
 import { SEMANTIC_COLORS } from "../../constants/colors.js";
 const execAsync = promisify(exec);
 import { getMCPTools } from "../../services/mcpClient.js";
 import { getModelManager } from "../../utils/model.js";
 import { randomUUID } from "crypto";
+import { TabbedListView } from "../../components/TabbedListView/TabbedListView.js";
 import {
   UI_ICONS,
   TOOL_CATEGORIES
@@ -31,6 +33,7 @@ import {
   saveAgent,
   deleteAgent,
   openInEditor,
+  viewInPager,
   updateAgent
 } from "./utils/index.js";
 function getDisplayModelName(modelId) {
@@ -327,7 +330,10 @@ function LoadingSpinner({ text }) {
   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 [phase, setPhase] = useState({ type: "main" });
+  const [activeTab, setActiveTab] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [statusOverlay, setStatusOverlay] = useState(null);
   const [modeState, setModeState] = useState({
     mode: "list-agents",
     location: "all"
@@ -420,21 +426,12 @@ function AgentsUI({ onExit }) {
     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" },
@@ -488,526 +485,492 @@ function AgentsUI({ onExit }) {
       }
     };
   }, [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;
+  useEffect(() => {
+    if (phase.type === "main") {
+      setSearchQuery("");
     }
-    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
+  }, [phase]);
+  const activeMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    agents.forEach((a) => map.set(a.agentType, a));
+    return map;
+  }, [agents]);
+  const checkOverride = useCallback(
+    (agent) => {
+      const active = activeMap.get(agent.agentType);
+      const isOverridden = !!(active && active.location !== agent.location);
+      return {
+        isOverridden,
+        overriddenBy: isOverridden ? active.location : null
+      };
+    },
+    [activeMap]
+  );
+  const { tabs, items, title, footerHint, searchEnabled } = useMemo(() => {
+    switch (phase.type) {
+      case "main": {
+        const allAgents = agents;
+        const customAgents = allAgents.filter((a) => a.location !== "built-in");
+        const mainTabs = [
+          { id: "all", label: "All", badge: customAgents.length },
+          {
+            id: "plugin",
+            label: "Plugin",
+            badge: customAgents.filter((a) => a.location === "plugin").length
+          },
+          {
+            id: "user",
+            label: "Personal",
+            badge: customAgents.filter((a) => a.location === "user").length
+          },
+          {
+            id: "project",
+            label: "Project",
+            badge: customAgents.filter((a) => a.location === "project").length
+          }
+        ];
+        let mainItems = [];
+        mainItems.push({
+          id: "create-new",
+          label: "+ Create new agent",
+          description: "Create a new specialized agent"
         });
-        break;
-      case "edit-agent":
-        setModeState({
-          mode: "agent-menu",
-          selectedAgent: modeState.selectedAgent
+        const displayAgents = activeTab === "all" ? customAgents : customAgents.filter((a) => a.location === activeTab);
+        for (const agent of displayAgents) {
+          const { isOverridden, overriddenBy } = checkOverride(agent);
+          const agentModel = agent.model || null;
+          const modelDisplay = getDisplayModelName(agentModel);
+          const locationLabel = agent.location === "plugin" ? "Plugin" : agent.location === "user" ? "Personal" : agent.location === "project" ? "Project" : agent.location;
+          mainItems.push({
+            id: `${agent.agentType}-${agent.location}`,
+            label: agent.agentType,
+            description: agent.whenToUse || agent.description || "",
+            category: locationLabel,
+            metadata: modelDisplay,
+            status: isOverridden ? "disabled" : "enabled",
+            data: agent
+          });
+        }
+        return {
+          tabs: mainTabs,
+          items: mainItems,
+          title: "Agents",
+          footerHint: "\u2191\u2193 Navigate \xB7 Enter Select \xB7 Tab/\u2190\u2192 Switch \xB7 / Search \xB7 Esc Close",
+          searchEnabled: true
+        };
+      }
+      case "agent-actions": {
+        const agent = phase.agent;
+        const isBuiltIn = agent.location === "built-in";
+        const actionItems = [
+          {
+            id: "view",
+            label: "View details",
+            description: "Show agent configuration"
+          }
+        ];
+        if (!isBuiltIn) {
+          actionItems.push({
+            id: "edit",
+            label: "Edit agent",
+            description: "Modify agent settings"
+          });
+          actionItems.push({
+            id: "delete",
+            label: "Delete agent",
+            description: "Remove this agent"
+          });
+        }
+        actionItems.push({
+          id: "back",
+          label: "Back",
+          description: "Return to agent list"
         });
+        return {
+          tabs: [{ id: "actions", label: "Actions" }],
+          items: actionItems,
+          title: agent.agentType,
+          footerHint: "\u2191\u2193 Navigate \xB7 Enter Select \xB7 Esc Back",
+          searchEnabled: false
+        };
+      }
+      case "edit-actions": {
+        const agent = phase.agent;
+        const editItems = [
+          {
+            id: "open-editor",
+            label: "Open in editor",
+            description: "Edit the agent file directly"
+          },
+          {
+            id: "edit-tools",
+            label: "Edit tools",
+            description: "Change available tools"
+          },
+          {
+            id: "edit-model",
+            label: "Edit model",
+            description: "Change the model"
+          },
+          {
+            id: "edit-color",
+            label: "Edit color",
+            description: "Change the color tag"
+          },
+          {
+            id: "back",
+            label: "Back",
+            description: "Return to agent actions"
+          }
+        ];
+        return {
+          tabs: [{ id: "edit", label: "Edit" }],
+          items: editItems,
+          title: `Edit: ${agent.agentType}`,
+          footerHint: "\u2191\u2193 Navigate \xB7 Enter Select \xB7 Esc Back",
+          searchEnabled: false
+        };
+      }
+      default:
+        return {
+          tabs: [{ id: "all", label: "All" }],
+          items: [],
+          title: "Agents",
+          footerHint: "",
+          searchEnabled: false
+        };
+    }
+  }, [phase, activeTab, agents, checkOverride]);
+  const handleTabChange = useCallback((tabId) => {
+    setActiveTab(tabId);
+    setSearchQuery("");
+  }, []);
+  const handleStatusDismiss = useCallback(() => {
+    setStatusOverlay(null);
+    setPhase({ type: "main" });
+  }, []);
+  const handleBack = useCallback(() => {
+    if (statusOverlay && statusOverlay.type !== "loading") {
+      handleStatusDismiss();
+      return;
+    }
+    switch (phase.type) {
+      case "main": {
+        const changesSummary = changes.length > 0 ? `Agent changes:
+${changes.join("\n")}` : void 0;
+        onExit(changesSummary);
         break;
-      case "edit-tools":
-      case "edit-model":
-      case "edit-color":
-        setModeState({
-          mode: "edit-agent",
-          selectedAgent: modeState.selectedAgent
-        });
+      }
+      case "agent-actions":
+        setPhase({ type: "main" });
         break;
-      case "delete-confirm":
-        setModeState({
-          mode: "agent-menu",
-          selectedAgent: modeState.selectedAgent
-        });
+      case "edit-actions":
+        setPhase({ type: "agent-actions", agent: phase.agent });
         break;
       default:
-        setModeState({ mode: "list-agents", location: "all" });
+        setPhase({ type: "main" });
         break;
     }
-  });
-  const handleAgentSelect = useCallback(
-    (agent) => {
-      setModeState({
-        mode: "agent-menu",
-        location: modeState.location,
-        selectedAgent: agent
-      });
+  }, [phase, statusOverlay, changes, onExit, handleStatusDismiss]);
+  const handleClose = useCallback(() => {
+    if (statusOverlay && statusOverlay.type !== "loading") {
+      handleStatusDismiss();
+      return;
+    }
+    if (phase.type === "main") {
+      const changesSummary = changes.length > 0 ? `Agent changes:
+${changes.join("\n")}` : void 0;
+      onExit(changesSummary);
+    } else {
+      setPhase({ type: "main" });
+      setSearchQuery("");
+    }
+  }, [phase, statusOverlay, changes, onExit, handleStatusDismiss]);
+  const handleSelect = useCallback(
+    async (item) => {
+      switch (phase.type) {
+        case "main": {
+          if (item.id === "create-new") {
+            setCreateState({ type: "RESET" });
+            setModeState({ mode: "create-location" });
+            setPhase({ type: "create", step: { mode: "create-location" } });
+            return;
+          }
+          const agent = item.data;
+          if (agent) {
+            setPhase({ type: "agent-actions", agent });
+          }
+          break;
+        }
+        case "agent-actions": {
+          const agent = phase.agent;
+          if (item.id === "back") {
+            setPhase({ type: "main" });
+            return;
+          }
+          if (item.id === "view") {
+            try {
+              viewInPager(agent);
+              setRefreshKey((prev) => prev + 1);
+            } catch (err) {
+              setStatusOverlay({
+                type: "error",
+                message: `Failed to open pager: ${err instanceof Error ? err.message : String(err)}`
+              });
+            }
+          } else if (item.id === "edit") {
+            setPhase({ type: "edit-actions", agent });
+          } else if (item.id === "delete") {
+            setPhase({ type: "delete-confirm", agent });
+          }
+          break;
+        }
+        case "edit-actions": {
+          const agent = phase.agent;
+          if (item.id === "back") {
+            setPhase({ type: "agent-actions", agent });
+            return;
+          }
+          if (item.id === "open-editor") {
+            try {
+              const filePath = getAgentFilePath(agent);
+              openInEditor(filePath);
+              clearAgentCache();
+              const reloaded = await getActiveAgents();
+              setAgents(reloaded);
+              const updated = reloaded.find(
+                (a) => a.agentType === agent.agentType
+              );
+              if (updated) {
+                setPhase({ type: "edit-actions", agent: updated });
+              }
+              setStatusOverlay({
+                type: "success",
+                message: "Editor closed"
+              });
+            } catch (err) {
+              setStatusOverlay({
+                type: "error",
+                message: `Failed to open editor: ${err instanceof Error ? err.message : String(err)}`
+              });
+            }
+          } else if (item.id === "edit-tools") {
+            setPhase({ type: "edit-tools", agent });
+          } else if (item.id === "edit-model") {
+            setPhase({ type: "edit-model", agent });
+          } else if (item.id === "edit-color") {
+            setPhase({ type: "edit-color", agent });
+          }
+          break;
+        }
+      }
     },
-    [modeState]
+    [phase]
   );
-  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" });
+    setPhase({ type: "main" });
   }, []);
   const handleAgentDeleted = useCallback((message) => {
     setChanges((prev) => [...prev, message]);
     setRefreshKey((prev) => prev + 1);
-    setModeState({ mode: "list-agents", location: "all" });
+    setPhase({ type: "main" });
   }, []);
-  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 });
+  const handleAgentUpdated = useCallback(
+    (message, updated) => {
+      setChanges((prev) => [...prev, message]);
+      setRefreshKey((prev) => prev + 1);
+      setPhase({ type: "agent-actions", agent: updated });
+    },
+    []
+  );
+  const wizardSetModeState = useCallback((state) => {
+    if (state.mode === "list-agents") {
+      setPhase({ type: "main" });
+      return;
+    }
+    setModeState(state);
+  }, []);
+  if (phase.type === "create") {
+    switch (modeState.mode) {
+      case "create-location":
+        return /* @__PURE__ */ React.createElement(
+          LocationSelect,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState
           }
-        }
-      );
-    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 "create-method":
+        return /* @__PURE__ */ React.createElement(
+          MethodSelect,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState
           }
-        }
-      );
-    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 "create-generate":
+        return /* @__PURE__ */ React.createElement(
+          GenerateStep,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState,
+            existingAgents: agents
           }
-        }
-      );
-    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, { color: dimmed && !isSelected ? SEMANTIC_COLORS.dim : color }, isBuiltIn ? "" : isSelected ? `${UI_ICONS.pointer} ` : "  ")),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", alignItems: "center", flexGrow: 1 }, /* @__PURE__ */ React.createElement(Text, { color: dimmed && !isSelected ? SEMANTIC_COLORS.dim : color }, agent.agentType), /* @__PURE__ */ React.createElement(Text, { color: dimmed ? SEMANTIC_COLORS.dim : "gray" }, " \xB7 ", modelDisplay)),
-      overriddenBy && /* @__PURE__ */ React.createElement(Box, { marginLeft: 1 }, /* @__PURE__ */ React.createElement(Text, { color: isSelected ? "yellow" : SEMANTIC_COLORS.dim }, 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
+      case "create-type":
+        return /* @__PURE__ */ React.createElement(
+          TypeStep,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState,
+            existingAgents: agents
+          }
         );
-      }
-      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);
+      case "create-description":
+        return /* @__PURE__ */ React.createElement(
+          DescriptionStep,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState
           }
-        } 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);
-            }
+        );
+      case "create-tools":
+        return /* @__PURE__ */ React.createElement(
+          ToolsStep,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState,
+            tools
           }
-        }
-      } else if (key.downArrow) {
-        if (onCreateOption) {
-          const firstAgent = allNavigableItems.find(
-            (item) => item.type === "agent"
-          );
-          if (firstAgent) {
-            setSelectedAgent(firstAgent.agent);
-            setOnCreateOption(false);
+        );
+      case "create-model":
+        return /* @__PURE__ */ React.createElement(
+          ModelStep,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState
           }
-        } 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);
-            }
+        );
+      case "create-color":
+        return /* @__PURE__ */ React.createElement(
+          ColorStep,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState
           }
-        }
-      }
+        );
+      case "create-prompt":
+        return /* @__PURE__ */ React.createElement(
+          PromptStep,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState
+          }
+        );
+      case "create-confirm":
+        return /* @__PURE__ */ React.createElement(
+          ConfirmStep,
+          {
+            createState,
+            setCreateState,
+            setModeState: wizardSetModeState,
+            tools,
+            onAgentCreated: handleAgentCreated
+          }
+        );
+      default:
+        setPhase({ type: "main" });
+        return null;
     }
-  });
-  const EmptyStateInput = () => {
-    useInput((input, key) => {
-      if (key.escape) {
-        onBack();
-        return;
+  }
+  if (phase.type === "edit-tools") {
+    return /* @__PURE__ */ React.createElement(
+      EditToolsStep,
+      {
+        agent: phase.agent,
+        tools,
+        setModeState: (state) => {
+          clearScreen();
+          setPhase({ type: "edit-actions", agent: phase.agent });
+        },
+        onAgentUpdated: handleAgentUpdated
       }
-      if (key.return && onCreateNew) {
-        onCreateNew();
-        return;
+    );
+  }
+  if (phase.type === "edit-model") {
+    return /* @__PURE__ */ React.createElement(
+      EditModelStep,
+      {
+        agent: phase.agent,
+        setModeState: (state) => {
+          clearScreen();
+          setPhase({ type: "edit-actions", agent: phase.agent });
+        },
+        onAgentUpdated: handleAgentUpdated
       }
-    });
-    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."), /* @__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, { color: SEMANTIC_COLORS.dim }, 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,
+  if (phase.type === "edit-color") {
+    return /* @__PURE__ */ React.createElement(
+      EditColorStep,
       {
-        color: isSelected || isActive ? theme.primary : !isActive && !isSelected ? SEMANTIC_COLORS.dim : void 0,
-        bold: isActive
-      },
-      isSelected ? "\u25B6 " : isActive ? "\u25C9 " : "\u25CB ",
-      tab.label
-    ), idx < locationTabs.length - 1 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " | "));
-  })), /* @__PURE__ */ React.createElement(Box, { marginTop: 0 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, currentLocation === "all" ? "Showing all agents" : currentLocation === "user" ? "Personal agents (~/.minto/agents)" : "Project agents (.minto/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,
+        agent: phase.agent,
+        setModeState: (state) => {
+          clearScreen();
+          setPhase({ type: "edit-actions", agent: phase.agent });
+        },
+        onAgentUpdated: handleAgentUpdated
+      }
+    );
+  }
+  if (phase.type === "delete-confirm") {
+    return /* @__PURE__ */ React.createElement(
+      DeleteConfirm,
+      {
+        agent: phase.agent,
+        setModeState: (state) => {
+          clearScreen();
+          setPhase({ type: "agent-actions", agent: phase.agent });
+        },
+        onAgentDeleted: handleAgentDeleted
+      }
+    );
+  }
+  const currentTab = phase.type === "main" ? activeTab : phase.type === "agent-actions" ? "actions" : "edit";
+  return /* @__PURE__ */ React.createElement(
+    TabbedListView,
     {
-      instructions: inLocationTabs ? "\u2190\u2192 Switch tabs \u2022 Enter Select \u2022 Tab Exit tabs" : "\u2191\u2193 Navigate \u2022 Tab Location \u2022 Enter Select"
+      title,
+      tabs,
+      activeTab: currentTab,
+      onTabChange: handleTabChange,
+      items,
+      searchEnabled,
+      searchQuery,
+      onSearchChange: setSearchQuery,
+      onSelect: handleSelect,
+      onClose: handleClose,
+      onBack: handleBack,
+      statusOverlay,
+      footerHint,
+      groupByCategory: phase.type === "main" && activeTab === "all",
+      isLoading: loading,
+      loadingText: "Loading agents...",
+      emptyText: phase.type === "main" ? 'No agents found. Select "+ Create new agent" to get started.' : "No items",
+      statusDismissHint: "Enter Continue \xB7 Esc Back"
     }
-  ));
+  );
 }
 function GenerateStep({
   createState,
@@ -1618,146 +1581,6 @@ function MethodSelect({
     ))
   ), /* @__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 [error, setError] = useState(null);
-  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 (err) {
-          console.error("Failed to open editor:", err);
-          setError(
-            `Failed to open editor: ${err instanceof Error ? err.message : String(err)}`
-          );
-        } 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}`
-    },
-    error && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "red" }, "\u2717 ", error)),
-    /* @__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,
@@ -2166,26 +1989,6 @@ function EditColorStep({
     }), /* @__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" ? `~/.minto/agents/${agent.agentType}.md` : agent.location === "project" ? `.minto/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,
@@ -2353,6 +2156,7 @@ var AgentsCommand_default = {
   type: "local-jsx",
   isEnabled: true,
   isHidden: false,
+  hidePromptInput: true,
   async call(onExit) {
     return /* @__PURE__ */ React.createElement(AgentsUI, { onExit });
   },