feat: implement expandable chat input with double-click detection and gradient tooltip

- Add expand button with Maximize2/Minimize2 icons
- Implement 3-state height management (normal/50%/80%)
- Smart double-click detection with 300ms delay
- Height calculation based on session-view - 200px message space
- Custom CSS tooltip with dark gradient background and backdrop blur
- Send button anchored at bottom via margin-top: auto
- Smooth CSS transitions throughout
- Double-click at 80% now reduces to 50% (not normal)
- Removed all debug console.log statements

packages/ui/src/components/expand-button.tsx

@@ -8,6 +8,7 @@ interface ExpandButtonProps {
 
 export default function ExpandButton(props: ExpandButtonProps) {
   const [clickTime, setClickTime] = createSignal<number>(0)
+  const [clickTimer, setClickTimer] = createSignal<number | null>(null)
   const DOUBLE_CLICK_THRESHOLD = 300
 
   function handleClick() {
@@ -15,30 +16,42 @@ export default function ExpandButton(props: ExpandButtonProps) {
     const lastClick = clickTime()
     const isDoubleClick = now - lastClick < DOUBLE_CLICK_THRESHOLD
 
-    setClickTime(now)
+    // Clear any pending single-click timer
+    const timer = clickTimer()
+    if (timer !== null) {
+      clearTimeout(timer)
+      setClickTimer(null)
+    }
 
     const current = props.expandState()
 
     if (isDoubleClick) {
-      // Double click behavior
+      // Double click behavior - execute immediately
       if (current === "normal") {
-        props.onToggleExpand("fifty")
+        props.onToggleExpand("eighty")
       } else if (current === "fifty") {
         props.onToggleExpand("eighty")
       } else {
-        props.onToggleExpand("normal")
-      }
-    } else {
-      // Single click behavior
-      if (current === "normal") {
         props.onToggleExpand("fifty")
-      } else {
-        props.onToggleExpand("normal")
       }
-    }
+      // Reset click time to prevent triple-click issues
+      setClickTime(0)
+    } else {
+      // Single click behavior - delay to wait for potential double-click
+      setClickTime(now)
 
-    // Reset click timer after threshold
+      const newTimer = window.setTimeout(() => {
-    setTimeout(() => setClickTime(0), DOUBLE_CLICK_THRESHOLD)
+        const currentState = props.expandState()
+        if (currentState === "normal") {
+          props.onToggleExpand("fifty")
+        } else {
+          props.onToggleExpand("normal")
+        }
+        setClickTimer(null)
+      }, DOUBLE_CLICK_THRESHOLD)
+
+      setClickTimer(newTimer)
+    }
   }
 
   const getTooltip = () => {
@@ -48,7 +61,7 @@ export default function ExpandButton(props: ExpandButtonProps) {
     } else if (current === "fifty") {
       return "Double-click to expand to 80% • Click to minimize"
     } else {
-      return "Click to minimize • Double-click to expand to 50%"
+      return "Click to minimize • Double-click to reduce to 50%"
     }
   }
 
@@ -59,7 +72,7 @@ export default function ExpandButton(props: ExpandButtonProps) {
       onClick={handleClick}
       disabled={false}
       aria-label="Toggle chat input height"
-      title={getTooltip()}
+      data-tooltip={getTooltip()}
     >
       <Show
         when={props.expandState() === "normal"}

packages/ui/src/components/prompt-input.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Show, onMount, For, onCleanup, createEffect, on, untrack } from "solid-js"
+import { createSignal, Show, onMount, For, onCleanup, createEffect, on, untrack, createMemo } from "solid-js"
 import { ArrowBigUp, ArrowBigDown } from "lucide-solid"
 import UnifiedPicker from "./unified-picker"
 import ExpandButton from "./expand-button"
@@ -52,22 +52,35 @@ export default function PromptInput(props: PromptInputProps) {
   let textareaRef: HTMLTextAreaElement | undefined
   let containerRef: HTMLDivElement | undefined
 
-  const calculateContainerHeight = () => {
+   const calculateExpandedHeight = () => {
-    if (!containerRef) return 0
+     if (!containerRef) {
-    const rect = containerRef.getBoundingClientRect()
+       return 0
-    const root = containerRef.closest(".session-view")
+     }
-    if (!root) return 0
-    const rootRect = root.getBoundingClientRect()
-    return rootRect.height - rect.top
-  }
 
-  const getExpandedHeight = (): string => {
+     const root = containerRef.closest(".session-view")
-    const state = expandState()
+     if (!root) {
-    if (state === "normal") return "auto"
+       return 0
-    const containerHeight = calculateContainerHeight()
+     }
-    if (state === "fifty") return `${containerHeight * 0.5}px`
+     const rootRect = root.getBoundingClientRect()
-    return `${containerHeight * 0.8}px`
+
-  }
+     // Reserve minimum space for message section (200px minimum)
+     const MIN_MESSAGE_SPACE = 200
+     const availableForInput = rootRect.height - MIN_MESSAGE_SPACE
+
+     return availableForInput
+   }
+
+   const expandedHeight = createMemo(() => {
+     const state = expandState()
+     if (state === "normal") return "auto"
+
+     const availableHeight = calculateExpandedHeight()
+
+     if (state === "fifty") {
+       return `${availableHeight * 0.5}px`
+     }
+     return `${availableHeight * 0.8}px`
+   })
 
 
 
@@ -721,11 +734,11 @@ export default function PromptInput(props: PromptInputProps) {
     void props.onAbortSession()
   }
 
-  function handleExpandToggle(nextState: "normal" | "fifty" | "eighty") {
+   function handleExpandToggle(nextState: "normal" | "fifty" | "eighty") {
-    setExpandState(nextState)
+     setExpandState(nextState)
-    // Keep focus on textarea
+     // Keep focus on textarea
-    textareaRef?.focus()
+     textareaRef?.focus()
-  }
+   }
   
   function handleInput(e: Event) {
 
@@ -1186,7 +1199,13 @@ export default function PromptInput(props: PromptInputProps) {
               </For>
             </div>
           </Show>
-          <div class="prompt-input-field-container">
+          <div 
+            class="prompt-input-field-container"
+            style={{
+              "height": expandedHeight(),
+              "transition": "height 0.25s ease",
+            }}
+          >
             <div class="prompt-input-field">
               <textarea
               ref={textareaRef}
@@ -1204,12 +1223,10 @@ export default function PromptInput(props: PromptInputProps) {
               onBlur={() => setIsFocused(false)}
               disabled={props.disabled}
               rows={4}
-              style={{
+               style={{
-                "padding-top": attachments().length > 0 ? "8px" : "0",
+                 "padding-top": attachments().length > 0 ? "8px" : "0",
-                "height": getExpandedHeight(),
+                 "overflow-y": expandState() !== "normal" ? "auto" : "visible",
-                "overflow-y": expandState() !== "normal" ? "auto" : "visible",
+               }}
-                "transition": "height 0.25s ease",
-              }}
               spellcheck={false}
               autocorrect="off"
               autoCapitalize="off"

packages/ui/src/styles/messaging/prompt-input.css

@@ -13,7 +13,7 @@
 }
 
 .prompt-input-actions {
-  @apply flex flex-col items-center justify-between;
+  @apply flex flex-col items-center;
   align-self: stretch;
   height: 100%;
   padding: 0.5rem 0.25rem;
@@ -122,6 +122,7 @@
   background-color: rgba(15, 23, 42, 0.04);
   transition: background-color 0.15s ease, color 0.15s ease;
   padding: 0;
+  position: relative;
 }
 
 .prompt-expand-button:hover:not(:disabled) {
@@ -140,6 +141,33 @@
   cursor: not-allowed;
 }
 
+.prompt-expand-button::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
+  color: var(--text-primary);
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border-base);
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  z-index: 1000;
+  backdrop-filter: blur(8px);
+}
+
+.prompt-expand-button:hover::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 .prompt-overlay-text {
   display: inline-flex;
   align-items: center;
@@ -211,6 +239,7 @@
   @apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
   background-color: var(--accent-primary);
   color: var(--text-inverted);
+  margin-top: auto;
 }
 
 .send-button.shell-mode {