diff --git a/bun.lock b/bun.lock
index 0c01747..1e0e21c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -12,6 +12,10 @@
         "@ai-sdk/openai": "^3.0.52",
         "@ai-sdk/xai": "^3.0.82",
         "@base-ui/react": "^1.3.0",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@modelcontextprotocol/sdk": "^1.29.0",
         "@radix-ui/react-hover-card": "^1.1.15",
         "@radix-ui/react-label": "^2.1.8",
@@ -206,6 +210,16 @@
 
     "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="],
 
+    "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
+
+    "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
+
+    "@dnd-kit/modifiers": ["@dnd-kit/modifiers@9.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw=="],
+
+    "@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
+
+    "@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
+
     "@dotenvx/dotenvx": ["@dotenvx/dotenvx@1.61.0", "", { "dependencies": { "commander": "^11.1.0", "dotenv": "^17.2.1", "eciesjs": "^0.4.10", "execa": "^5.1.1", "fdir": "^6.2.0", "ignore": "^5.3.0", "object-treeify": "1.1.33", "picomatch": "^4.0.2", "which": "^4.0.0", "yocto-spinner": "^1.1.0" }, "bin": { "dotenvx": "src/cli/dotenvx.js" } }, "sha512-utL3cpZoFzflyqUkjYbxYujI6STBTmO5LFn4bbin/NZnRWN6wQ7eErhr3/Vpa5h/jicPFC6kTa42r940mQftJQ=="],
 
     "@ecies/ciphers": ["@ecies/ciphers@0.2.6", "", { "peerDependencies": { "@noble/ciphers": "^1.0.0" } }, "sha512-patgsRPKGkhhoBjETV4XxD0En4ui5fbX0hzayqI3M8tvNMGUoUvmyYAIWwlxBc1KX5cturfqByYdj5bYGRpN9g=="],
diff --git a/components.json b/components.json
index c27d912..4c284e8 100644
--- a/components.json
+++ b/components.json
@@ -12,6 +12,8 @@
   },
   "iconLibrary": "lucide",
   "rtl": false,
+  "menuColor": "default",
+  "menuAccent": "subtle",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -19,9 +21,8 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "menuColor": "default",
-  "menuAccent": "subtle",
   "registries": {
-    "@ai-elements": "https://ai-sdk.dev/elements/api/registry/{name}.json"
+    "@ai-elements": "https://ai-sdk.dev/elements/api/registry/{name}.json",
+    "@diceui": "https://diceui.com/r/{name}.json"
   }
 }
diff --git a/package.json b/package.json
index 91c5271..a897852 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,10 @@
     "@ai-sdk/openai": "^3.0.52",
     "@ai-sdk/xai": "^3.0.82",
     "@base-ui/react": "^1.3.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
diff --git a/src/components/tool-editor/command-tree.tsx b/src/components/tool-editor/command-tree.tsx
index c902046..c22a4f9 100644
--- a/src/components/tool-editor/command-tree.tsx
+++ b/src/components/tool-editor/command-tree.tsx
@@ -5,7 +5,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { ChevronDownIcon, ChevronRightIcon, Edit2Icon, PlusIcon, Trash2Icon } from "lucide-react";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 interface CommandNodeProps {
   command: Command;
@@ -141,24 +141,15 @@ function CommandNode({
 }
 
 export function CommandTree() {
-  const {
-    tool,
-    selectedCommand,
-    editingCommand,
-    addSubcommand,
-    setSelectedCommand,
-    setEditingCommand,
-    deleteCommand,
-  } = useToolBuilder();
+  const { tool, selectedCommand, addCommand, setSelectedCommand, updateCommand, deleteCommand } =
+    useToolBuilder();
 
   const [expandedCommands, setExpandedCommands] = useState<Set<string>>(
     new Set([tool.commands[0]?.key]),
   );
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [lastAddedCommand, setLastAddedCommand] = useState<{
-    key: string;
-    parentKey?: string;
-  } | null>(null);
+  const [dialogCommand, setDialogCommand] = useState<Command | undefined>(undefined);
+  const [pendingParentKey, setPendingParentKey] = useState<string | undefined>(undefined);
 
   const toggleExpanded = (commandKey: string) => {
     setExpandedCommands((prev) => {
@@ -173,30 +164,31 @@ export function CommandTree() {
   };
 
   const handleAddSubcommand = (parentKey?: string) => {
-    const newKey = addSubcommand(parentKey);
-    setLastAddedCommand({ key: newKey, parentKey });
+    setDialogCommand(undefined);
+    setPendingParentKey(parentKey);
+    setIsDialogOpen(true);
+  };
+
+  const handleEdit = (command: Command) => {
+    setDialogCommand(command);
+    setPendingParentKey(undefined);
+    setIsDialogOpen(true);
   };
 
-  useEffect(() => {
-    if (!lastAddedCommand) return;
-    const { key, parentKey } = lastAddedCommand;
-    const newCmd = tool.commands.find((cmd) => cmd.key === key);
-    if (newCmd) {
-      setSelectedCommand(newCmd);
-      if (parentKey) {
+  const handleDialogSave = (savedCommand: Command) => {
+    if (!dialogCommand) {
+      addCommand(savedCommand);
+      setSelectedCommand(savedCommand);
+      if (savedCommand.parentCommandKey) {
         setExpandedCommands((prev) => {
           const newSet = new Set(prev);
-          newSet.add(parentKey);
+          newSet.add(savedCommand.parentCommandKey!);
           return newSet;
         });
       }
-      setLastAddedCommand(null);
+    } else {
+      updateCommand(savedCommand.key, savedCommand);
     }
-  }, [tool.commands, lastAddedCommand, setSelectedCommand]);
-
-  const handleEdit = (command: Command) => {
-    setEditingCommand(command);
-    setIsDialogOpen(true);
   };
 
   const rootCommands = tool.commands.filter((cmd) => !cmd.parentCommandKey);
@@ -231,15 +223,21 @@ export function CommandTree() {
           </Button>
         </div>
       </ScrollArea>
-      {editingCommand && (
-        <CommandDialog
-          isOpen={isDialogOpen}
-          onOpenChange={(open) => {
-            setIsDialogOpen(open);
-            setEditingCommand(null);
-          }}
-        />
-      )}
+      <CommandDialog
+        key={dialogCommand?.key ?? "new"}
+        isOpen={isDialogOpen}
+        onOpenChange={(open) => {
+          setIsDialogOpen(open);
+          if (!open) {
+            setDialogCommand(undefined);
+            setPendingParentKey(undefined);
+          }
+        }}
+        command={dialogCommand}
+        parentKey={pendingParentKey}
+        toolName={tool.name}
+        onSave={handleDialogSave}
+      />
     </>
   );
 }
diff --git a/src/components/tool-editor/dialogs/command-dialog.tsx b/src/components/tool-editor/dialogs/command-dialog.tsx
index ba37993..88a0a56 100644
--- a/src/components/tool-editor/dialogs/command-dialog.tsx
+++ b/src/components/tool-editor/dialogs/command-dialog.tsx
@@ -1,5 +1,5 @@
-import { useToolBuilder } from "../tool-editor.context";
 import { Command } from "@/components/commandly/types/flat";
+import { slugify } from "@/components/commandly/utils/flat";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -19,13 +19,32 @@ import { useState } from "react";
 interface CommandDialogProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
+  command?: Command;
+  parentKey?: string;
+  toolName: string;
+  onSave: (command: Command) => void;
 }
 
-export function CommandDialog({ isOpen, onOpenChange }: CommandDialogProps) {
-  const { editingCommand, tool, updateCommand } = useToolBuilder();
-  const command = editingCommand;
-  const toolName = tool.name;
-  const [editCommand, setCommand] = useState<Command>(command!);
+export function CommandDialog({
+  isOpen,
+  onOpenChange,
+  command,
+  parentKey,
+  toolName,
+  onSave,
+}: CommandDialogProps) {
+  const isNewCommand = !command;
+  const [editCommand, setCommand] = useState<Command>(
+    () =>
+      command ?? {
+        key: "",
+        name: "",
+        description: "",
+        isDefault: false,
+        sortOrder: 0,
+        parentCommandKey: parentKey,
+      },
+  );
 
   return (
     <Dialog
@@ -36,7 +55,7 @@ export function CommandDialog({ isOpen, onOpenChange }: CommandDialogProps) {
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <TerminalIcon className="h-5 w-5" />
-            Edit Command Settings
+            {isNewCommand ? "Add Command" : "Edit Command Settings"}
           </DialogTitle>
           <DialogDescription>Dialog for editing command details</DialogDescription>
         </DialogHeader>
@@ -47,7 +66,7 @@ export function CommandDialog({ isOpen, onOpenChange }: CommandDialogProps) {
               <Input
                 id="cmd-name"
                 value={editCommand.name}
-                disabled={command!.name == toolName}
+                disabled={!isNewCommand && command!.name === toolName}
                 onChange={(e) =>
                   setCommand((prev) => ({
                     ...prev,
@@ -76,8 +95,8 @@ export function CommandDialog({ isOpen, onOpenChange }: CommandDialogProps) {
               <div className="flex items-center space-x-2">
                 <Switch
                   id="default-cmd"
-                  defaultChecked={editCommand.isDefault}
-                  disabled={command?.isDefault}
+                  checked={editCommand.isDefault}
+                  disabled={!isNewCommand && command?.isDefault}
                   onCheckedChange={(checked) => {
                     setCommand((prev) => ({
                       ...prev,
@@ -115,12 +134,16 @@ export function CommandDialog({ isOpen, onOpenChange }: CommandDialogProps) {
         <DialogFooter>
           <Button
             variant="outline"
+            disabled={isNewCommand && !editCommand.name.trim()}
             onClick={() => {
-              updateCommand(editCommand.key, editCommand);
+              const finalCommand = isNewCommand
+                ? { ...editCommand, key: slugify(editCommand.name) }
+                : editCommand;
+              onSave(finalCommand);
               onOpenChange(false);
             }}
           >
-            Save & Close
+            {isNewCommand ? "Add" : "Save Changes"}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/src/components/tool-editor/dialogs/parameter-details-dialog.tsx b/src/components/tool-editor/dialogs/parameter-details-dialog.tsx
index 6af40eb..39f380a 100644
--- a/src/components/tool-editor/dialogs/parameter-details-dialog.tsx
+++ b/src/components/tool-editor/dialogs/parameter-details-dialog.tsx
@@ -11,7 +11,7 @@ import {
   ParameterValidationType,
 } from "@/components/commandly/types/flat";
 import { TagsInput } from "@/components/commandly/ui/tags-input";
-import { slugify } from "@/components/commandly/utils/flat";
+import { createNewParameter, slugify } from "@/components/commandly/utils/flat";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -32,40 +32,62 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
+import {
+  Sortable,
+  SortableContent,
+  SortableItem,
+  SortableItemHandle,
+  SortableOverlay,
+} from "@/components/ui/sortable";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import {
   FlagIcon,
   FileTextIcon,
+  GripVerticalIcon,
   HashIcon,
   LinkIcon,
   PlusIcon,
   ShieldIcon,
   Trash2Icon,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useRef, useState } from "react";
+
+const DATA_TYPE_OPTIONS: Record<ParameterType, ParameterDataType[]> = {
+  Flag: ["Boolean"],
+  Option: ["String", "Number", "Boolean", "Enum"],
+  Argument: ["String", "Number", "Boolean", "Enum"],
+};
+
+interface ParameterDetailsDialogProps {
+  parameter?: Parameter;
+  isGlobal?: boolean;
+  onSave: (parameter: Parameter) => void;
+}
 
-export function ParameterDetailsDialog() {
-  const { selectedParameter, selectedCommand, tool, setSelectedParameter, upsertParameter } =
-    useToolBuilder();
+export function ParameterDetailsDialog({
+  parameter,
+  isGlobal = false,
+  onSave,
+}: ParameterDetailsDialogProps) {
+  const { selectedCommand, tool, setSelectedParameter } = useToolBuilder();
 
   const commandKey = selectedCommand?.key;
+  const isNewParameter = !parameter;
 
-  const availableParameters = selectedParameter
-    ? tool.parameters.filter((p) => {
-        if (p.key === selectedParameter.key) return false;
-        if (selectedParameter.isGlobal) return p.isGlobal;
-        return p.isGlobal || p.commandKey === commandKey;
-      })
-    : [];
-
-  const [parameter, setParameter] = useState<Parameter>(selectedParameter!);
+  const [internalParameter, setParameter] = useState<Parameter>(
+    () => parameter ?? createNewParameter(isGlobal, commandKey),
+  );
   const [hasChanges, setHasChanges] = useState(false);
+  const enumValueIdsRef = useRef<string[]>(
+    (parameter?.enum?.values ?? []).map(() => Math.random().toString(36).slice(2, 9)),
+  );
 
-  useEffect(() => {
-    setParameter(selectedParameter!);
-    setHasChanges(false);
-  }, [selectedParameter]);
+  const availableParameters = tool.parameters.filter((p) => {
+    if (parameter && p.key === parameter.key) return false;
+    if (parameter?.isGlobal) return p.isGlobal;
+    return p.isGlobal || p.commandKey === commandKey;
+  });
 
   const getParameterIcon = (parameterType: string) => {
     switch (parameterType) {
@@ -80,19 +102,13 @@ export function ParameterDetailsDialog() {
     }
   };
 
-  const isOpen = !!selectedParameter;
-
   const handleClose = () => {
     setSelectedParameter(null);
     setHasChanges(false);
   };
 
   const handleSave = () => {
-    if (parameter) {
-      upsertParameter(parameter);
-      setHasChanges(false);
-      handleClose();
-    }
+    onSave(internalParameter);
   };
 
   const updateParameter = (updates: Partial<Parameter>) => {
@@ -102,7 +118,7 @@ export function ParameterDetailsDialog() {
         let generatedKey = slugify(next.longFlag || next.name);
 
         const existingParam = tool.parameters.find(
-          (p) => p.key === generatedKey && p.key !== selectedParameter?.key,
+          (p) => p.key === generatedKey && p.key !== parameter?.key,
         );
         // If duplicate exists and parameter is not global, prefix with command key
         if (existingParam && !next.isGlobal && commandKey) {
@@ -165,50 +181,54 @@ export function ParameterDetailsDialog() {
   const addEnumValue = () => {
     if (!parameter) return;
     const newEnumValue: ParameterEnumValue = {
-      value: "new-value",
-      displayName: "New Value",
+      value: "",
+      displayName: "",
       isDefault: false,
-      sortOrder: 0,
+      sortOrder: parameter.enum?.values?.length ?? 0,
     };
+    enumValueIdsRef.current = [...enumValueIdsRef.current, Math.random().toString(36).slice(2, 9)];
     const existing = parameter.enum ?? { values: [], allowMultiple: false };
     updateParameter({
       enum: { ...existing, values: [...existing.values, newEnumValue] },
     });
   };
 
-  if (!parameter) return null;
-
   const canSaveChanges = () => {
     if (!hasChanges) return false;
 
-    if (!parameter.name.trim() || !parameter.longFlag?.trim()) {
+    if (!internalParameter.name.trim() || !internalParameter.longFlag?.trim()) {
       return false;
     }
     if (
       availableParameters.some(
         (p) =>
-          p.name.trim() === parameter.name.trim() ||
-          parameter.longFlag == p.longFlag ||
-          (parameter.shortFlag && parameter.shortFlag == p.shortFlag),
+          p.name.trim() === internalParameter.name.trim() ||
+          internalParameter.longFlag == p.longFlag ||
+          (internalParameter.shortFlag && internalParameter.shortFlag == p.shortFlag),
       )
     ) {
       return false;
     }
 
+    if (internalParameter.dataType === "Enum") {
+      if (!internalParameter.enum?.values?.length) return false;
+      if (internalParameter.enum.values.some((v) => !v.value.trim())) return false;
+    }
+
     return true;
   };
 
   return (
     <Dialog
-      open={isOpen}
+      open={true}
       onOpenChange={handleClose}
     >
       <DialogContent className="max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            {getParameterIcon(parameter.parameterType)}
-            {parameter.name}
-            {parameter.isGlobal && (
+            {getParameterIcon(internalParameter.parameterType)}
+            {internalParameter.name}
+            {internalParameter.isGlobal && (
               <Badge
                 variant="default"
                 className="text-xs"
@@ -228,7 +248,7 @@ export function ParameterDetailsDialog() {
                 Parameter Name<span className="ml-1 text-destructive">*</span>
               </Label>
               <Input
-                value={parameter.name}
+                value={internalParameter.name}
                 onChange={(e) => updateParameter({ name: e.target.value })}
               />
             </div>
@@ -238,8 +258,17 @@ export function ParameterDetailsDialog() {
             <div className="flex flex-col gap-2">
               <Label>Parameter Type</Label>
               <Select
-                value={parameter.parameterType}
-                onValueChange={(value: ParameterType) => updateParameter({ parameterType: value })}
+                value={internalParameter.parameterType}
+                onValueChange={(value: ParameterType) => {
+                  if (value === "Flag") {
+                    updateParameter({ parameterType: value, dataType: "Boolean" });
+                  } else {
+                    updateParameter({
+                      parameterType: value,
+                      ...(internalParameter.parameterType === "Flag" ? { dataType: "String" } : {}),
+                    });
+                  }
+                }}
               >
                 <SelectTrigger className="w-full">
                   <SelectValue />
@@ -254,36 +283,41 @@ export function ParameterDetailsDialog() {
             <div className="flex flex-col gap-2">
               <Label>Data Type</Label>
               <Select
-                value={parameter.dataType}
+                value={internalParameter.dataType}
                 onValueChange={(value: ParameterDataType) => updateParameter({ dataType: value })}
               >
                 <SelectTrigger className="w-full">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="String">String</SelectItem>
-                  <SelectItem value="Number">Number</SelectItem>
-                  <SelectItem value="Boolean">Boolean</SelectItem>
-                  <SelectItem value="Enum">Enum</SelectItem>
+                  {DATA_TYPE_OPTIONS[internalParameter.parameterType].map((dataType) => (
+                    <SelectItem
+                      key={dataType}
+                      value={dataType}
+                    >
+                      {dataType}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
             <div className="flex items-center space-x-2 pt-6">
               <Switch
                 id="isGlobal"
-                checked={parameter.isGlobal}
+                checked={internalParameter.isGlobal}
                 onCheckedChange={(checked) => updateParameter({ isGlobal: checked })}
               />
               <Label htmlFor="isGlobal">Global</Label>
             </div>
           </div>
 
-          {(parameter.parameterType === "Flag" || parameter.parameterType === "Option") && (
+          {(internalParameter.parameterType === "Flag" ||
+            internalParameter.parameterType === "Option") && (
             <div className="grid grid-cols-2 gap-4">
               <div className="flex flex-col gap-2">
                 <Label>Short Flag (include prefix)</Label>
                 <Input
-                  value={parameter.shortFlag}
+                  value={internalParameter.shortFlag}
                   onChange={(e) => updateParameter({ shortFlag: e.target.value })}
                   placeholder="-v"
                 />
@@ -293,7 +327,7 @@ export function ParameterDetailsDialog() {
                   Long Flag (include prefix) <span className="ml-1 text-destructive">*</span>
                 </Label>
                 <Input
-                  value={parameter.longFlag}
+                  value={internalParameter.longFlag}
                   onChange={(e) => updateParameter({ longFlag: e.target.value })}
                   placeholder="--verbose"
                 />
@@ -301,27 +335,27 @@ export function ParameterDetailsDialog() {
             </div>
           )}
 
-          {parameter.parameterType === "Option" && (
+          {internalParameter.parameterType === "Option" && (
             <div className="flex flex-col gap-2">
               <Label>
                 Key-Value Separator
                 <span className="muted">(default is single space)</span>
               </Label>
               <Input
-                value={parameter.keyValueSeparator ?? " "}
+                value={internalParameter.keyValueSeparator ?? " "}
                 onChange={(e) => updateParameter({ keyValueSeparator: e.target.value })}
                 placeholder="Default is single space"
               />
             </div>
           )}
 
-          {parameter.parameterType === "Argument" && (
+          {internalParameter.parameterType === "Argument" && (
             <div className="flex flex-col gap-2">
               <Label htmlFor="position">Position</Label>
               <Input
                 id="position"
                 type="number"
-                value={parameter.position || 0}
+                value={internalParameter.position || 0}
                 onChange={(e) =>
                   updateParameter({
                     position: Number.parseInt(e.target.value) || 0,
@@ -335,7 +369,7 @@ export function ParameterDetailsDialog() {
           <div className="flex flex-col gap-2">
             <Label>Description</Label>
             <Textarea
-              value={parameter.description}
+              value={internalParameter.description}
               onChange={(e) => updateParameter({ description: e.target.value })}
               rows={2}
             />
@@ -344,7 +378,7 @@ export function ParameterDetailsDialog() {
           <div className="flex flex-col gap-2">
             <Label>Group</Label>
             <Input
-              value={parameter.group ?? ""}
+              value={internalParameter.group ?? ""}
               onChange={(e) => updateParameter({ group: e.target.value || undefined })}
               placeholder="e.g. output"
             />
@@ -354,16 +388,16 @@ export function ParameterDetailsDialog() {
             <div className="flex items-center space-x-2">
               <Switch
                 id="isRequired"
-                checked={parameter.isRequired}
+                checked={internalParameter.isRequired}
                 onCheckedChange={(checked) => updateParameter({ isRequired: checked })}
               />
               <Label htmlFor="isRequired">Required</Label>
             </div>
-            {parameter.parameterType !== "Flag" && (
+            {internalParameter.parameterType !== "Flag" && (
               <div className="flex items-center space-x-2">
                 <Switch
                   id="isRepeatable"
-                  checked={parameter.isRepeatable}
+                  checked={internalParameter.isRepeatable}
                   onCheckedChange={(checked) => updateParameter({ isRepeatable: checked })}
                 />
                 <Label htmlFor="isRepeatable">Repeatable</Label>
@@ -374,7 +408,7 @@ export function ParameterDetailsDialog() {
           <div className="flex flex-col gap-2">
             <Label>Tags</Label>
             <TagsInput
-              value={parameter.metadata?.tags || []}
+              value={internalParameter.metadata?.tags || []}
               onValueChange={(tags) => {
                 updateParameter({ metadata: { tags } });
               }}
@@ -408,8 +442,8 @@ export function ParameterDetailsDialog() {
               className="space-y-2"
               id="dependencies"
             >
-              {parameter.dependencies &&
-                parameter.dependencies.map((dependency) => (
+              {internalParameter.dependencies &&
+                internalParameter.dependencies.map((dependency) => (
                   <div
                     key={dependency.key}
                     className="flex items-center gap-2 rounded border p-2"
@@ -484,8 +518,8 @@ export function ParameterDetailsDialog() {
               </Button>
             </div>
             <div className="space-y-2">
-              {parameter.validations &&
-                parameter.validations.map((validation) => (
+              {internalParameter.validations &&
+                internalParameter.validations.map((validation) => (
                   <div
                     key={validation.key}
                     className="flex items-center gap-2 rounded border p-2"
@@ -493,7 +527,7 @@ export function ParameterDetailsDialog() {
                     <Select
                       value={validation.validationType}
                       onValueChange={(value: ParameterValidationType) => {
-                        const updatedValidations = parameter.validations?.map((v) =>
+                        const updatedValidations = internalParameter.validations?.map((v) =>
                           v.key === validation.key ? { ...v, validationType: value } : v,
                         );
                         updateParameter({
@@ -515,7 +549,7 @@ export function ParameterDetailsDialog() {
                     <Input
                       value={validation.validationValue}
                       onChange={(e) => {
-                        const updatedValidations = parameter.validations?.map((v) =>
+                        const updatedValidations = internalParameter.validations?.map((v) =>
                           v.key === validation.key ? { ...v, validationValue: e.target.value } : v,
                         );
                         updateParameter({
@@ -529,7 +563,7 @@ export function ParameterDetailsDialog() {
                       size="sm"
                       variant="ghost"
                       onClick={() => {
-                        const updatedValidations = parameter.validations?.filter(
+                        const updatedValidations = internalParameter.validations?.filter(
                           (v) => v.key !== validation.key,
                         );
                         updateParameter({
@@ -545,7 +579,7 @@ export function ParameterDetailsDialog() {
           </div>
 
           {/* Enum Values Section */}
-          {parameter.dataType === "Enum" && (
+          {internalParameter.dataType === "Enum" && (
             <>
               <Separator />
               <div>
@@ -566,14 +600,14 @@ export function ParameterDetailsDialog() {
                   </Button>
                 </div>
                 <div className="mb-3 flex items-center gap-4">
-                  <div className="flex items-center space-x-2">
+                  <div className="flex h-8 items-center space-x-2">
                     <Switch
                       id="allow-multiple"
-                      checked={parameter.enum?.allowMultiple ?? false}
+                      checked={internalParameter.enum?.allowMultiple ?? false}
                       onCheckedChange={(checked) =>
                         updateParameter({
                           enum: {
-                            ...(parameter.enum ?? { values: [] }),
+                            ...(internalParameter.enum ?? { values: [] }),
                             allowMultiple: checked,
                           } as ParameterEnumValues,
                         })
@@ -581,99 +615,145 @@ export function ParameterDetailsDialog() {
                     />
                     <Label htmlFor="allow-multiple">Allow Multiple</Label>
                   </div>
-                  {parameter.enum?.allowMultiple && (
-                    <Input
-                      value={parameter.enum?.separator ?? ","}
-                      onChange={(e) =>
-                        updateParameter({
-                          enum: {
-                            ...(parameter.enum ?? { values: [], allowMultiple: true }),
-                            separator: e.target.value,
-                          },
-                        })
-                      }
-                      placeholder="Separator (e.g. ,)"
-                      className="w-32"
-                    />
-                  )}
-                </div>
-                <div
-                  className="space-y-2"
-                  id="enum-values"
-                >
-                  {parameter.enum?.values?.map((enumValue) => (
-                    <div
-                      key={enumValue.value}
-                      className="flex items-center gap-2 rounded border p-2"
-                    >
-                      <Input
-                        value={enumValue.value}
-                        onChange={(e) => {
-                          const updatedValues = parameter.enum?.values?.map((ev) =>
-                            ev.value === enumValue.value ? { ...ev, value: e.target.value } : ev,
-                          );
-                          updateParameter({
-                            enum: {
-                              ...(parameter.enum ?? { allowMultiple: false }),
-                              values: updatedValues ?? [],
-                            },
-                          });
-                        }}
-                        placeholder="value"
-                        className="flex-1"
-                      />
+                  {internalParameter.enum?.allowMultiple && (
+                    <div className="flex gap-2">
+                      <Label>Separator</Label>
                       <Input
-                        value={enumValue.displayName}
-                        onChange={(e) => {
-                          const updatedValues = parameter.enum?.values?.map((ev) =>
-                            ev.value === enumValue.value
-                              ? { ...ev, displayName: e.target.value }
-                              : ev,
-                          );
+                        value={internalParameter.enum?.separator ?? ","}
+                        onChange={(e) =>
                           updateParameter({
                             enum: {
-                              ...(parameter.enum ?? { allowMultiple: false }),
-                              values: updatedValues ?? [],
+                              ...(internalParameter.enum ?? { values: [], allowMultiple: true }),
+                              separator: e.target.value,
                             },
-                          });
-                        }}
-                        placeholder="Display Name"
-                        className="flex-1"
+                          })
+                        }
+                        placeholder="e.g. ,"
+                        className="w-20"
                       />
-                      <Switch
-                        checked={enumValue.isDefault}
-                        onCheckedChange={(checked) => {
-                          const updatedValues = parameter.enum?.values?.map((ev) =>
-                            ev.value === enumValue.value ? { ...ev, isDefault: checked } : ev,
-                          );
-                          updateParameter({
-                            enum: {
-                              ...(parameter.enum ?? { allowMultiple: false }),
-                              values: updatedValues ?? [],
-                            },
-                          });
-                        }}
-                      />
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => {
-                          const updatedValues = parameter.enum?.values?.filter(
-                            (ev) => ev.value !== enumValue.value,
-                          );
-                          updateParameter({
-                            enum: {
-                              ...(parameter.enum ?? { allowMultiple: false }),
-                              values: updatedValues ?? [],
-                            },
-                          });
-                        }}
-                      >
-                        <Trash2Icon className="h-3 w-3" />
-                      </Button>
                     </div>
-                  ))}
+                  )}
                 </div>
+                {internalParameter.enum?.values && internalParameter.enum.values.length > 0 && (
+                  <div className="mb-1 flex items-center gap-2 border border-transparent px-2">
+                    <div className="size-7 shrink-0" />
+                    <span className="flex-1 text-xs text-muted-foreground">Value</span>
+                    <span className="flex-1 text-xs text-muted-foreground">Display Name</span>
+                    <div className="invisible flex shrink-0 items-center gap-1">
+                      <div className="h-[1.15rem] w-8" />
+                      <span className="text-xs">Default</span>
+                    </div>
+                    <div className="size-7 shrink-0" />
+                  </div>
+                )}
+                <Sortable
+                  value={enumValueIdsRef.current}
+                  onValueChange={(newOrder) => {
+                    const idToIndex = Object.fromEntries(
+                      enumValueIdsRef.current.map((id, i) => [id, i]),
+                    );
+                    const reorderedValues = (newOrder as string[]).map((id, newIndex) => ({
+                      ...internalParameter.enum!.values[idToIndex[id]],
+                      sortOrder: newIndex,
+                    }));
+                    enumValueIdsRef.current = newOrder as string[];
+                    updateParameter({
+                      enum: { ...internalParameter.enum!, values: reorderedValues },
+                    });
+                  }}
+                >
+                  <SortableContent
+                    className="space-y-2"
+                    id="enum-values"
+                  >
+                    {internalParameter.enum?.values?.map((enumValue, index) => (
+                      <SortableItem
+                        key={enumValueIdsRef.current[index]}
+                        value={enumValueIdsRef.current[index]}
+                        className="flex items-center gap-2 rounded border p-2"
+                      >
+                        <SortableItemHandle className="shrink-0 text-muted-foreground">
+                          <GripVerticalIcon className="h-4 w-4" />
+                        </SortableItemHandle>
+                        <Input
+                          value={enumValue.value}
+                          onChange={(e) => {
+                            const updatedValues = internalParameter.enum?.values?.map((ev) =>
+                              ev === enumValue ? { ...ev, value: e.target.value } : ev,
+                            );
+                            updateParameter({
+                              enum: {
+                                ...(internalParameter.enum ?? { allowMultiple: false }),
+                                values: updatedValues ?? [],
+                              },
+                            });
+                          }}
+                          placeholder="value"
+                          className="flex-1"
+                        />
+                        <Input
+                          value={enumValue.displayName}
+                          onChange={(e) => {
+                            const updatedValues = internalParameter.enum?.values?.map((ev) =>
+                              ev === enumValue ? { ...ev, displayName: e.target.value } : ev,
+                            );
+                            updateParameter({
+                              enum: {
+                                ...(internalParameter.enum ?? { allowMultiple: false }),
+                                values: updatedValues ?? [],
+                              },
+                            });
+                          }}
+                          placeholder="Display Name"
+                          className="flex-1"
+                        />
+                        <div className="flex shrink-0 items-center gap-1">
+                          <Switch
+                            checked={enumValue.isDefault}
+                            onCheckedChange={(checked) => {
+                              const updatedValues = internalParameter.enum?.values?.map((ev) =>
+                                ev === enumValue
+                                  ? { ...ev, isDefault: checked }
+                                  : checked
+                                    ? { ...ev, isDefault: false }
+                                    : ev,
+                              );
+                              updateParameter({
+                                enum: {
+                                  ...(internalParameter.enum ?? { allowMultiple: false }),
+                                  values: updatedValues ?? [],
+                                },
+                              });
+                            }}
+                          />
+                          <Label className="text-xs">Default</Label>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="size-7 shrink-0 p-0"
+                          onClick={() => {
+                            const updatedValues = internalParameter.enum?.values?.filter(
+                              (_, valueIndex) => valueIndex !== index,
+                            );
+                            enumValueIdsRef.current = enumValueIdsRef.current.filter(
+                              (_, i) => i !== index,
+                            );
+                            updateParameter({
+                              enum: {
+                                ...(internalParameter.enum ?? { allowMultiple: false }),
+                                values: updatedValues ?? [],
+                              },
+                            });
+                          }}
+                        >
+                          <Trash2Icon className="h-3 w-3" />
+                        </Button>
+                      </SortableItem>
+                    ))}
+                  </SortableContent>
+                  <SortableOverlay />
+                </Sortable>
               </div>
             </>
           )}
@@ -690,7 +770,7 @@ export function ParameterDetailsDialog() {
             onClick={handleSave}
             disabled={!canSaveChanges()}
           >
-            Save Changes
+            {isNewParameter ? "Add" : "Save Changes"}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/src/components/tool-editor/tool-editor.context.tsx b/src/components/tool-editor/tool-editor.context.tsx
index f0d6386..d04f181 100644
--- a/src/components/tool-editor/tool-editor.context.tsx
+++ b/src/components/tool-editor/tool-editor.context.tsx
@@ -5,12 +5,7 @@ import {
   ExclusionGroup,
   ParameterValue,
 } from "@/components/commandly/types/flat";
-import {
-  cleanupTool,
-  createNewCommand,
-  getAllSubcommands,
-  slugify,
-} from "@/components/commandly/utils/flat";
+import { cleanupTool, getAllSubcommands, slugify } from "@/components/commandly/utils/flat";
 import {
   createContext,
   useContext,
@@ -26,7 +21,6 @@ export interface ToolBuilderState {
   tool: Tool;
   selectedCommand: Command;
   selectedParameter: Parameter | null;
-  editingCommand: Command | null;
   parameterValues: Record<string, ParameterValue>;
   dialogs: {
     parameterDetails: boolean;
@@ -48,8 +42,7 @@ type Action =
   | { type: "SET_DIALOG_OPEN"; payload: { dialog: DialogKey; open: boolean } }
   | { type: "SET_SELECTED_COMMAND"; payload: Command }
   | { type: "SET_SELECTED_PARAMETER"; payload: Parameter | null }
-  | { type: "SET_EDITING_COMMAND"; payload: Command | null }
-  | { type: "UPSERT_PARAMETER"; payload: Parameter }
+  | { type: "UPSERT_PARAMETER"; payload: Parameter & { originalKey?: string } }
   | { type: "ADD_EXCLUSION_GROUP"; payload: ExclusionGroup }
   | { type: "UPDATE_EXCLUSION_GROUP"; payload: ExclusionGroup }
   | { type: "REMOVE_EXCLUSION_GROUP"; payload: string }
@@ -60,7 +53,6 @@ function getDefaultState(tool: Tool): ToolBuilderState {
     tool,
     selectedCommand: tool.commands[0] ?? ({} as Command),
     selectedParameter: null,
-    editingCommand: null,
     parameterValues: {},
     dialogs: {
       parameterDetails: false,
@@ -147,30 +139,29 @@ function toolBuilderReducer(state: ToolBuilderState, action: Action): ToolBuilde
     case "SET_SELECTED_PARAMETER":
       return { ...state, selectedParameter: action.payload };
 
-    case "SET_EDITING_COMMAND":
-      return { ...state, editingCommand: action.payload };
-
     case "UPSERT_PARAMETER": {
-      const exists = state.tool.parameters.some((p) => p.key === action.payload.key);
+      const { originalKey, ...parameterData } = action.payload;
+      const matchKey = originalKey || parameterData.key;
+      const exists = state.tool.parameters.some((p) => p.key === matchKey);
       const newParameters = exists
         ? state.tool.parameters.map((param) => {
-            if (param.key !== action.payload.key) return param;
+            if (param.key !== matchKey) return param;
             const updatedParam = {
               ...param,
-              ...action.payload,
-              dependencies: action.payload.dependencies,
-              validations: action.payload.validations,
-              enum: action.payload.enum,
+              ...parameterData,
+              dependencies: parameterData.dependencies,
+              validations: parameterData.validations,
+              enum: parameterData.enum,
             };
-            if (action.payload.isGlobal && action.payload.isGlobal !== param.isGlobal) {
+            if (parameterData.isGlobal && parameterData.isGlobal !== param.isGlobal) {
               updatedParam.commandKey = undefined;
             }
-            if (!action.payload.isGlobal && param.isGlobal) {
+            if (!parameterData.isGlobal && param.isGlobal) {
               updatedParam.commandKey = state.selectedCommand?.key;
             }
             return updatedParam;
           })
-        : [...state.tool.parameters, action.payload];
+        : [...state.tool.parameters, parameterData];
       return { ...state, tool: { ...state.tool, parameters: newParameters } };
     }
 
@@ -219,7 +210,7 @@ function toolBuilderReducer(state: ToolBuilderState, action: Action): ToolBuilde
 interface ToolBuilderContextValue extends ToolBuilderState {
   initializeTool: (tool: Tool) => void;
   updateTool: (updates: Partial<Tool>) => void;
-  addSubcommand: (parentKey?: string) => string;
+  addCommand: (command: Command) => void;
   deleteCommand: (commandKey: string) => void;
   updateCommand: (commandKey: string, updates: Partial<Command>) => void;
   removeParameter: (parameterKey: string) => void;
@@ -229,8 +220,7 @@ interface ToolBuilderContextValue extends ToolBuilderState {
   setDialogOpen: (dialog: DialogKey, open: boolean) => void;
   setSelectedCommand: (command: Command) => void;
   setSelectedParameter: (parameter: Parameter | null) => void;
-  setEditingCommand: (command: Command | null) => void;
-  upsertParameter: (parameter: Parameter) => void;
+  upsertParameter: (parameter: Parameter, originalKey?: string) => void;
   setParameterValue: (key: string, value: ParameterValue) => void;
   getParametersForCommand: (commandKey: string) => Parameter[];
   getGlobalParameters: () => Parameter[];
@@ -268,11 +258,9 @@ export function ToolBuilderProvider({ tool, children, initialState }: ToolBuilde
 
       updateTool: (updates: Partial<Tool>) => dispatch({ type: "UPDATE_TOOL", payload: updates }),
 
-      addSubcommand: (parentKey?: string) => {
-        const newCommand = createNewCommand(parentKey);
-        dispatch({ type: "ADD_SUBCOMMAND", payload: newCommand });
+      addCommand: (command: Command) => {
+        dispatch({ type: "ADD_SUBCOMMAND", payload: command });
         toast("Command Added", { description: "New command has been created successfully." });
-        return newCommand.key;
       },
 
       deleteCommand: (commandKey: string) => {
@@ -321,12 +309,10 @@ export function ToolBuilderProvider({ tool, children, initialState }: ToolBuilde
       setSelectedParameter: (parameter: Parameter | null) =>
         dispatch({ type: "SET_SELECTED_PARAMETER", payload: parameter }),
 
-      setEditingCommand: (command: Command | null) =>
-        dispatch({ type: "SET_EDITING_COMMAND", payload: command }),
-
-      upsertParameter: (parameter: Parameter) => {
-        const exists = state.tool.parameters.some((p) => p.key === parameter.key);
-        dispatch({ type: "UPSERT_PARAMETER", payload: parameter });
+      upsertParameter: (parameter: Parameter, originalKey?: string) => {
+        const matchKey = originalKey || parameter.key;
+        const exists = state.tool.parameters.some((p) => p.key === matchKey);
+        dispatch({ type: "UPSERT_PARAMETER", payload: { ...parameter, originalKey } });
         if (exists) {
           toast("Parameter Updated", { description: "Parameter has been updated successfully." });
         } else {
diff --git a/src/components/tool-editor/tool-editor.tsx b/src/components/tool-editor/tool-editor.tsx
index b4aea11..3a707b1 100644
--- a/src/components/tool-editor/tool-editor.tsx
+++ b/src/components/tool-editor/tool-editor.tsx
@@ -63,7 +63,14 @@ function ToolEditorContent({
   onSaveCommand,
   onDeleteSavedCommand,
 }: ToolEditorContentProps) {
-  const { tool, setDialogOpen, initializeTool } = useToolBuilder();
+  const {
+    tool,
+    setDialogOpen,
+    initializeTool,
+    selectedParameter,
+    upsertParameter,
+    setSelectedParameter,
+  } = useToolBuilder();
   const [chatOpen, setChatOpen] = useState(false);
   const [streamingTool, setStreamingTool] = useState<Tool | null>(null);
   const [isAIGenerating, setIsAIGenerating] = useState(false);
@@ -228,7 +235,16 @@ function ToolEditorContent({
         </div>
       </div>
 
-      <ParameterDetailsDialog />
+      {selectedParameter && (
+        <ParameterDetailsDialog
+          parameter={selectedParameter.key ? selectedParameter : undefined}
+          isGlobal={selectedParameter.isGlobal}
+          onSave={(param) => {
+            upsertParameter(param, selectedParameter.key || undefined);
+            setSelectedParameter(null);
+          }}
+        />
+      )}
       <ToolDetailsDialog />
       <SavedCommandsDialog
         savedCommands={savedCommands}
diff --git a/src/components/ui/sortable.tsx b/src/components/ui/sortable.tsx
new file mode 100644
index 0000000..8da0662
--- /dev/null
+++ b/src/components/ui/sortable.tsx
@@ -0,0 +1,576 @@
+"use client";
+
+import {
+  type Announcements,
+  closestCenter,
+  closestCorners,
+  DndContext,
+  type DndContextProps,
+  type DragEndEvent,
+  type DraggableAttributes,
+  type DraggableSyntheticListeners,
+  DragOverlay,
+  type DragStartEvent,
+  type DropAnimation,
+  defaultDropAnimationSideEffects,
+  KeyboardSensor,
+  MouseSensor,
+  type ScreenReaderInstructions,
+  TouchSensor,
+  type UniqueIdentifier,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  restrictToHorizontalAxis,
+  restrictToParentElement,
+  restrictToVerticalAxis,
+} from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  type SortableContextProps,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Slot as SlotPrimitive } from "radix-ui";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { useComposedRefs } from "@/lib/compose-refs";
+import { cn } from "@/lib/utils";
+
+const orientationConfig = {
+  vertical: {
+    modifiers: [restrictToVerticalAxis, restrictToParentElement],
+    strategy: verticalListSortingStrategy,
+    collisionDetection: closestCenter,
+  },
+  horizontal: {
+    modifiers: [restrictToHorizontalAxis, restrictToParentElement],
+    strategy: horizontalListSortingStrategy,
+    collisionDetection: closestCenter,
+  },
+  mixed: {
+    modifiers: [restrictToParentElement],
+    strategy: undefined,
+    collisionDetection: closestCorners,
+  },
+};
+
+const ROOT_NAME = "Sortable";
+const CONTENT_NAME = "SortableContent";
+const ITEM_NAME = "SortableItem";
+const ITEM_HANDLE_NAME = "SortableItemHandle";
+const OVERLAY_NAME = "SortableOverlay";
+
+interface SortableRootContextValue<T> {
+  id: string;
+  items: UniqueIdentifier[];
+  modifiers: DndContextProps["modifiers"];
+  strategy: SortableContextProps["strategy"];
+  activeId: UniqueIdentifier | null;
+  setActiveId: (id: UniqueIdentifier | null) => void;
+  getItemValue: (item: T) => UniqueIdentifier;
+  flatCursor: boolean;
+}
+
+const SortableRootContext =
+  React.createContext<SortableRootContextValue<unknown> | null>(null);
+
+function useSortableContext(consumerName: string) {
+  const context = React.useContext(SortableRootContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+
+interface GetItemValue<T> {
+  /**
+   * Callback that returns a unique identifier for each sortable item. Required for array of objects.
+   * @example getItemValue={(item) => item.id}
+   */
+  getItemValue: (item: T) => UniqueIdentifier;
+}
+
+type SortableProps<T> = DndContextProps &
+  (T extends object ? GetItemValue<T> : Partial<GetItemValue<T>>) & {
+    value: T[];
+    onValueChange?: (items: T[]) => void;
+    onMove?: (
+      event: DragEndEvent & { activeIndex: number; overIndex: number },
+    ) => void;
+    strategy?: SortableContextProps["strategy"];
+    orientation?: "vertical" | "horizontal" | "mixed";
+    flatCursor?: boolean;
+  };
+
+function Sortable<T>(props: SortableProps<T>) {
+  const {
+    value,
+    onValueChange,
+    collisionDetection,
+    modifiers,
+    strategy,
+    onMove,
+    orientation = "vertical",
+    flatCursor = false,
+    getItemValue: getItemValueProp,
+    accessibility,
+    ...sortableProps
+  } = props;
+
+  const id = React.useId();
+  const [activeId, setActiveId] = React.useState<UniqueIdentifier | null>(null);
+
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+  const config = React.useMemo(
+    () => orientationConfig[orientation],
+    [orientation],
+  );
+
+  const getItemValue = React.useCallback(
+    (item: T): UniqueIdentifier => {
+      if (typeof item === "object" && !getItemValueProp) {
+        throw new Error(
+          "`getItemValue` is required when using array of objects",
+        );
+      }
+      return getItemValueProp
+        ? getItemValueProp(item)
+        : (item as UniqueIdentifier);
+    },
+    [getItemValueProp],
+  );
+
+  const items = React.useMemo(() => {
+    return value.map((item) => getItemValue(item));
+  }, [value, getItemValue]);
+
+  const onDragStart = React.useCallback(
+    (event: DragStartEvent) => {
+      sortableProps.onDragStart?.(event);
+
+      if (event.activatorEvent.defaultPrevented) return;
+
+      setActiveId(event.active.id);
+    },
+    [sortableProps.onDragStart],
+  );
+
+  const onDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      sortableProps.onDragEnd?.(event);
+
+      if (event.activatorEvent.defaultPrevented) return;
+
+      const { active, over } = event;
+      if (over && active.id !== over?.id) {
+        const activeIndex = value.findIndex(
+          (item) => getItemValue(item) === active.id,
+        );
+        const overIndex = value.findIndex(
+          (item) => getItemValue(item) === over.id,
+        );
+
+        if (onMove) {
+          onMove({ ...event, activeIndex, overIndex });
+        } else {
+          onValueChange?.(arrayMove(value, activeIndex, overIndex));
+        }
+      }
+      setActiveId(null);
+    },
+    [value, onValueChange, onMove, getItemValue, sortableProps.onDragEnd],
+  );
+
+  const onDragCancel = React.useCallback(
+    (event: DragEndEvent) => {
+      sortableProps.onDragCancel?.(event);
+
+      if (event.activatorEvent.defaultPrevented) return;
+
+      setActiveId(null);
+    },
+    [sortableProps.onDragCancel],
+  );
+
+  const announcements: Announcements = React.useMemo(
+    () => ({
+      onDragStart({ active }) {
+        const activeValue = active.id.toString();
+        return `Grabbed sortable item "${activeValue}". Current position is ${active.data.current?.sortable.index + 1} of ${value.length}. Use arrow keys to move, space to drop.`;
+      },
+      onDragOver({ active, over }) {
+        if (over) {
+          const overIndex = over.data.current?.sortable.index ?? 0;
+          const activeIndex = active.data.current?.sortable.index ?? 0;
+          const moveDirection = overIndex > activeIndex ? "down" : "up";
+          const activeValue = active.id.toString();
+          return `Sortable item "${activeValue}" moved ${moveDirection} to position ${overIndex + 1} of ${value.length}.`;
+        }
+        return "Sortable item is no longer over a droppable area. Press escape to cancel.";
+      },
+      onDragEnd({ active, over }) {
+        const activeValue = active.id.toString();
+        if (over) {
+          const overIndex = over.data.current?.sortable.index ?? 0;
+          return `Sortable item "${activeValue}" dropped at position ${overIndex + 1} of ${value.length}.`;
+        }
+        return `Sortable item "${activeValue}" dropped. No changes were made.`;
+      },
+      onDragCancel({ active }) {
+        const activeIndex = active.data.current?.sortable.index ?? 0;
+        const activeValue = active.id.toString();
+        return `Sorting cancelled. Sortable item "${activeValue}" returned to position ${activeIndex + 1} of ${value.length}.`;
+      },
+      onDragMove({ active, over }) {
+        if (over) {
+          const overIndex = over.data.current?.sortable.index ?? 0;
+          const activeIndex = active.data.current?.sortable.index ?? 0;
+          const moveDirection = overIndex > activeIndex ? "down" : "up";
+          const activeValue = active.id.toString();
+          return `Sortable item "${activeValue}" is moving ${moveDirection} to position ${overIndex + 1} of ${value.length}.`;
+        }
+        return "Sortable item is no longer over a droppable area. Press escape to cancel.";
+      },
+    }),
+    [value],
+  );
+
+  const screenReaderInstructions: ScreenReaderInstructions = React.useMemo(
+    () => ({
+      draggable: `
+        To pick up a sortable item, press space or enter.
+        While dragging, use the ${orientation === "vertical" ? "up and down" : orientation === "horizontal" ? "left and right" : "arrow"} keys to move the item.
+        Press space or enter again to drop the item in its new position, or press escape to cancel.
+      `,
+    }),
+    [orientation],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      id,
+      items,
+      modifiers: modifiers ?? config.modifiers,
+      strategy: strategy ?? config.strategy,
+      activeId,
+      setActiveId,
+      getItemValue,
+      flatCursor,
+    }),
+    [
+      id,
+      items,
+      modifiers,
+      strategy,
+      config.modifiers,
+      config.strategy,
+      activeId,
+      getItemValue,
+      flatCursor,
+    ],
+  );
+
+  return (
+    <SortableRootContext.Provider
+      value={contextValue as SortableRootContextValue<unknown>}
+    >
+      <DndContext
+        collisionDetection={collisionDetection ?? config.collisionDetection}
+        modifiers={modifiers ?? config.modifiers}
+        sensors={sensors}
+        {...sortableProps}
+        id={id}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        onDragCancel={onDragCancel}
+        accessibility={{
+          announcements,
+          screenReaderInstructions,
+          ...accessibility,
+        }}
+      />
+    </SortableRootContext.Provider>
+  );
+}
+
+const SortableContentContext = React.createContext<boolean>(false);
+
+interface SortableContentProps extends React.ComponentProps<"div"> {
+  strategy?: SortableContextProps["strategy"];
+  children: React.ReactNode;
+  asChild?: boolean;
+  withoutSlot?: boolean;
+}
+
+function SortableContent(props: SortableContentProps) {
+  const {
+    strategy: strategyProp,
+    asChild,
+    withoutSlot,
+    children,
+    ref,
+    ...contentProps
+  } = props;
+
+  const context = useSortableContext(CONTENT_NAME);
+
+  const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div";
+
+  return (
+    <SortableContentContext.Provider value={true}>
+      <SortableContext
+        items={context.items}
+        strategy={strategyProp ?? context.strategy}
+      >
+        {withoutSlot ? (
+          children
+        ) : (
+          <ContentPrimitive
+            data-slot="sortable-content"
+            {...contentProps}
+            ref={ref}
+          >
+            {children}
+          </ContentPrimitive>
+        )}
+      </SortableContext>
+    </SortableContentContext.Provider>
+  );
+}
+
+interface SortableItemContextValue {
+  id: string;
+  attributes: DraggableAttributes;
+  listeners: DraggableSyntheticListeners | undefined;
+  setActivatorNodeRef: (node: HTMLElement | null) => void;
+  isDragging?: boolean;
+  disabled?: boolean;
+}
+
+const SortableItemContext =
+  React.createContext<SortableItemContextValue | null>(null);
+
+function useSortableItemContext(consumerName: string) {
+  const context = React.useContext(SortableItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+  }
+  return context;
+}
+
+interface SortableItemProps extends React.ComponentProps<"div"> {
+  value: UniqueIdentifier;
+  asHandle?: boolean;
+  asChild?: boolean;
+  disabled?: boolean;
+}
+
+function SortableItem(props: SortableItemProps) {
+  const {
+    value,
+    style,
+    asHandle,
+    asChild,
+    disabled,
+    className,
+    ref,
+    ...itemProps
+  } = props;
+
+  const inSortableContent = React.useContext(SortableContentContext);
+  const inSortableOverlay = React.useContext(SortableOverlayContext);
+
+  if (!inSortableContent && !inSortableOverlay) {
+    throw new Error(
+      `\`${ITEM_NAME}\` must be used within \`${CONTENT_NAME}\` or \`${OVERLAY_NAME}\``,
+    );
+  }
+
+  if (value === "") {
+    throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
+  }
+
+  const context = useSortableContext(ITEM_NAME);
+  const id = React.useId();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: value, disabled });
+
+  const composedRef = useComposedRefs(ref, (node) => {
+    if (disabled) return;
+    setNodeRef(node);
+    if (asHandle) setActivatorNodeRef(node);
+  });
+
+  const composedStyle = React.useMemo<React.CSSProperties>(() => {
+    return {
+      transform: CSS.Translate.toString(transform),
+      transition,
+      ...style,
+    };
+  }, [transform, transition, style]);
+
+  const itemContext = React.useMemo<SortableItemContextValue>(
+    () => ({
+      id,
+      attributes,
+      listeners,
+      setActivatorNodeRef,
+      isDragging,
+      disabled,
+    }),
+    [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled],
+  );
+
+  const ItemPrimitive = asChild ? SlotPrimitive.Slot : "div";
+
+  return (
+    <SortableItemContext.Provider value={itemContext}>
+      <ItemPrimitive
+        id={id}
+        data-disabled={disabled}
+        data-dragging={isDragging ? "" : undefined}
+        data-slot="sortable-item"
+        {...itemProps}
+        {...(asHandle && !disabled ? attributes : {})}
+        {...(asHandle && !disabled ? listeners : {})}
+        ref={composedRef}
+        style={composedStyle}
+        className={cn(
+          "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+          {
+            "touch-none select-none": asHandle,
+            "cursor-default": context.flatCursor,
+            "data-dragging:cursor-grabbing": !context.flatCursor,
+            "cursor-grab": !isDragging && asHandle && !context.flatCursor,
+            "opacity-50": isDragging,
+            "pointer-events-none opacity-50": disabled,
+          },
+          className,
+        )}
+      />
+    </SortableItemContext.Provider>
+  );
+}
+
+interface SortableItemHandleProps extends React.ComponentProps<"button"> {
+  asChild?: boolean;
+}
+
+function SortableItemHandle(props: SortableItemHandleProps) {
+  const { asChild, disabled, className, ref, ...itemHandleProps } = props;
+
+  const context = useSortableContext(ITEM_HANDLE_NAME);
+  const itemContext = useSortableItemContext(ITEM_HANDLE_NAME);
+
+  const isDisabled = disabled ?? itemContext.disabled;
+
+  const composedRef = useComposedRefs(ref, (node) => {
+    if (!isDisabled) return;
+    itemContext.setActivatorNodeRef(node);
+  });
+
+  const HandlePrimitive = asChild ? SlotPrimitive.Slot : "button";
+
+  return (
+    <HandlePrimitive
+      type="button"
+      aria-controls={itemContext.id}
+      data-disabled={isDisabled}
+      data-dragging={itemContext.isDragging ? "" : undefined}
+      data-slot="sortable-item-handle"
+      {...itemHandleProps}
+      {...(isDisabled ? {} : itemContext.attributes)}
+      {...(isDisabled ? {} : itemContext.listeners)}
+      ref={composedRef}
+      className={cn(
+        "select-none disabled:pointer-events-none disabled:opacity-50",
+        context.flatCursor
+          ? "cursor-default"
+          : "cursor-grab data-dragging:cursor-grabbing",
+        className,
+      )}
+      disabled={isDisabled}
+    />
+  );
+}
+
+const SortableOverlayContext = React.createContext(false);
+
+const dropAnimation: DropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4",
+      },
+    },
+  }),
+};
+
+interface SortableOverlayProps
+  extends Omit<React.ComponentProps<typeof DragOverlay>, "children"> {
+  container?: Element | DocumentFragment | null;
+  children?:
+    | ((params: { value: UniqueIdentifier }) => React.ReactNode)
+    | React.ReactNode;
+}
+
+function SortableOverlay(props: SortableOverlayProps) {
+  const { container: containerProp, children, ...overlayProps } = props;
+
+  const context = useSortableContext(OVERLAY_NAME);
+
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useLayoutEffect(() => setMounted(true), []);
+
+  const container =
+    containerProp ?? (mounted ? globalThis.document?.body : null);
+
+  if (!container) return null;
+
+  return ReactDOM.createPortal(
+    <DragOverlay
+      dropAnimation={dropAnimation}
+      modifiers={context.modifiers}
+      className={cn(!context.flatCursor && "cursor-grabbing")}
+      {...overlayProps}
+    >
+      <SortableOverlayContext.Provider value={true}>
+        {context.activeId
+          ? typeof children === "function"
+            ? children({ value: context.activeId })
+            : children
+          : null}
+      </SortableOverlayContext.Provider>
+    </DragOverlay>,
+    container,
+  );
+}
+
+export {
+  Sortable,
+  SortableContent,
+  SortableItem,
+  SortableItemHandle,
+  SortableOverlay,
+  type SortableProps,
+};
diff --git a/src/lib/compose-refs.ts b/src/lib/compose-refs.ts
new file mode 100644
index 0000000..d92e7fc
--- /dev/null
+++ b/src/lib/compose-refs.ts
@@ -0,0 +1,64 @@
+import * as React from "react";
+import { useCallback } from "react";
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+
+  if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+
+    // React <19 will log an error to the console if a callback ref returns a
+    // value. We don't use ref cleanups internally so this will only happen if a
+    // user's ref callback returns a value, which we only expect if they are
+    // using the cleanup functionality added in React 19.
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize by all values
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(composeRefs(...refs), refs);
+}
+
+export { composeRefs, useComposedRefs };
diff --git a/tests/tool-editor/command-tree.test.tsx b/tests/tool-editor/command-tree.test.tsx
index 8145921..4727f6d 100644
--- a/tests/tool-editor/command-tree.test.tsx
+++ b/tests/tool-editor/command-tree.test.tsx
@@ -318,7 +318,6 @@ describe("CommandTree", () => {
 
     it("clicking edit button opens command dialog", async () => {
       renderWithProvider(<CommandTree />, complexToolState());
-      expect(capturedCtx.editingCommand).toBeNull();
 
       const configElement = screen.getByText("config").closest("div");
       const buttons = Array.from(configElement?.querySelectorAll("button") || []);
@@ -330,17 +329,16 @@ describe("CommandTree", () => {
       if (editButton) {
         fireEvent.click(editButton);
         await waitFor(() => {
-          expect(capturedCtx.editingCommand).not.toBeNull();
-          expect(capturedCtx.editingCommand?.name).toBe("config");
+          expect(screen.getByRole("dialog")).toBeInTheDocument();
+          expect(screen.getByText("Edit Command Settings")).toBeInTheDocument();
         });
       } else {
         expect(buttons.length).toBeGreaterThan(1);
       }
     });
 
-    it("clicking add button on a command adds a new subcommand", () => {
+    it("clicking add button on a command opens dialog for new subcommand", async () => {
       renderWithProvider(<CommandTree />, complexToolState());
-      const initialCommandCount = capturedCtx.tool.commands.length;
 
       const configElement = screen.getByText("config").closest("div");
       const buttons = Array.from(configElement?.querySelectorAll("button") || []);
@@ -352,12 +350,10 @@ describe("CommandTree", () => {
 
       if (addButton) {
         fireEvent.click(addButton);
-        expect(capturedCtx.tool.commands.length).toBe(initialCommandCount + 1);
-        const newCommands = capturedCtx.tool.commands.filter(
-          (cmd) => !createComplexTool().commands.some((orig) => orig.name === cmd.name),
-        );
-        expect(newCommands.length).toBe(1);
-        expect(newCommands[0].parentCommandKey).toBe("config");
+        await waitFor(() => {
+          expect(screen.getByRole("dialog")).toBeInTheDocument();
+          expect(screen.getByRole("heading", { name: "Add Command" })).toBeInTheDocument();
+        });
       } else {
         expect(actionButtons.length).toBeGreaterThanOrEqual(2);
       }
@@ -383,14 +379,16 @@ describe("CommandTree", () => {
       }
     });
 
-    it("clicking 'Add Command' button at bottom adds a new root-level command", () => {
+    it("clicking 'Add Command' button opens dialog for new root-level command", async () => {
       renderWithProvider(<CommandTree />, complexToolState());
-      const initialCommandCount = capturedCtx.tool.commands.length;
 
       const addCommandButton = screen.getByText(/Add Command/);
       fireEvent.click(addCommandButton);
 
-      expect(capturedCtx.tool.commands.length).toBe(initialCommandCount + 1);
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+        expect(screen.getByRole("heading", { name: "Add Command" })).toBeInTheDocument();
+      });
     });
 
     it("doesn't trigger selection when clicking action buttons", () => {
@@ -409,7 +407,7 @@ describe("CommandTree", () => {
       }
     });
 
-    it("preserves expansion state when adding/removing commands", async () => {
+    it("preserves expansion state when opening add command dialog", async () => {
       renderWithProvider(<CommandTree />, complexToolState());
 
       const configElement = screen.getByText("config").closest("div");
@@ -421,7 +419,7 @@ describe("CommandTree", () => {
           expect(screen.getByText("get")).toBeInTheDocument();
         });
 
-        const addCommandButton = screen.getByText(/Add Command/);
+        const addCommandButton = screen.getByRole("button", { name: /Add Command/i });
         fireEvent.click(addCommandButton);
 
         expect(screen.getByText("get")).toBeInTheDocument();
@@ -462,9 +460,8 @@ describe("CommandTree", () => {
       expect(capturedCtx.selectedCommand.parentCommandKey).toBe("my-cli-tool");
     });
 
-    it("updates editing command in context when clicking edit", async () => {
+    it("clicking edit opens dialog pre-filled with command details", async () => {
       renderWithProvider(<CommandTree />, complexToolState());
-      expect(capturedCtx.editingCommand).toBeNull();
 
       const configElement = screen.getByText("config").closest("div");
       const buttons = Array.from(configElement?.querySelectorAll("button") || []);
@@ -476,32 +473,27 @@ describe("CommandTree", () => {
       if (editButton) {
         fireEvent.click(editButton);
         await waitFor(() => {
-          expect(capturedCtx.editingCommand).not.toBeNull();
-          expect(capturedCtx.editingCommand?.name).toBe("config");
+          expect(screen.getByText("Edit Command Settings")).toBeInTheDocument();
+          const nameInput = screen.getByLabelText("Command Name") as HTMLInputElement;
+          expect(nameInput.value).toBe("config");
         });
       }
     });
 
-    it("updates tool commands when adding new command", () => {
+    it("opens dialog when adding new command", async () => {
       renderWithProvider(<CommandTree />, complexToolState());
-      const initialCommandCount = capturedCtx.tool.commands.length;
-      const initialCommands = [...capturedCtx.tool.commands];
 
       const addCommandButton = screen.getByText(/Add Command/);
       fireEvent.click(addCommandButton);
 
-      expect(capturedCtx.tool.commands.length).toBe(initialCommandCount + 1);
-      const newCommand = capturedCtx.tool.commands.find(
-        (cmd) => !initialCommands.some((c) => c.name === cmd.name),
-      );
-      expect(newCommand).toBeDefined();
-      expect(newCommand?.parentCommandKey).toBeUndefined();
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+        expect(screen.getByRole("heading", { name: "Add Command" })).toBeInTheDocument();
+      });
     });
 
-    it("updates tool commands when adding subcommand", () => {
+    it("opens dialog when adding subcommand", async () => {
       renderWithProvider(<CommandTree />, complexToolState());
-      const initialCommandCount = capturedCtx.tool.commands.length;
-      const initialCommands = [...capturedCtx.tool.commands];
 
       const configElement = screen.getByText("config").closest("div");
       const buttons = Array.from(configElement?.querySelectorAll("button") || []);
@@ -513,12 +505,10 @@ describe("CommandTree", () => {
 
       if (addButton) {
         fireEvent.click(addButton);
-        expect(capturedCtx.tool.commands.length).toBe(initialCommandCount + 1);
-        const newCommand = capturedCtx.tool.commands.find(
-          (cmd) => !initialCommands.some((c) => c.name === cmd.name),
-        );
-        expect(newCommand).toBeDefined();
-        expect(newCommand?.parentCommandKey).toBe("config");
+        await waitFor(() => {
+          expect(screen.getByRole("dialog")).toBeInTheDocument();
+          expect(screen.getByRole("heading", { name: "Add Command" })).toBeInTheDocument();
+        });
       }
     });
 
@@ -798,7 +788,7 @@ describe("CommandTree", () => {
       expect(spacerDiv).toBeInTheDocument();
     });
 
-    it("preserves expansion state when updating commands", async () => {
+    it("preserves expansion state when opening add command dialog", async () => {
       renderWithProvider(<CommandTree />, complexToolState());
 
       const configElement = screen.getByText("config").closest("div");
@@ -823,10 +813,10 @@ describe("CommandTree", () => {
           expect(screen.getByText("get")).toBeInTheDocument();
           expect(screen.getByText("set")).toBeInTheDocument();
 
-          const newCommands = capturedCtx.tool.commands.filter(
-            (cmd) => !createComplexTool().commands.some((orig) => orig.name === cmd.name),
-          );
-          expect(newCommands.length).toBe(1);
+          await waitFor(() => {
+            expect(screen.getByRole("dialog")).toBeInTheDocument();
+            expect(screen.getByRole("heading", { name: "Add Command" })).toBeInTheDocument();
+          });
         }
       }
     });
diff --git a/tests/tool-editor/dialogs/command-dialog.test.tsx b/tests/tool-editor/dialogs/command-dialog.test.tsx
index 2e0a4da..696f11d 100644
--- a/tests/tool-editor/dialogs/command-dialog.test.tsx
+++ b/tests/tool-editor/dialogs/command-dialog.test.tsx
@@ -3,7 +3,6 @@ import { CommandDialog } from "@/components/tool-editor/dialogs/command-dialog";
 import {
   ToolBuilderProvider,
   ToolBuilderState,
-  useToolBuilder,
 } from "@/components/tool-editor/tool-editor.context";
 import { defaultTool } from "@/lib/utils";
 import { render, screen, fireEvent } from "@testing-library/react";
@@ -24,16 +23,8 @@ const createTestState = (
 ): Partial<ToolBuilderState> => ({
   tool: { ...defaultTool(toolName, "Test tool"), name: toolName, commands: [command] },
   selectedCommand: command,
-  editingCommand: command,
 });
 
-// Captures the latest context value so tests can verify state changes
-let capturedCtx: ReturnType<typeof useToolBuilder>;
-function ContextCapture() {
-  capturedCtx = useToolBuilder();
-  return null;
-}
-
 function renderWithProvider(ui: ReactNode, initialState: Partial<ToolBuilderState>) {
   return render(
     <ToolBuilderProvider
@@ -41,24 +32,27 @@ function renderWithProvider(ui: ReactNode, initialState: Partial<ToolBuilderStat
       initialState={initialState}
     >
       {ui}
-      <ContextCapture />
     </ToolBuilderProvider>,
   );
 }
 
 describe("CommandDialog - Rendering & Structure", () => {
   const mockOnOpenChange = vi.fn();
+  const mockOnSave = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it("renders the dialog when isOpen is true", () => {
+  it("renders the dialog in edit mode when isOpen is true", () => {
     const testCommand = createTestCommand();
     renderWithProvider(
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={testCommand}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(testCommand),
     );
@@ -68,7 +62,23 @@ describe("CommandDialog - Rendering & Structure", () => {
     expect(screen.getByLabelText("Sort Order")).toBeInTheDocument();
     expect(screen.getByLabelText("Default Command")).toBeInTheDocument();
     expect(screen.getByLabelText("Description")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Save & Close" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save Changes" })).toBeInTheDocument();
+  });
+
+  it("renders the dialog in add mode when no command is provided", () => {
+    const testState = createTestState(createTestCommand());
+    renderWithProvider(
+      <CommandDialog
+        isOpen={true}
+        onOpenChange={mockOnOpenChange}
+        toolName="test-tool"
+        onSave={mockOnSave}
+      />,
+      testState,
+    );
+
+    expect(screen.getByText("Add Command")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
   });
 
   it("does not render dialog content when isOpen is false", () => {
@@ -77,6 +87,9 @@ describe("CommandDialog - Rendering & Structure", () => {
       <CommandDialog
         isOpen={false}
         onOpenChange={mockOnOpenChange}
+        command={testCommand}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(testCommand),
     );
@@ -90,6 +103,9 @@ describe("CommandDialog - Rendering & Structure", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={testCommand}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(testCommand),
     );
@@ -105,6 +121,9 @@ describe("CommandDialog - Rendering & Structure", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={testCommand}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       testState,
     );
@@ -117,8 +136,10 @@ describe("CommandDialog - Rendering & Structure", () => {
         <CommandDialog
           isOpen={false}
           onOpenChange={mockOnOpenChange}
+          command={testCommand}
+          toolName="test-tool"
+          onSave={mockOnSave}
         />
-        <ContextCapture />
       </ToolBuilderProvider>,
     );
 
@@ -128,6 +149,7 @@ describe("CommandDialog - Rendering & Structure", () => {
 
 describe("CommandDialog - Form Fields", () => {
   const mockOnOpenChange = vi.fn();
+  const mockOnSave = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -139,6 +161,9 @@ describe("CommandDialog - Form Fields", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -153,6 +178,9 @@ describe("CommandDialog - Form Fields", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -169,6 +197,9 @@ describe("CommandDialog - Form Fields", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command, "test-tool"),
     );
@@ -183,6 +214,9 @@ describe("CommandDialog - Form Fields", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -197,6 +231,9 @@ describe("CommandDialog - Form Fields", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -213,6 +250,9 @@ describe("CommandDialog - Form Fields", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -229,6 +269,9 @@ describe("CommandDialog - Form Fields", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -243,6 +286,9 @@ describe("CommandDialog - Form Fields", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -252,10 +298,27 @@ describe("CommandDialog - Form Fields", () => {
 
     expect((descriptionTextarea as HTMLTextAreaElement).value).toBe("New description");
   });
+
+  it("starts with empty name in add mode", () => {
+    const testState = createTestState(createTestCommand());
+    renderWithProvider(
+      <CommandDialog
+        isOpen={true}
+        onOpenChange={mockOnOpenChange}
+        toolName="test-tool"
+        onSave={mockOnSave}
+      />,
+      testState,
+    );
+
+    const nameInput = screen.getByLabelText("Command Name") as HTMLInputElement;
+    expect(nameInput.value).toBe("");
+  });
 });
 
 describe("CommandDialog - Default Command Switch", () => {
   const mockOnOpenChange = vi.fn();
+  const mockOnSave = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -267,6 +330,9 @@ describe("CommandDialog - Default Command Switch", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -281,6 +347,9 @@ describe("CommandDialog - Default Command Switch", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -297,6 +366,9 @@ describe("CommandDialog - Default Command Switch", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -308,12 +380,13 @@ describe("CommandDialog - Default Command Switch", () => {
 
 describe("CommandDialog - Save Functionality", () => {
   const mockOnOpenChange = vi.fn();
+  const mockOnSave = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it("updates command in context and closes dialog when Save & Close is clicked", () => {
+  it("calls onSave with updated command and closes dialog when Save Changes is clicked", () => {
     const command = createTestCommand({
       key: "original-command-key",
       name: "original-command",
@@ -322,6 +395,9 @@ describe("CommandDialog - Save Functionality", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -329,14 +405,17 @@ describe("CommandDialog - Save Functionality", () => {
     const nameInput = screen.getByLabelText("Command Name");
     fireEvent.change(nameInput, { target: { value: "updated-command" } });
 
-    const saveButton = screen.getByRole("button", { name: "Save & Close" });
-    fireEvent.click(saveButton);
+    fireEvent.click(screen.getByRole("button", { name: "Save Changes" }));
 
-    const updatedCommand = capturedCtx.tool.commands.find((c) => c.key === "original-command-key");
-    expect(updatedCommand?.name).toBe("updated-command");
-    expect(updatedCommand?.description).toBe("Test command description");
-    expect(updatedCommand?.isDefault).toBe(false);
-    expect(updatedCommand?.sortOrder).toBe(0);
+    expect(mockOnSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        key: "original-command-key",
+        name: "updated-command",
+        description: "Test command description",
+        isDefault: false,
+        sortOrder: 0,
+      }),
+    );
     expect(mockOnOpenChange).toHaveBeenCalledWith(false);
   });
 
@@ -349,6 +428,9 @@ describe("CommandDialog - Save Functionality", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -360,88 +442,105 @@ describe("CommandDialog - Save Functionality", () => {
     });
     fireEvent.click(screen.getByLabelText("Default Command"));
 
-    const saveButton = screen.getByRole("button", { name: "Save & Close" });
-    fireEvent.click(saveButton);
+    fireEvent.click(screen.getByRole("button", { name: "Save Changes" }));
 
-    const updatedCommand = capturedCtx.tool.commands.find((c) => c.key === "original-command-key");
-    expect(updatedCommand?.name).toBe("new-name");
-    expect(updatedCommand?.description).toBe("New description");
-    expect(updatedCommand?.isDefault).toBe(true);
-    expect(updatedCommand?.sortOrder).toBe(15);
+    expect(mockOnSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: "new-name",
+        description: "New description",
+        isDefault: true,
+        sortOrder: 15,
+      }),
+    );
   });
 
-  it("handles save with empty command name", () => {
+  it("preserves key when saving in edit mode", () => {
     const command = createTestCommand({
-      key: "original-name-key",
-      name: "original-name",
+      key: "parent-command-key",
+      name: "parent-command",
     });
     renderWithProvider(
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
 
-    const nameInput = screen.getByLabelText("Command Name");
-    fireEvent.change(nameInput, { target: { value: "" } });
-
-    const saveButton = screen.getByRole("button", { name: "Save & Close" });
-    fireEvent.click(saveButton);
+    fireEvent.change(screen.getByLabelText("Command Name"), {
+      target: { value: "updated-parent" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save Changes" }));
 
-    const updatedCommand = capturedCtx.tool.commands.find((c) => c.key === "original-name-key");
-    expect(updatedCommand?.name).toBe("");
+    expect(mockOnSave).toHaveBeenCalledWith(
+      expect.objectContaining({ key: "parent-command-key", name: "updated-parent" }),
+    );
   });
 
-  it("preserves subcommands when saving", () => {
-    const command = createTestCommand({
-      key: "parent-command-key",
-      name: "parent-command",
-    });
+  it("derives key from name when adding a new command", () => {
+    const testState = createTestState(createTestCommand());
     renderWithProvider(
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
-      createTestState(command),
+      testState,
     );
 
-    const nameInput = screen.getByLabelText("Command Name");
-    fireEvent.change(nameInput, { target: { value: "updated-parent" } });
-
-    const saveButton = screen.getByRole("button", { name: "Save & Close" });
-    fireEvent.click(saveButton);
+    fireEvent.change(screen.getByLabelText("Command Name"), {
+      target: { value: "My New Command" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Add" }));
 
-    const updatedCommand = capturedCtx.tool.commands.find((c) => c.key === "parent-command-key");
-    expect(updatedCommand?.name).toBe("updated-parent");
+    expect(mockOnSave).toHaveBeenCalledWith(
+      expect.objectContaining({ name: "My New Command", key: "my-new-command" }),
+    );
+    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
   });
 
-  it("correctly updates command name using original key as identifier", () => {
-    const originalCommand = createTestCommand({
-      key: "original-name-key",
-      name: "original-name",
-    });
+  it("disables Add button when name is empty in add mode", () => {
+    const testState = createTestState(createTestCommand());
     renderWithProvider(
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
-      createTestState(originalCommand),
+      testState,
     );
 
-    const nameInput = screen.getByLabelText("Command Name");
-    fireEvent.change(nameInput, { target: { value: "completely-new-name" } });
+    const addButton = screen.getByRole("button", { name: "Add" });
+    expect(addButton).toBeDisabled();
+  });
+
+  it("enables Add button when name is filled in add mode", () => {
+    const testState = createTestState(createTestCommand());
+    renderWithProvider(
+      <CommandDialog
+        isOpen={true}
+        onOpenChange={mockOnOpenChange}
+        toolName="test-tool"
+        onSave={mockOnSave}
+      />,
+      testState,
+    );
 
-    const saveButton = screen.getByRole("button", { name: "Save & Close" });
-    fireEvent.click(saveButton);
+    fireEvent.change(screen.getByLabelText("Command Name"), { target: { value: "new-cmd" } });
 
-    const updatedCommand = capturedCtx.tool.commands.find((c) => c.key === "original-name-key");
-    expect(updatedCommand?.name).toBe("completely-new-name");
+    const addButton = screen.getByRole("button", { name: "Add" });
+    expect(addButton).not.toBeDisabled();
   });
 });
 
 describe("CommandDialog - UI Elements and Layout", () => {
   const mockOnOpenChange = vi.fn();
+  const mockOnSave = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -453,6 +552,9 @@ describe("CommandDialog - UI Elements and Layout", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
@@ -469,6 +571,9 @@ describe("CommandDialog - UI Elements and Layout", () => {
       <CommandDialog
         isOpen={true}
         onOpenChange={mockOnOpenChange}
+        command={command}
+        toolName="test-tool"
+        onSave={mockOnSave}
       />,
       createTestState(command),
     );
diff --git a/tests/tool-editor/dialogs/parameter-details-dialog.test.tsx b/tests/tool-editor/dialogs/parameter-details-dialog.test.tsx
index a4ee3b3..7482138 100644
--- a/tests/tool-editor/dialogs/parameter-details-dialog.test.tsx
+++ b/tests/tool-editor/dialogs/parameter-details-dialog.test.tsx
@@ -1,4 +1,5 @@
 import { Parameter, Command } from "@/components/commandly/types/flat";
+import { createNewParameter } from "@/components/commandly/utils/flat";
 import { ParameterDetailsDialog } from "@/components/tool-editor/dialogs/parameter-details-dialog";
 import {
   ToolBuilderProvider,
@@ -7,7 +8,6 @@ import {
 } from "@/components/tool-editor/tool-editor.context";
 import { defaultTool } from "@/lib/utils";
 import { render, screen, fireEvent, act } from "@testing-library/react";
-import { ReactNode } from "react";
 
 const createTestParameter = (overrides: Partial<Parameter> = {}): Parameter => ({
   key: "test-param-key",
@@ -49,13 +49,27 @@ function ContextCapture() {
   return null;
 }
 
-function renderWithProvider(ui: ReactNode, initialState: Partial<ToolBuilderState>) {
+function DialogWrapper() {
+  const { selectedParameter, upsertParameter, setSelectedParameter } = useToolBuilder();
+  if (!selectedParameter) return null;
+  return (
+    <ParameterDetailsDialog
+      parameter={selectedParameter.key ? selectedParameter : undefined}
+      onSave={(param) => {
+        upsertParameter(param, selectedParameter.key || undefined);
+        setSelectedParameter(null);
+      }}
+    />
+  );
+}
+
+function renderWithProvider(initialState: Partial<ToolBuilderState>) {
   return render(
     <ToolBuilderProvider
       tool={initialState.tool ?? defaultTool("test-tool", "Test tool")}
       initialState={initialState}
     >
-      {ui}
+      <DialogWrapper />
       <ContextCapture />
     </ToolBuilderProvider>,
   );
@@ -69,7 +83,7 @@ describe("ParameterDetailsDialog - Dialog Lifecycle", () => {
   it("manages dialog open/close states and store synchronization", () => {
     const testParameter = createTestParameter();
 
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(testParameter));
+    renderWithProvider(createTestState(testParameter));
 
     expect(screen.getByRole("dialog")).toBeInTheDocument();
     expect(screen.getByText("test-param")).toBeInTheDocument();
@@ -98,7 +112,7 @@ describe("ParameterDetailsDialog - Form Fields", () => {
       dataType: "String",
     });
 
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(testParameter));
+    renderWithProvider(createTestState(testParameter));
 
     // Check initial values
     expect(screen.getByDisplayValue("my-parameter")).toBeInTheDocument();
@@ -125,13 +139,13 @@ describe("ParameterDetailsDialog - Form Fields", () => {
       dataType: "String",
     });
 
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(testParameter));
+    renderWithProvider(createTestState(testParameter));
 
     const selectElements = screen.getAllByRole("combobox");
     const parameterTypeSelect = selectElements[0];
     const dataTypeSelect = selectElements[1];
 
-    // Change parameter type
+    // Switch to Flag — dataType is auto-set to Boolean, only Boolean is in the list
     act(() => {
       fireEvent.click(parameterTypeSelect);
     });
@@ -139,15 +153,23 @@ describe("ParameterDetailsDialog - Form Fields", () => {
       fireEvent.click(screen.getByRole("option", { name: "Flag" }));
     });
     expect(screen.getByText("Flag")).toBeInTheDocument();
+    expect(screen.getByText("Boolean")).toBeInTheDocument();
+
+    // Switch back to Option — change data type to Enum
+    act(() => {
+      fireEvent.click(parameterTypeSelect);
+    });
+    act(() => {
+      fireEvent.click(screen.getByRole("option", { name: "Option" }));
+    });
 
-    // Change data type
     act(() => {
       fireEvent.click(dataTypeSelect);
     });
     act(() => {
-      fireEvent.click(screen.getByRole("option", { name: "Boolean" }));
+      fireEvent.click(screen.getByRole("option", { name: "Enum" }));
     });
-    expect(screen.getByText("Boolean")).toBeInTheDocument();
+    expect(screen.getByText("Enum")).toBeInTheDocument();
   });
 
   it("handles switch toggles for boolean properties", () => {
@@ -157,7 +179,7 @@ describe("ParameterDetailsDialog - Form Fields", () => {
       isRepeatable: false,
     });
 
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(testParameter));
+    renderWithProvider(createTestState(testParameter));
 
     const switches = screen.getAllByRole("switch");
     const requiredSwitch = switches.find((s) =>
@@ -187,7 +209,9 @@ describe("ParameterDetailsDialog - Form Fields", () => {
 
   it("validates empty parameter name", () => {
     const testParameter = createTestParameter();
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(testParameter));
+    const initState = { ...createTestState(testParameter) };
+    initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
+    renderWithProvider(initState);
 
     const nameInput = screen.getByDisplayValue("test-param");
     const saveButton = screen.getByRole("button", { name: "Save Changes" });
@@ -206,8 +230,8 @@ describe("ParameterDetailsDialog - Parameter Type Specific Fields", () => {
   });
 
   it("conditionally renders fields based on parameter type", () => {
-    const flagParameter = createTestParameter({ parameterType: "Flag" });
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(flagParameter));
+    const flagParameter = createTestParameter({ parameterType: "Flag", dataType: "Boolean" });
+    renderWithProvider(createTestState(flagParameter));
 
     // Flag type shows flag fields but not key-value separator
     expect(screen.getByText("Short Flag (include prefix)")).toBeInTheDocument();
@@ -250,7 +274,7 @@ describe("ParameterDetailsDialog - Parameter Type Specific Fields", () => {
       keyValueSeparator: "=",
     });
 
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(testParameter));
+    renderWithProvider(createTestState(testParameter));
 
     const separatorInput = screen.getByDisplayValue("=");
 
@@ -261,9 +285,38 @@ describe("ParameterDetailsDialog - Parameter Type Specific Fields", () => {
     expect(screen.getByDisplayValue(":")).toBeInTheDocument();
   });
 
+  it("keeps focus on enum value input while typing", () => {
+    const testParameter = createTestParameter({
+      dataType: "Enum",
+      enum: {
+        values: [
+          {
+            value: "one",
+            displayName: "One",
+            isDefault: false,
+            sortOrder: 0,
+          },
+        ],
+        allowMultiple: false,
+      },
+    });
+
+    renderWithProvider(createTestState(testParameter));
+
+    const valueInput = screen.getByDisplayValue("one");
+    valueInput.focus();
+
+    act(() => {
+      fireEvent.change(valueInput, { target: { value: "two" } });
+    });
+
+    expect(screen.getByDisplayValue("two")).toBeInTheDocument();
+    expect(document.activeElement).toBe(screen.getByDisplayValue("two"));
+  });
+
   it("hides the Repeatable switch for Flag parameters and shows it for Option/Argument", () => {
-    const flagParameter = createTestParameter({ parameterType: "Flag" });
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(flagParameter));
+    const flagParameter = createTestParameter({ parameterType: "Flag", dataType: "Boolean" });
+    renderWithProvider(createTestState(flagParameter));
 
     expect(screen.queryByText("Repeatable")).not.toBeInTheDocument();
 
@@ -297,6 +350,49 @@ describe("ParameterDetailsDialog - Parameter Type Specific Fields", () => {
 
     expect(screen.queryByText("Repeatable")).not.toBeInTheDocument();
   });
+
+  it("auto-sets Boolean when switching to Flag and resets to String when switching to Option/Argument", () => {
+    const testParameter = createTestParameter({ parameterType: "Option", dataType: "String" });
+    renderWithProvider(createTestState(testParameter));
+
+    const parameterTypeSelect = screen.getAllByRole("combobox")[0];
+
+    // Option → Flag: dataType auto-set to Boolean, only Boolean in list
+    act(() => {
+      fireEvent.click(parameterTypeSelect);
+    });
+    act(() => {
+      fireEvent.click(screen.getByRole("option", { name: "Flag" }));
+    });
+    expect(screen.getByText("Boolean")).toBeInTheDocument();
+
+    // Flag → Option: dataType resets to String, all data type options available
+    act(() => {
+      fireEvent.click(parameterTypeSelect);
+    });
+    act(() => {
+      fireEvent.click(screen.getByRole("option", { name: "Option" }));
+    });
+    expect(screen.getByText("String")).toBeInTheDocument();
+
+    // Option → Flag again: dataType auto-set to Boolean
+    act(() => {
+      fireEvent.click(parameterTypeSelect);
+    });
+    act(() => {
+      fireEvent.click(screen.getByRole("option", { name: "Flag" }));
+    });
+    expect(screen.getByText("Boolean")).toBeInTheDocument();
+
+    // Flag → Argument: dataType resets to String, all data type options available
+    act(() => {
+      fireEvent.click(parameterTypeSelect);
+    });
+    act(() => {
+      fireEvent.click(screen.getByRole("option", { name: "Argument" }));
+    });
+    expect(screen.getByText("String")).toBeInTheDocument();
+  });
 });
 
 describe("ParameterDetailsDialog - Dependencies Section", () => {
@@ -312,7 +408,7 @@ describe("ParameterDetailsDialog - Dependencies Section", () => {
     // Only this parameter — no others available
     initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
 
-    renderWithProvider(<ParameterDetailsDialog />, initState);
+    renderWithProvider(initState);
 
     const addButtons = screen.getAllByRole("button", { name: "Add" });
     const dependenciesAddButton = addButtons[0];
@@ -330,7 +426,9 @@ describe("ParameterDetailsDialog - State Management & Dialog Actions", () => {
 
   it("enables save button when changes are made but keeps store unchanged until saved", () => {
     const testParameter = createTestParameter();
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(testParameter));
+    const initState = { ...createTestState(testParameter) };
+    initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
+    renderWithProvider(initState);
 
     const saveButton = screen.getByRole("button", { name: "Save Changes" });
     expect(saveButton).toBeDisabled();
@@ -346,36 +444,6 @@ describe("ParameterDetailsDialog - State Management & Dialog Actions", () => {
     expect(capturedCtx.selectedParameter?.name).toBe("test-param");
   });
 
-  it("resets dialog state when new parameter is selected via context", () => {
-    const firstParameter = createTestParameter({ name: "first-param" });
-    const secondParameter = createTestParameter({
-      key: "different-key",
-      name: "second-param",
-      commandKey: "test-command-key",
-    });
-
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(firstParameter));
-
-    const nameInput = screen.getByDisplayValue("first-param");
-
-    act(() => {
-      fireEvent.change(nameInput, { target: { value: "modified-first-param" } });
-    });
-
-    const saveButton = screen.getByRole("button", { name: "Save Changes" });
-    expect(saveButton).not.toBeDisabled();
-
-    act(() => {
-      capturedCtx.setSelectedParameter(secondParameter);
-    });
-
-    expect(screen.getByDisplayValue("second-param")).toBeInTheDocument();
-    expect(saveButton).toBeDisabled();
-
-    expect(capturedCtx.selectedParameter?.name).toBe("second-param");
-    expect(capturedCtx.selectedParameter?.key).toBe("different-key");
-  });
-
   it("cancels changes, closes dialog, and preserves original store state", () => {
     const testParameter = createTestParameter({
       name: "original-param",
@@ -387,7 +455,7 @@ describe("ParameterDetailsDialog - State Management & Dialog Actions", () => {
     };
     initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
 
-    renderWithProvider(<ParameterDetailsDialog />, initState);
+    renderWithProvider(initState);
 
     const nameInput = screen.getByDisplayValue("original-param");
     const descriptionTextarea = screen.getByDisplayValue("Original description");
@@ -429,7 +497,7 @@ describe("ParameterDetailsDialog - State Management & Dialog Actions", () => {
     };
     initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
 
-    renderWithProvider(<ParameterDetailsDialog />, initState);
+    renderWithProvider(initState);
 
     const nameInput = screen.getByDisplayValue("original-param");
     const descriptionTextarea = screen.getByDisplayValue("Original description");
@@ -477,7 +545,7 @@ describe("ParameterDetailsDialog - State Management & Dialog Actions", () => {
     };
     initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
 
-    renderWithProvider(<ParameterDetailsDialog />, initState);
+    renderWithProvider(initState);
 
     const nameInput = screen.getByDisplayValue("test-param");
     act(() => {
@@ -503,8 +571,9 @@ describe("ParameterDetailsDialog - State Management & Dialog Actions", () => {
     const initState: Partial<ToolBuilderState> = {
       ...createTestState(testParameter),
     };
+    initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
 
-    const { unmount } = renderWithProvider(<ParameterDetailsDialog />, initState);
+    const { unmount } = renderWithProvider(initState);
 
     const nameInput = screen.getByDisplayValue("test-param");
 
@@ -523,7 +592,9 @@ describe("ParameterDetailsDialog - State Management & Dialog Actions", () => {
     unmount();
 
     // Re-render fresh with the same parameter
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(testParameter));
+    const reopenState = { ...createTestState(testParameter) };
+    reopenState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
+    renderWithProvider(reopenState);
 
     expect(screen.getByDisplayValue("test-param")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Save Changes" })).toBeDisabled();
@@ -550,7 +621,7 @@ describe("ParameterDetailsDialog - UI/UX", () => {
       metadata: { tags: ["tag1", "tag2"] },
     });
 
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(testParameter));
+    renderWithProvider(createTestState(testParameter));
 
     // Check all fields are pre-filled
     expect(screen.getByDisplayValue("test-parameter")).toBeInTheDocument();
@@ -587,20 +658,11 @@ describe("ParameterDetailsDialog - UI/UX", () => {
       isGlobal: true,
     });
 
-    renderWithProvider(<ParameterDetailsDialog />, createTestState(globalParameter));
+    renderWithProvider(createTestState(globalParameter));
 
     const dialogTitle = screen.getByText("test-param").closest("h2");
     expect(dialogTitle?.querySelector("svg")).toBeInTheDocument();
     expect(screen.getByText("global")).toBeInTheDocument();
-
-    // Switch to non-global parameter via context action
-    const nonGlobalParameter = createTestParameter({ isGlobal: false });
-    act(() => {
-      capturedCtx.setSelectedParameter(nonGlobalParameter);
-    });
-
-    expect(screen.queryByText("global")).not.toBeInTheDocument();
-    expect(capturedCtx.selectedParameter?.isGlobal).toBe(false);
   });
 
   it("updates context with parameter type changes after save", () => {
@@ -615,7 +677,7 @@ describe("ParameterDetailsDialog - UI/UX", () => {
     };
     initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
 
-    renderWithProvider(<ParameterDetailsDialog />, initState);
+    renderWithProvider(initState);
 
     const selectElements = screen.getAllByRole("combobox");
     const parameterTypeSelect = selectElements[0];
@@ -642,3 +704,217 @@ describe("ParameterDetailsDialog - UI/UX", () => {
     expect(updatedParameter?.shortFlag).toBe("-t");
   });
 });
+
+describe("ParameterDetailsDialog - Enum Section", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("shows Add label for new parameters and Save Changes for existing ones", () => {
+    const newParameter = createNewParameter(false, "test-command-key");
+    renderWithProvider(createTestState(newParameter));
+
+    expect(screen.queryByRole("button", { name: "Save Changes" })).not.toBeInTheDocument();
+    // Submit button shows "Add" for new params; it's disabled since no name/longFlag yet
+    // Dependencies and Validations sections also have "Add" buttons but those are enabled
+    const addButtons = screen.getAllByRole("button", { name: "Add" });
+    const submitAddButton = addButtons.find((btn) => btn.hasAttribute("disabled"));
+    expect(submitAddButton).toBeDefined();
+  });
+
+  it("renders Value and Display Name column headers when enum values exist", () => {
+    const testParameter = createTestParameter({
+      dataType: "Enum",
+      enum: {
+        values: [{ value: "opt1", displayName: "Option 1", isDefault: false, sortOrder: 0 }],
+        allowMultiple: false,
+      },
+    });
+
+    renderWithProvider(createTestState(testParameter));
+
+    expect(screen.getByText("Value")).toBeInTheDocument();
+    expect(screen.getByText("Display Name")).toBeInTheDocument();
+  });
+
+  it("does not render column headers when there are no enum values", () => {
+    const testParameter = createTestParameter({
+      dataType: "Enum",
+      enum: { values: [], allowMultiple: false },
+    });
+
+    renderWithProvider(createTestState(testParameter));
+
+    expect(screen.queryByText("Value")).not.toBeInTheDocument();
+    expect(screen.queryByText("Display Name")).not.toBeInTheDocument();
+  });
+
+  it("renders Default label next to each isDefault switch in enum rows", () => {
+    const testParameter = createTestParameter({
+      dataType: "Enum",
+      enum: {
+        values: [
+          { value: "a", displayName: "A", isDefault: false, sortOrder: 0 },
+          { value: "b", displayName: "B", isDefault: false, sortOrder: 1 },
+        ],
+        allowMultiple: false,
+      },
+    });
+
+    renderWithProvider(createTestState(testParameter));
+
+    const defaultLabels = screen.getAllByText("Default");
+    // 1 invisible alignment spacer + 1 per enum row = 3 total
+    expect(defaultLabels).toHaveLength(3);
+  });
+
+  it("makes isDefault selection mutually exclusive across enum value rows", () => {
+    const testParameter = createTestParameter({
+      dataType: "Enum",
+      enum: {
+        values: [
+          { value: "one", displayName: "One", isDefault: true, sortOrder: 0 },
+          { value: "two", displayName: "Two", isDefault: false, sortOrder: 1 },
+        ],
+        allowMultiple: false,
+      },
+    });
+    const initState = { ...createTestState(testParameter) };
+    initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
+
+    renderWithProvider(initState);
+
+    const defaultSwitches = screen
+      .getAllByRole("switch")
+      .filter((s) => s.closest("div")?.textContent?.trim() === "Default");
+
+    expect(defaultSwitches).toHaveLength(2);
+    expect(defaultSwitches[0]).toBeChecked();
+    expect(defaultSwitches[1]).not.toBeChecked();
+
+    act(() => {
+      fireEvent.click(defaultSwitches[1]);
+    });
+
+    expect(defaultSwitches[0]).not.toBeChecked();
+    expect(defaultSwitches[1]).toBeChecked();
+  });
+
+  it("shows Separator label when allowMultiple is enabled", () => {
+    const testParameter = createTestParameter({
+      dataType: "Enum",
+      enum: {
+        values: [{ value: "x", displayName: "X", isDefault: false, sortOrder: 0 }],
+        allowMultiple: true,
+        separator: ",",
+      },
+    });
+
+    renderWithProvider(createTestState(testParameter));
+
+    expect(screen.getByText("Separator")).toBeInTheDocument();
+  });
+
+  it("does not show Separator label when allowMultiple is disabled", () => {
+    const testParameter = createTestParameter({
+      dataType: "Enum",
+      enum: {
+        values: [{ value: "x", displayName: "X", isDefault: false, sortOrder: 0 }],
+        allowMultiple: false,
+      },
+    });
+
+    renderWithProvider(createTestState(testParameter));
+
+    expect(screen.queryByText("Separator")).not.toBeInTheDocument();
+  });
+
+  it("blocks save when enum values list is empty", () => {
+    const testParameter = createTestParameter({
+      dataType: "Enum",
+      enum: { values: [], allowMultiple: false },
+    });
+    const initState = { ...createTestState(testParameter) };
+    initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
+
+    renderWithProvider(initState);
+
+    const saveButton = screen.getByRole("button", { name: "Save Changes" });
+    const descriptionInput = screen.getByDisplayValue("Test parameter description");
+
+    act(() => {
+      fireEvent.change(descriptionInput, { target: { value: "Updated" } });
+    });
+
+    expect(saveButton).toBeDisabled();
+  });
+
+  it("blocks save when any enum value has an empty value string", () => {
+    const testParameter = createTestParameter({
+      dataType: "Enum",
+      enum: {
+        values: [{ value: "valid", displayName: "Valid", isDefault: false, sortOrder: 0 }],
+        allowMultiple: false,
+      },
+    });
+    const initState = { ...createTestState(testParameter) };
+    initState.tool = { ...defaultTool("test-tool", "Test tool"), parameters: [testParameter] };
+
+    renderWithProvider(initState);
+
+    const saveButton = screen.getByRole("button", { name: "Save Changes" });
+
+    const descriptionInput = screen.getByDisplayValue("Test parameter description");
+    act(() => {
+      fireEvent.change(descriptionInput, { target: { value: "Updated" } });
+    });
+
+    expect(saveButton).not.toBeDisabled();
+
+    const valueInput = screen.getByDisplayValue("valid");
+    act(() => {
+      fireEvent.change(valueInput, { target: { value: "" } });
+    });
+
+    expect(saveButton).toBeDisabled();
+  });
+});
+
+describe("ParameterDetailsDialog - Bug: Flag Update Duplication", () => {
+  it("should update existing parameter when long flag is changed, not create a new one", async () => {
+    const originalParam = createTestParameter({
+      key: "original-param",
+      name: "original-param",
+      longFlag: "--original",
+    });
+
+    const initialState = createTestState(originalParam);
+    if (initialState.tool) {
+      initialState.tool.parameters = [originalParam];
+    }
+
+    renderWithProvider(initialState);
+
+    const longFlagInput = screen.getByPlaceholderText("--verbose");
+    const saveButton = screen.getByText("Save Changes");
+
+    // Change the long flag - this will trigger slugify and change the 'key'
+    act(() => {
+      fireEvent.change(longFlagInput, { target: { value: "--updated" } });
+    });
+
+    // Save changes
+    act(() => {
+      fireEvent.click(saveButton);
+    });
+
+    // Check the final state in the tool via the captured context
+    const parameters = capturedCtx.tool.parameters;
+
+    // IT SHOULD STILL ONLY HAVE ONE PARAMETER, but the bug causes it to have 2
+    // We expect 1 in a healthy system. This test should FAIL now (length will be 2) if fixed later.
+    expect(parameters).toHaveLength(1);
+    expect(parameters[0].longFlag).toBe("--updated");
+    expect(parameters[0].key).toBe("updated");
+  });
+});