better ui for rendering plan

agent/uis/open-code/plan/index.tsx

@@ -1,4 +1,7 @@
 import "./index.css";
+import { motion } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
 
 interface PlanProps {
   toolCallId: string;
@@ -8,11 +11,27 @@ interface PlanProps {
 }
 
 export default function Plan(props: PlanProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
   return (
-    <div className="flex flex-col gap-2 w-full max-w-4xl p-6 border-[1px] rounded-xl border-slate-200">
-      <h2 className="text-2xl font-semibold text-left mb-2">Code Plan</h2>
-      <div className="grid grid-cols-3 divide-x divide-slate-300 w-full border-t-[1px] pt-4">
-        <div className="flex flex-col gap-2 px-6">
+    <div className="flex flex-col w-full max-w-4xl border-[1px] rounded-xl border-slate-200 overflow-hidden">
+      <div className="p-6">
+        <h2 className="text-2xl font-semibold text-left">Code Plan</h2>
+      </div>
+      <motion.div
+        className="relative overflow-hidden"
+        animate={{
+          height: isExpanded ? "auto" : "200px",
+          opacity: isExpanded ? 1 : 0.7,
+        }}
+        transition={{
+          height: { duration: 0.3, ease: [0.4, 0, 0.2, 1] },
+          opacity: { duration: 0.2 },
+        }}
+        initial={false}
+      >
+        <div className="grid grid-cols-3 divide-x divide-slate-300 w-full border-t border-slate-200 px-6 pt-4 pb-4">
+          <div className="flex flex-col gap-2">
             <h3 className="text-lg font-medium mb-4 text-slate-700">
               Remaining Plans
             </h3>
@@ -43,6 +62,15 @@ export default function Plan(props: PlanProps) {
             ))}
           </div>
         </div>
+      </motion.div>
+      <motion.button
+        className="w-full py-2 border-t border-slate-200 flex items-center justify-center hover:bg-slate-50 transition-colors"
+        onClick={() => setIsExpanded(!isExpanded)}
+        animate={{ rotate: isExpanded ? 180 : 0 }}
+        transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
+      >
+        <ChevronDown className="w-5 h-5 text-slate-600" />
+      </motion.button>
     </div>
   );
 }