diff --git a/mast-react-vite/src/components/ui/action-parser.tsx b/mast-react-vite/src/components/ui/action-parser.tsx
index 59fa374..9359751 100644
--- a/mast-react-vite/src/components/ui/action-parser.tsx
+++ b/mast-react-vite/src/components/ui/action-parser.tsx
@@ -7,6 +7,7 @@ import { Tag } from "@/components/ui/tag";
 import { Project } from "@/components/ui/project";
 import { Calendar as CalendarComponent } from "@/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { motion, AnimatePresence } from "motion/react";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -24,6 +25,9 @@ const ActionParser = React.forwardRef<HTMLInputElement, InputProps>(
     const [showShadow, setShowShadow] = React.useState(false);
     const [desktopCalendarOpen, setDesktopCalendarOpen] = React.useState(false);
     const [mobileCalendarOpen, setMobileCalendarOpen] = React.useState(false);
+    const [activeSuggestionType, setActiveSuggestionType] = React.useState<string | null>(null);
+    const [showActiveButton, setShowActiveButton] = React.useState(false);
+    const [isExiting, setIsExiting] = React.useState(false);
     
     // Create refs for the suggestion containers and inputs
     const suggestionsRef = React.useRef<HTMLDivElement>(null);
@@ -119,6 +123,18 @@ const ActionParser = React.forwardRef<HTMLInputElement, InputProps>(
       setTimeout(() => focusInput(), 0);
     };
     
+    const exitActiveMode = () => {
+      setIsExiting(true);
+      // First, fade back in the regular buttons and move active button back
+      setTimeout(() => {
+        // After animation completes, hide active button and reset states
+        setShowActiveButton(false);
+        setActiveSuggestionType(null);
+        setSuggestions([]);
+        setIsExiting(false);
+      }, 300); // Match animation duration
+    };
+
     const checkScrollShadow = (element: HTMLDivElement | null) => {
       if (!element) return;
       const hasMoreContent = element.scrollWidth > element.clientWidth;
@@ -164,6 +180,8 @@ const ActionParser = React.forwardRef<HTMLInputElement, InputProps>(
         }
         
         setSuggestions(tags);
+        setActiveSuggestionType('#');
+        setShowActiveButton(true);
       } 
       else if (lastWord.startsWith('+')) {
         // Extract the partial project (text after the +)
@@ -188,13 +206,27 @@ const ActionParser = React.forwardRef<HTMLInputElement, InputProps>(
         }
         
         setSuggestions(projects);
+        setActiveSuggestionType('+');
+        setShowActiveButton(true);
       }
       else {
-        setSuggestions([]);
+        if (showActiveButton) {
+          exitActiveMode();
+        } else {
+          setSuggestions([]);
+          setActiveSuggestionType(null);
+          setShowActiveButton(false);
+        }
       }
     } catch (error) {
       console.error("Error fetching suggestions:", error);
-      setSuggestions([]);
+      if (showActiveButton) {
+        exitActiveMode();
+      } else {
+        setSuggestions([]);
+        setActiveSuggestionType(null);
+        setShowActiveButton(false);
+      }
     }
   };
   
@@ -359,31 +391,37 @@ React.useEffect(() => {
         onScroll={handleSuggestionsScroll}
       >
       {suggestions.map((suggestion, index) => {
-        const trimmedValue = (value as string || '').trim();
-        const words = trimmedValue.split(/\s+/);
-        const lastWord = words[words.length - 1] || '';
+      const trimmedValue = (value as string || '').trim();
+      const words = trimmedValue.split(/\s+/);
+      const lastWord = words[words.length - 1] || '';
+      
+      const handleClick = () => {
+      // Replace just the last word with the suggestion
+      if (activeSuggestionType === '#') {
+      words[words.length - 1] = `#${suggestion}`;
+      } else if (activeSuggestionType === '+') {
+      words[words.length - 1] = `+${suggestion}`;
+      }
+      
+      const newValue = words.join(' ');
+      props.onChange?.({ target: { value: newValue } } as any);
+      
+        // Reset suggestion state to trigger animation
+        setSuggestions([]);
+        setActiveSuggestionType(null);
+        setShowActiveButton(false);
         
-        const handleClick = () => {
-          // Replace just the last word with the suggestion
-          if (lastWord.startsWith('#')) {
-            words[words.length - 1] = `#${suggestion}`;
-          } else if (lastWord.startsWith('+')) {
-            words[words.length - 1] = `+${suggestion}`;
-          }
-          
-          const newValue = words.join(' ');
-          props.onChange?.({ target: { value: newValue } } as any);
-          setTimeout(() => focusInput(), 0);
-        };
+        setTimeout(() => focusInput(), 0);
+         };
 
-        // Return Tag or Project component based on input type
-        return lastWord.startsWith('#') ? (
+        // Return Tag or Project component based on activeSuggestionType
+        return activeSuggestionType === '#' ? (
           <Tag 
             key={index}
             tag={suggestion}
             onClick={handleClick}
           />
-        ) : lastWord.startsWith('+') ? (
+        ) : activeSuggestionType === '+' ? (
           <Project 
             key={index}
             name={suggestion}
@@ -403,7 +441,7 @@ React.useEffect(() => {
       })}
     </div>
     </>
-  )}</div>
+    )}</div>
 
   </div>
               <Button
@@ -480,6 +518,18 @@ React.useEffect(() => {
                 )}
                 ref={mobileInputRef}
                 value={value}
+                onKeyDown={(e) => {
+                  if (e.key === ' ' || e.key === 'Escape') {
+                    if (showActiveButton) {
+                      exitActiveMode();
+                    } else {
+                      setSuggestions([]);
+                      setActiveSuggestionType(null);
+                      setShowActiveButton(false);
+                    }
+                  }
+                  props.onKeyDown?.(e);
+                }}
                 {...props}
               />
             </div>
@@ -489,68 +539,153 @@ React.useEffect(() => {
             
             {/* Second line (non-interactive) with submit button */}
             <div className="flex-1 min-h-[36px] border border-t-0 rounded-b-md bg-background px-3 py-2 text-sm text-muted-foreground flex items-center justify-between group-focus-within:border-ring">
-						<div className="flex space-x-3 items-center flex-grow overflow-hidden">
-    <Button 
-      variant="ghost" 
-      size="sm" 
-      onClick={() => {
-        const trimmedVal = value && (value as string).length > 0 ? (value as string).trim() + " " : "";
-        const newValue = `${trimmedVal}#`;
-        props.onChange?.({ target: { value: newValue } } as any);
-        setTimeout(() => focusInput(), 0)
-      }}
-      className="h-8 px-2 text-muted-foreground hover:text-foreground flex-shrink-0"
-    >
-      #
-    </Button>
-    <Button 
-      variant="ghost" 
-      size="sm" 
-      onClick={() => {
-        const trimmedVal = value && (value as string).length > 0 ? (value as string).trim() + " " : "";
-        const newValue = `${trimmedVal}+`;
-        props.onChange?.({ target: { value: newValue } } as any);
-        setTimeout(() => focusInput(), 0)
+						<div className="relative flex items-center flex-grow overflow-hidden">
+    {/* All buttons as motion.divs that always exist */}
+    <motion.div 
+      className="flex space-x-3 items-center text-foreground"
+      animate={{
+        width: showActiveButton && !isExiting ? 44 : 'auto' // Shrink to just fit active button when suggestions showing
       }}
-      className="h-8 px-2 text-muted-foreground hover:text-foreground flex-shrink-0"
+      transition={{ duration: 0.3, ease: "easeOut" }}
     >
-      +
-    </Button>
-    <Popover open={mobileCalendarOpen} onOpenChange={setMobileCalendarOpen}>
-      <PopoverTrigger asChild>
+      {/* # Button */}
+      <motion.div
+        animate={{
+          opacity: showActiveButton && activeSuggestionType === '#' ? 
+            1 : // Active # button always stays visible
+            (showActiveButton && !isExiting ? 0 : 1), // Other buttons fade when not active
+          x: 0, // # button stays in place since it's already first
+          backgroundColor: showActiveButton && activeSuggestionType === '#' && !isExiting ? 
+            'hsl(var(--accent))' : 'hsl(var(--background))',
+          borderRadius: 6
+        }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+        className="flex items-center text-foreground"
+      >
+        <Button 
+          variant="ghost" 
+          size="sm" 
+          onClick={() => {
+            if (showActiveButton && !isExiting) return;
+            const trimmedVal = value && (value as string).length > 0 ? (value as string).trim() + " " : "";
+            const newValue = `${trimmedVal}#`;
+            props.onChange?.({ target: { value: newValue } } as any);
+            setTimeout(() => focusInput(), 0)
+          }}
+          className={cn(
+            "h-8 px-2 flex-shrink-0",
+            showActiveButton && activeSuggestionType === '#' && !isExiting
+              ? "text-foreground hover:text-foreground"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          #
+        </Button>
+      </motion.div>
+      
+      {/* + Button */}
+      <motion.div
+        animate={{
+          opacity: showActiveButton && activeSuggestionType === '+' ? 
+            1 : // Active + button always stays visible
+            (showActiveButton && !isExiting ? 0 : 1), // Other buttons fade when not active
+          x: showActiveButton && activeSuggestionType === '+' && !isExiting ? -36 : 0, // Move to first position
+          backgroundColor: showActiveButton && activeSuggestionType === '+' && !isExiting ? 
+            'hsl(var(--accent))' : 'hsl(var(--background))',
+          borderRadius: 6
+        }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+        className="flex items-center text-foreground"
+      >
         <Button 
           variant="ghost" 
           size="sm" 
+          onClick={() => {
+            if (showActiveButton && !isExiting) return;
+            const trimmedVal = value && (value as string).length > 0 ? (value as string).trim() + " " : "";
+            const newValue = `${trimmedVal}+`;
+            props.onChange?.({ target: { value: newValue } } as any);
+            setTimeout(() => focusInput(), 0)
+          }}
+          className={cn(
+            "h-8 px-2 flex-shrink-0",
+            showActiveButton && activeSuggestionType === '+' && !isExiting
+              ? "text-foreground hover:text-foreground"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          +
+        </Button>
+      </motion.div>
+      
+      {/* Calendar Button */}
+      <motion.div
+        animate={{
+          opacity: (showActiveButton && !isExiting) ? 0 : 1
+        }}
+        transition={{ duration: 0.15, ease: "easeOut" }}
+        className="flex items-center"
+        style={{
+          pointerEvents: (showActiveButton && !isExiting) ? 'none' : 'auto'
+        }}
+      >
+        <Popover open={mobileCalendarOpen} onOpenChange={setMobileCalendarOpen}>
+          <PopoverTrigger asChild>
+            <Button 
+              variant="ghost" 
+              size="sm" 
+              className="h-8 px-2 text-muted-foreground hover:text-foreground flex-shrink-0"
+              disabled={showActiveButton && !isExiting}
+            >
+              <Calendar />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="dark w-auto p-0 border bg-popover text-popover-foreground" align="start">
+            <CalendarComponent
+              mode="single"
+              selected={undefined}
+              onSelect={(date) => handleDateSelect(date, false)}
+              initialFocus
+            />
+          </PopoverContent>
+        </Popover>
+      </motion.div>
+      
+      {/* Flag Button */}
+      <motion.div
+        animate={{
+          opacity: (showActiveButton && !isExiting) ? 0 : 1
+        }}
+        transition={{ duration: 0.15, ease: "easeOut" }}
+        className="flex items-center"
+        style={{
+          pointerEvents: (showActiveButton && !isExiting) ? 'none' : 'auto'
+        }}
+      >
+        <Button 
+          variant="ghost" 
+          size="sm" 
+          onClick={handlePriorityToggle}
           className="h-8 px-2 text-muted-foreground hover:text-foreground flex-shrink-0"
+          disabled={showActiveButton && !isExiting}
         >
-          <Calendar />
+          <Flag />
         </Button>
-      </PopoverTrigger>
-      <PopoverContent className="dark w-auto p-0 border bg-popover text-popover-foreground" align="start">
-        <CalendarComponent
-          mode="single"
-          selected={undefined}
-          onSelect={(date) => handleDateSelect(date, false)}
-          initialFocus
-        />
-      </PopoverContent>
-    </Popover>
-    <Button 
-      variant="ghost" 
-      size="sm" 
-      onClick={handlePriorityToggle}
-      className="h-8 px-2 text-muted-foreground hover:text-foreground flex-shrink-0"
-    >
-      <Flag />
-    </Button>
-		<div className="h-7 flex-1 min-w-0 relative">
-  {suggestions.length > 0 && (
+      </motion.div>
+    </motion.div>
+    
+    <div className="h-7 flex-1 min-w-0 relative">
+      {suggestions.length > 0 && showActiveButton && (
     <>
       {showShadow && (
         <div className="absolute right-0 top-0 bottom-0 w-8 pointer-events-none bg-gradient-to-r from-transparent to-background z-10 shadow-sm" />
       )}
-      <div 
-        className="flex space-x-2 overflow-x-auto w-full" 
+      <motion.div 
+        className="flex space-x-2 overflow-x-auto w-full"
+        animate={{
+          opacity: isExiting ? 0 : 1
+        }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
         ref={mobileSuggestionsRef} 
         onScroll={handleSuggestionsScroll}
       >
@@ -569,17 +704,20 @@ React.useEffect(() => {
           
           const newValue = words.join(' ');
           props.onChange?.({ target: { value: newValue } } as any);
+          
+          // Reset suggestion state
+          exitActiveMode();
           setTimeout(() => focusInput(), 0);
         };
 
-        // Return Tag or Project component based on input type
-        return lastWord.startsWith('#') ? (
+        // Return Tag or Project component based on activeSuggestionType
+        return activeSuggestionType === '#' ? (
           <Tag 
             key={index}
             tag={suggestion}
             onClick={handleClick}
           />
-        ) : lastWord.startsWith('+') ? (
+        ) : activeSuggestionType === '+' ? (
           <Project 
             key={index}
             name={suggestion}
@@ -597,9 +735,10 @@ React.useEffect(() => {
           </Button>
         );
       })}
+      </motion.div>
+      </>
+      )}
     </div>
-    </>
-  )}</div>
 
   </div>
               <Button