feat: improve --resume and --continue CLI flags (#555)

Co-authored-by: Letta <noreply@letta.com>

src/cli/components/AgentSelector.tsx

@@ -16,6 +16,8 @@ interface AgentSelectorProps {
   currentAgentId: string;
   onSelect: (agentId: string) => void;
   onCancel: () => void;
+  /** Called when user presses N to create a new agent */
+  onCreateNewAgent?: () => void;
   /** The command that triggered this selector (e.g., "/agents" or "/resume") */
   command?: string;
 }
@@ -111,6 +113,7 @@ export function AgentSelector({
   currentAgentId,
   onSelect,
   onCancel,
+  onCreateNewAgent,
   command = "/agents",
 }: AgentSelectorProps) {
   const terminalWidth = useTerminalWidth();
@@ -557,6 +560,9 @@ export function AgentSelector({
         }
         loadPinnedAgents();
       }
+    } else if (input === "n" || input === "N") {
+      // Create new agent
+      onCreateNewAgent?.();
     } else if (activeTab !== "pinned" && input && !key.ctrl && !key.meta) {
       // Type to search (list tabs only)
       setSearchInput((prev) => prev + input);
@@ -794,7 +800,7 @@ export function AgentSelector({
               : activeTab === "letta-code"
                 ? `Page ${lettaCodePage + 1}${lettaCodeHasMore ? "+" : `/${lettaCodeTotalPages || 1}`}${lettaCodeLoadingMore ? " (loading...)" : ""}`
                 : `Page ${allPage + 1}${allHasMore ? "+" : `/${allTotalPages || 1}`}${allLoadingMore ? " (loading...)" : ""}`;
-          const hintsText = `Enter select · ↑↓ navigate · ←→ page · Tab switch${activeTab === "pinned" ? " · P unpin" : " · Type to search"} · Esc cancel`;
+          const hintsText = `Enter select · ↑↓ navigate · ←→ page · Tab switch${activeTab === "pinned" ? " · P unpin" : " · Type to search"}${onCreateNewAgent ? " · N new" : ""} · Esc cancel`;
 
           return (
             <Box flexDirection="column">

src/cli/components/NewAgentDialog.tsx

@@ -1,16 +1,22 @@
 import { Box, Text, useInput } from "ink";
 import { useState } from "react";
 import { DEFAULT_AGENT_NAME } from "../../constants";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { colors } from "./colors";
 import { PasteAwareTextInput } from "./PasteAwareTextInput";
 import { validateAgentName } from "./PinDialog";
 
+// Horizontal line character (matches other selectors)
+const SOLID_LINE = "─";
+
 interface NewAgentDialogProps {
   onSubmit: (name: string) => void;
   onCancel: () => void;
 }
 
 export function NewAgentDialog({ onSubmit, onCancel }: NewAgentDialogProps) {
+  const terminalWidth = useTerminalWidth();
+  const solidLine = SOLID_LINE.repeat(Math.max(terminalWidth, 10));
   const [nameInput, setNameInput] = useState("");
   const [error, setError] = useState("");
 
@@ -45,25 +51,37 @@ export function NewAgentDialog({ onSubmit, onCancel }: NewAgentDialogProps) {
   };
 
   return (
-    <Box flexDirection="column" paddingY={1}>
-      <Box marginBottom={1}>
-        <Text color={colors.approval.header} bold>
-          Create new agent
-        </Text>
-      </Box>
+    <Box flexDirection="column">
+      {/* Command header */}
+      <Text dimColor>{"> /agents"}</Text>
+      <Text dimColor>{solidLine}</Text>
 
-      <Box marginBottom={1}>
-        <Text dimColor>
+      <Box height={1} />
+
+      {/* Title */}
+      <Text bold color={colors.selector.title}>
+        Create new agent
+      </Text>
+
+      <Box height={1} />
+
+      {/* Description */}
+      <Box paddingLeft={2}>
+        <Text>
           Enter a name for your new agent, or press Enter for default.
         </Text>
       </Box>
 
-      <Box flexDirection="column" marginBottom={1}>
-        <Box marginBottom={1}>
+      <Box height={1} />
+
+      {/* Input field */}
+      <Box flexDirection="column">
+        <Box paddingLeft={2}>
           <Text>Agent name:</Text>
         </Box>
         <Box>
-          <Text color={colors.approval.header}>&gt; </Text>
+          <Text color={colors.selector.itemHighlighted}>{">"}</Text>
+          <Text> </Text>
           <PasteAwareTextInput
             value={nameInput}
             onChange={(val) => {
@@ -77,13 +95,16 @@ export function NewAgentDialog({ onSubmit, onCancel }: NewAgentDialogProps) {
       </Box>
 
       {error && (
-        <Box marginBottom={1}>
+        <Box paddingLeft={2} marginTop={1}>
           <Text color="red">{error}</Text>
         </Box>
       )}
 
-      <Box>
-        <Text dimColor>Press Enter to create • Esc to cancel</Text>
+      <Box height={1} />
+
+      {/* Footer hints */}
+      <Box paddingLeft={2}>
+        <Text dimColor>Enter create · Esc cancel</Text>
       </Box>
     </Box>
   );