fix: lock up top edge of the composer so suggestions list doesn't jump

apps/code/src/renderer/features/task-detail/components/SuggestedTaskCard.tsx

@@ -9,14 +9,12 @@ import { motion } from "framer-motion";
 
 export interface SuggestedTaskCardProps {
   task: DiscoveredTask;
-  index: number;
   onSelect: (task: DiscoveredTask) => void;
   onDismiss: (task: DiscoveredTask) => void;
 }
 
 export function SuggestedTaskCard({
   task,
-  index,
   onSelect,
   onDismiss,
 }: SuggestedTaskCardProps) {
@@ -26,19 +24,15 @@ export function SuggestedTaskCard({
   return (
     <motion.div
       layout
-      initial={{ opacity: 0, y: 6 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{
-        opacity: 0,
-        y: -4,
-        transition: { duration: 0.12, delay: 0 },
-      }}
+      initial={{ opacity: 0, scale: 0.97 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
       transition={{
-        duration: 0.18,
-        delay: index * 0.04,
-        layout: { type: "spring", damping: 25, stiffness: 300 },
+        opacity: { duration: 0.15, ease: "easeOut" },
+        scale: { duration: 0.15, ease: "easeOut" },
+        layout: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
       }}
-      className="group relative"
+      className="group relative origin-center"
     >
       <button
         onClick={() => onSelect(task)}

apps/code/src/renderer/features/task-detail/components/SuggestedTasksPanel.tsx

@@ -37,12 +37,6 @@ const BOTTOM_PADDING = 56;
 const LOG_LINE_HEIGHT = 24;
 const LOG_FEED_PADDING = 16;
 
-const pageVariants = {
-  enter: (dir: number) => ({ x: dir * 32, opacity: 0 }),
-  center: { x: 0, opacity: 1 },
-  exit: (dir: number) => ({ x: -dir * 32, opacity: 0 }),
-};
-
 const fadeMotion = {
   initial: { opacity: 0 },
   animate: { opacity: 1 },
@@ -227,31 +221,42 @@ export function SuggestedTasksPanel() {
         </Flex>
       )}
       {hasTasks && (
-        <div className="relative overflow-hidden">
-          <AnimatePresence
-            mode="popLayout"
-            initial={false}
-            custom={pageDirection}
-          >
+        <div className="relative">
+          <AnimatePresence mode="wait" initial={false} custom={pageDirection}>
             <motion.div
               key={effectivePageStart}
               custom={pageDirection}
-              variants={pageVariants}
               initial="enter"
               animate="center"
               exit="exit"
-              transition={{ duration: 0.18, ease: "easeOut" }}
+              variants={{
+                enter: (dir: number) => ({ x: dir * 32, opacity: 0 }),
+                center: {
+                  x: 0,
+                  opacity: 1,
+                  transition: {
+                    x: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
+                    opacity: { duration: 0.18, ease: "easeOut" },
+                  },
+                },
+                exit: (dir: number) => ({
+                  x: -dir * 32,
+                  opacity: 0,
+                  transition: { duration: 0.13, ease: "easeIn" },
+                }),
+              }}
               className="flex flex-col gap-2"
             >
-              {visibleTasks.map((task, index) => (
-                <SuggestedTaskCard
-                  key={task.id}
-                  task={task}
-                  index={index}
-                  onSelect={handleSelectTask}
-                  onDismiss={handleDismiss}
-                />
-              ))}
+              <AnimatePresence mode="sync" initial={false}>
+                {visibleTasks.map((task) => (
+                  <SuggestedTaskCard
+                    key={task.id}
+                    task={task}
+                    onSelect={handleSelectTask}
+                    onDismiss={handleDismiss}
+                  />
+                ))}
+              </AnimatePresence>
             </motion.div>
           </AnimatePresence>
         </div>

apps/code/src/renderer/features/task-detail/components/TaskInput.tsx

@@ -621,20 +621,20 @@ export function TaskInput({
       className="relative h-full w-full"
     >
       <DropZoneOverlay isVisible={isDraggingFile} />
-      <Flex
-        align="center"
-        justify="center"
-        height="100%"
-        className="relative px-4 pt-[10vh]"
-      >
+      <Flex height="100%" className="relative px-4">
         <DotPatternBackground className="h-[100.333%]" />
         <div
           style={{
-            zIndex: 1,
+            top: "50%",
+            transform: "translate(-50%, -50%)",
           }}
-          className="relative flex w-full max-w-[600px] flex-col gap-2"
+          className="absolute left-1/2 z-[1] flex w-[calc(100%-2rem)] max-w-[600px] flex-col gap-2"
         >
-          <Flex gap="2" align="center" className="min-w-0">
+          <Flex
+            gap="2"
+            align="center"
+            className="absolute bottom-full left-0 mb-2 min-w-0"
+          >
             <WorkspaceModeSelect
               value={workspaceMode}
               onChange={setWorkspaceMode}
@@ -829,8 +829,10 @@ export function TaskInput({
                   <CloudGithubMissingNotice />
                 </div>
               )}
-            <SuggestedTasksPanel />
           </Flex>
+          <div className="absolute top-full right-0 left-0 z-10">
+            <SuggestedTasksPanel />
+          </div>
         </div>
       </Flex>