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,41 +11,66 @@ 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">
+    <div className="flex flex-col w-full max-w-4xl border-[1px] rounded-xl border-slate-200 overflow-hidden">
-      <h2 className="text-2xl font-semibold text-left mb-2">Code Plan</h2>
+      <div className="p-6">
-      <div className="grid grid-cols-3 divide-x divide-slate-300 w-full border-t-[1px] pt-4">
+        <h2 className="text-2xl font-semibold text-left">Code Plan</h2>
-        <div className="flex flex-col gap-2 px-6">
-          <h3 className="text-lg font-medium mb-4 text-slate-700">
-            Remaining Plans
-          </h3>
-          {props.remainingPlans.map((step, index) => (
-            <p key={index} className="font-mono text-sm">
-              {index + 1}. {step}
-            </p>
-          ))}
-        </div>
-        <div className="flex flex-col gap-2 px-6">
-          <h3 className="text-lg font-medium mb-4 text-slate-700">
-            Executed Plans
-          </h3>
-          {props.executedPlans.map((step, index) => (
-            <p key={index} className="font-mono text-sm">
-              {step}
-            </p>
-          ))}
-        </div>
-        <div className="flex flex-col gap-2 px-6">
-          <h3 className="text-lg font-medium mb-4 text-slate-700">
-            Rejected Plans
-          </h3>
-          {props.rejectedPlans.map((step, index) => (
-            <p key={index} className="font-mono text-sm">
-              {step}
-            </p>
-          ))}
-        </div>
       </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>
+            {props.remainingPlans.map((step, index) => (
+              <p key={index} className="font-mono text-sm">
+                {index + 1}. {step}
+              </p>
+            ))}
+          </div>
+          <div className="flex flex-col gap-2 px-6">
+            <h3 className="text-lg font-medium mb-4 text-slate-700">
+              Executed Plans
+            </h3>
+            {props.executedPlans.map((step, index) => (
+              <p key={index} className="font-mono text-sm">
+                {step}
+              </p>
+            ))}
+          </div>
+          <div className="flex flex-col gap-2 px-6">
+            <h3 className="text-lg font-medium mb-4 text-slate-700">
+              Rejected Plans
+            </h3>
+            {props.rejectedPlans.map((step, index) => (
+              <p key={index} className="font-mono text-sm">
+                {step}
+              </p>
+            ))}
+          </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>
   );
 }