From f80a8f2ab7a2ec45a81724dadd760eb4e32b4579 Mon Sep 17 00:00:00 2001
From: jollyxenon <1378319314@qq.com>
Date: Wed, 13 May 2026 17:54:19 +0800
Subject: [PATCH 01/11] feat(ui): add resizable session composer

Allow the CodeNomad session composer to be resized by dragging its top edge while keeping the minimum height at the default collapsed size and clamping the maximum height to the chat area's visible bounds.

The prompt controls now keep their intended three-column layout during resize, the expand/collapse icon reflects the current height, and sending a message resets the composer back to its default size so follow-up prompts start from a consistent state.

This commit also removes prompt-resize remnants that no longer participate in the new height-based behavior, keeping the implementation aligned with the shipped interaction model.
---
 packages/ui/src/components/expand-button.tsx  |  37 +-
 .../components/instance/instance-shell2.tsx   |   3 +-
 packages/ui/src/components/prompt-input.tsx   | 916 +++++++++++-------
 .../ui/src/components/prompt-input/types.ts   |   3 -
 .../src/components/session/session-view.tsx   |   1 -
 .../ui/src/lib/i18n/messages/en/messaging.ts  |   2 +
 .../ui/src/lib/i18n/messages/es/messaging.ts  |   2 +
 .../ui/src/lib/i18n/messages/fr/messaging.ts  |   2 +
 .../ui/src/lib/i18n/messages/he/messaging.ts  |   2 +
 .../ui/src/lib/i18n/messages/ja/messaging.ts  |   2 +
 .../ui/src/lib/i18n/messages/ru/messaging.ts  |   2 +
 .../lib/i18n/messages/zh-Hans/messaging.ts    |   2 +
 .../ui/src/styles/messaging/prompt-input.css  | 182 ++--
 13 files changed, 735 insertions(+), 421 deletions(-)

diff --git a/packages/ui/src/components/expand-button.tsx b/packages/ui/src/components/expand-button.tsx
index 953b3f874..667921aab 100644
--- a/packages/ui/src/components/expand-button.tsx
+++ b/packages/ui/src/components/expand-button.tsx
@@ -3,16 +3,43 @@ import { Maximize2, Minimize2 } from "lucide-solid"
 import { useI18n } from "../lib/i18n"
 
 interface ExpandButtonProps {
-  expandState: () => "normal" | "expanded"
-  onToggleExpand: (nextState: "normal" | "expanded") => void
+  /**
+   * Current height of the input container in pixels.
+   * Used to determine which icon to show (expand vs shrink).
+   */
+  currentHeight: () => number
+  /**
+   * Default/minimum height of the input container in pixels.
+   * When currentHeight exceeds this, the shrink icon is shown.
+   */
+  defaultHeight: () => number
+  /**
+   * Callback when the button is clicked.
+   * true = expand to default expanded height, false = shrink to default height
+   */
+  onToggleExpand: (expand: boolean) => void
 }
 
+/**
+ * Expand/shrink button for the prompt input.
+ * Shows expand icon when at default height, shrink icon when enlarged.
+ * Clicking toggles between default and expanded heights.
+ */
 export default function ExpandButton(props: ExpandButtonProps) {
   const { t } = useI18n()
 
+  /**
+   * Determines if the input is currently expanded based on actual height.
+   * Returns true when current height exceeds the default height.
+   */
+  const isExpanded = () => props.currentHeight() > props.defaultHeight()
+
+  /**
+   * Handles button click by toggling between expanded and collapsed states.
+   * Passes true to expand, false to shrink.
+   */
   function handleClick() {
-    const current = props.expandState()
-    props.onToggleExpand(current === "normal" ? "expanded" : "normal")
+    props.onToggleExpand(!isExpanded())
   }
 
   return (
@@ -23,7 +50,7 @@ export default function ExpandButton(props: ExpandButtonProps) {
       aria-label={t("expandButton.toggleAriaLabel")}
     >
       <Show
-        when={props.expandState() === "normal"}
+        when={!isExpanded()}
         fallback={<Minimize2 class="h-4 w-4" aria-hidden="true" />}
       >
         <Maximize2 class="h-4 w-4" aria-hidden="true" />
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index f23ec071b..a631b51f4 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -837,7 +837,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       >
         <Show when={!mobileFullscreen()}>
           <AppBar position="sticky" color="default" elevation={0} class="border-b border-base">
-            <Toolbar variant="dense" class="session-toolbar flex flex-wrap items-center gap-2 py-0 min-h-[40px]">
+            <Toolbar variant="dense" data-session-toolbar="true" class="session-toolbar flex flex-wrap items-center gap-2 py-0 min-h-[40px]">
               <Show
                 when={!compactHeaderLayout()}
                 fallback={
@@ -1084,7 +1084,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       instanceFolder={props.instance.folder}
                       sessionId={NO_SESSION_DRAFT_SESSION_ID}
                       isActive={props.isActiveInstance}
-                      compactLayout={compactPromptLayout()}
                       onSend={handleFirstPromptSend}
                       escapeInDebounce={props.escapeInDebounce}
                     />
diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index afd30eb5a..f616805e5 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -1,88 +1,138 @@
-import { Suspense, createEffect, createSignal, lazy, on, onCleanup, Show } from "solid-js"
-import { ArrowBigUp, ArrowBigDown, Loader2, Mic, Paperclip, Volume2, X } from "lucide-solid"
-import ExpandButton from "./expand-button"
-import { clearAttachments, removeAttachment } from "../stores/attachments"
-import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
-import { createPastedPlaceholderRegex, pastedDisplayCounterRegex } from "./prompt-input/attachmentPlaceholders"
-import Kbd from "./kbd"
-import { getActiveInstance } from "../stores/instances"
-import { agents, executeCustomCommand } from "../stores/sessions"
-import { getCommands } from "../stores/commands"
-import { showAlertDialog } from "../stores/alerts"
-import { useI18n } from "../lib/i18n"
-import { getLogger } from "../lib/logger"
-import { serverApi } from "../lib/api-client"
-import { isDesktopHost, isLocalWindow } from "../lib/runtime-env"
-import { preferences } from "../stores/preferences"
-import type { ExpandState, PromptInputApi, PromptInputProps, PromptInsertMode, PromptMode } from "./prompt-input/types"
-import type { Attachment } from "../types/attachment"
-import type { FileSystemEntry } from "../../../server/src/api-types"
-import DirectoryBrowserDialog from "./directory-browser-dialog"
-import { usePromptState } from "./prompt-input/usePromptState"
-import { usePromptAttachments } from "./prompt-input/usePromptAttachments"
-import { usePromptPicker } from "./prompt-input/usePromptPicker"
-import { usePromptKeyDown } from "./prompt-input/usePromptKeyDown"
-import { usePromptVoiceInput } from "./prompt-input/usePromptVoiceInput"
+import {
+  Suspense,
+  createEffect,
+  createSignal,
+  lazy,
+  on,
+  onCleanup,
+  Show,
+} from "solid-js";
+import {
+  ArrowBigUp,
+  ArrowBigDown,
+  Loader2,
+  Mic,
+  Paperclip,
+  Volume2,
+  X,
+} from "lucide-solid";
+import ExpandButton from "./expand-button";
+import { clearAttachments, removeAttachment } from "../stores/attachments";
+import { resolvePastedPlaceholders } from "../lib/prompt-placeholders";
+import {
+  createPastedPlaceholderRegex,
+  pastedDisplayCounterRegex,
+} from "./prompt-input/attachmentPlaceholders";
+import Kbd from "./kbd";
+import { getActiveInstance } from "../stores/instances";
+import { agents, executeCustomCommand } from "../stores/sessions";
+import { getCommands } from "../stores/commands";
+import { showAlertDialog } from "../stores/alerts";
+import { useI18n } from "../lib/i18n";
+import { getLogger } from "../lib/logger";
+import { serverApi } from "../lib/api-client";
+import { isDesktopHost, isLocalWindow } from "../lib/runtime-env";
+import { preferences } from "../stores/preferences";
+import type {
+  PromptInputApi,
+  PromptInputProps,
+  PromptInsertMode,
+  PromptMode,
+} from "./prompt-input/types";
+import type { Attachment } from "../types/attachment";
+import type { FileSystemEntry } from "../../../server/src/api-types";
+import DirectoryBrowserDialog from "./directory-browser-dialog";
+import { usePromptState } from "./prompt-input/usePromptState";
+import { usePromptAttachments } from "./prompt-input/usePromptAttachments";
+import { usePromptPicker } from "./prompt-input/usePromptPicker";
+import { usePromptKeyDown } from "./prompt-input/usePromptKeyDown";
+import { usePromptVoiceInput } from "./prompt-input/usePromptVoiceInput";
 import {
   canUseConversationMode,
   clearConversationPlaybackForInstance,
   isConversationModeEnabled,
   toggleConversationMode,
-} from "../stores/conversation-speech"
-const log = getLogger("actions")
-const LazyUnifiedPicker = lazy(() => import("./unified-picker"))
+} from "../stores/conversation-speech";
+const log = getLogger("actions");
+const LazyUnifiedPicker = lazy(() => import("./unified-picker"));
 
-function getConsumedPastedTextAttachmentIds(text: string, attachments: Attachment[]): string[] {
-  if (!text || attachments.length === 0) return []
+function getConsumedPastedTextAttachmentIds(
+  text: string,
+  attachments: Attachment[],
+): string[] {
+  if (!text || attachments.length === 0) return [];
 
-  const usedCounters = new Set<string>()
+  const usedCounters = new Set<string>();
   for (const match of text.matchAll(createPastedPlaceholderRegex())) {
-    const counter = match?.[1]
-    if (counter) usedCounters.add(counter)
+    const counter = match?.[1];
+    if (counter) usedCounters.add(counter);
   }
 
-  if (usedCounters.size === 0) return []
+  if (usedCounters.size === 0) return [];
 
-  const consumed = new Set<string>()
+  const consumed = new Set<string>();
 
   for (const attachment of attachments) {
-    if (!attachment?.id) continue
-    if (attachment?.source?.type !== "text") continue
-    const display = attachment.display
-    if (typeof display !== "string") continue
-    const match = display.match(pastedDisplayCounterRegex)
-    if (!match?.[1]) continue
+    if (!attachment?.id) continue;
+    if (attachment?.source?.type !== "text") continue;
+    const display = attachment.display;
+    if (typeof display !== "string") continue;
+    const match = display.match(pastedDisplayCounterRegex);
+    if (!match?.[1]) continue;
     if (usedCounters.has(match[1])) {
-      consumed.add(attachment.id)
+      consumed.add(attachment.id);
     }
   }
 
-  return Array.from(consumed)
+  return Array.from(consumed);
 }
 
+/**
+ * Default height of the prompt input in pixels (compact state).
+ * This is the minimum height the input can be resized to.
+ */
+const DEFAULT_INPUT_HEIGHT = 104;
+
+/**
+ * Default expanded height of the prompt input in pixels.
+ * Used when clicking the expand button.
+ */
+const DEFAULT_EXPANDED_HEIGHT = 280;
+
 export default function PromptInput(props: PromptInputProps) {
-  const { t } = useI18n()
-  const [, setIsFocused] = createSignal(false)
-  const [mode, setMode] = createSignal<PromptMode>("normal")
-  const [expandState, setExpandState] = createSignal<ExpandState>("normal")
-  const [isFileBrowserOpen, setIsFileBrowserOpen] = createSignal(false)
-  const SELECTION_INSERT_MAX_LENGTH = 2000
-  const MAX_READABLE_PICKED_FILE_BYTES = 5 * 1024 * 1024
-  let textareaRef: HTMLTextAreaElement | undefined
-  let fileInputRef: HTMLInputElement | undefined
+  const { t } = useI18n();
+  const [mode, setMode] = createSignal<PromptMode>("normal");
+  const [isFileBrowserOpen, setIsFileBrowserOpen] = createSignal(false);
+  const SELECTION_INSERT_MAX_LENGTH = 2000;
+  const MAX_READABLE_PICKED_FILE_BYTES = 5 * 1024 * 1024;
+  let textareaRef: HTMLTextAreaElement | undefined;
+  let fileInputRef: HTMLInputElement | undefined;
+  let containerRef: HTMLDivElement | undefined;
+
+  /**
+   * Current height of the prompt input container in pixels.
+   * Starts at default height and can be resized via drag or button click.
+   */
+  const [inputHeight, setInputHeight] = createSignal(DEFAULT_INPUT_HEIGHT);
+
+  /**
+   * Whether the user is currently dragging the resize handle.
+   * Used to apply visual feedback during resize operations.
+   */
+  const [isResizing, setIsResizing] = createSignal(false);
 
   const getPlaceholder = () => {
     if (mode() === "shell") {
-      return t("promptInput.placeholder.shell")
+      return t("promptInput.placeholder.shell");
     }
-    return t("promptInput.placeholder.default")
-  }
+    return t("promptInput.placeholder.default");
+  };
 
   const promptState = usePromptState({
     instanceId: () => props.instanceId,
     sessionId: () => props.sessionId,
     instanceFolder: () => props.instanceFolder,
-  })
+  });
 
   const {
     prompt,
@@ -96,7 +146,7 @@ export default function PromptInput(props: PromptInputProps) {
     resetHistoryNavigation,
     selectPreviousHistory,
     selectNextHistory,
-  } = promptState
+  } = promptState;
 
   const {
     attachments,
@@ -118,72 +168,72 @@ export default function PromptInput(props: PromptInputProps) {
     setPrompt,
     getTextarea: () => textareaRef ?? null,
     disabled: () => Boolean(props.disabled),
-  })
+  });
 
   createEffect(() => {
-    if (!props.registerPromptInputApi) return
+    if (!props.registerPromptInputApi) return;
     const api: PromptInputApi = {
       insertSelection: (text: string, mode: PromptInsertMode) => {
         if (mode === "code") {
-          insertCodeSelection(text)
+          insertCodeSelection(text);
         } else {
-          insertQuotedSelection(text)
+          insertQuotedSelection(text);
         }
       },
       insertComment: (text: string) => {
-        const normalized = (text ?? "").replace(/\r/g, "").trim()
-        if (!normalized) return
-        insertBlockContent(`${normalized}\n\n`)
+        const normalized = (text ?? "").replace(/\r/g, "").trim();
+        if (!normalized) return;
+        insertBlockContent(`${normalized}\n\n`);
       },
       expandTextAttachment: (attachmentId: string) => {
-        const attachment = attachments().find((a) => a.id === attachmentId)
-        if (!attachment) return
-        handleExpandTextAttachment(attachment)
+        const attachment = attachments().find((a) => a.id === attachmentId);
+        if (!attachment) return;
+        handleExpandTextAttachment(attachment);
       },
       removeAttachment: (attachmentId: string) => {
-        handleRemoveAttachment(attachmentId)
+        handleRemoveAttachment(attachmentId);
       },
       setPromptText: (text: string, opts?: { focus?: boolean }) => {
-        const textarea = textareaRef
+        const textarea = textareaRef;
         if (textarea) {
-          textarea.value = text
-          textarea.dispatchEvent(new Event("input", { bubbles: true }))
+          textarea.value = text;
+          textarea.dispatchEvent(new Event("input", { bubbles: true }));
           if (opts?.focus) {
             try {
-              textarea.focus({ preventScroll: true } as any)
+              textarea.focus({ preventScroll: true } as any);
             } catch {
-              textarea.focus()
+              textarea.focus();
             }
           }
-          return
+          return;
         }
 
-        setPrompt(text)
+        setPrompt(text);
         if (opts?.focus) {
           setTimeout(() => {
-            api.focus()
-          }, 0)
+            api.focus();
+          }, 0);
         }
       },
       focus: () => {
-        const textarea = textareaRef
-        if (!textarea || textarea.disabled) return
+        const textarea = textareaRef;
+        if (!textarea || textarea.disabled) return;
         try {
-          textarea.focus({ preventScroll: true } as any)
+          textarea.focus({ preventScroll: true } as any);
         } catch {
-          textarea.focus()
+          textarea.focus();
         }
       },
-    }
-    const cleanup = props.registerPromptInputApi(api)
+    };
+    const cleanup = props.registerPromptInputApi(api);
     onCleanup(() => {
       if (typeof cleanup === "function") {
-        cleanup()
+        cleanup();
       }
-    })
-  })
+    });
+  });
 
-  const instanceAgents = () => agents().get(props.instanceId) || []
+  const instanceAgents = () => agents().get(props.instanceId) || [];
 
   const promptPicker = usePromptPicker({
     instanceId: () => props.instanceId,
@@ -194,7 +244,7 @@ export default function PromptInput(props: PromptInputProps) {
     getTextarea: () => textareaRef ?? null,
     instanceAgents,
     commands: () => getCommands(props.instanceId),
-  })
+  });
 
   const {
     showPicker,
@@ -209,53 +259,53 @@ export default function PromptInput(props: PromptInputProps) {
     handleInput,
     handlePickerSelect,
     handlePickerClose,
-  } = promptPicker
+  } = promptPicker;
 
   createEffect(
     on(
       draftLoadedNonce,
       () => {
         // Session switch resets (picker/counters/ignored positions) stay in the component.
-        setIgnoredAtPositions(new Set<number>())
-        setShowPicker(false)
-        setPickerMode("mention")
-        setAtPosition(null)
-        setSearchQuery("")
+        setIgnoredAtPositions(new Set<number>());
+        setShowPicker(false);
+        setPickerMode("mention");
+        setAtPosition(null);
+        setSearchQuery("");
 
-        syncAttachmentCounters(prompt())
+        syncAttachmentCounters(prompt());
       },
       { defer: true },
     ),
-  )
+  );
 
   const isCoarsePointer = () => {
-    if (typeof window === "undefined") return false
-    return Boolean(window.matchMedia?.("(pointer: coarse)")?.matches)
-  }
+    if (typeof window === "undefined") return false;
+    return Boolean(window.matchMedia?.("(pointer: coarse)")?.matches);
+  };
 
   createEffect(() => {
     // Scope global "type-to-focus" behavior to the active, visible prompt only.
-    if (typeof document === "undefined") return
-    if (isCoarsePointer()) return
-    if (props.isActive === false) return
-    if (props.disabled) return
+    if (typeof document === "undefined") return;
+    if (isCoarsePointer()) return;
+    if (props.isActive === false) return;
+    if (props.disabled) return;
 
     const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      const activeElement = document.activeElement as HTMLElement | null
-      const targetElement = e.target instanceof HTMLElement ? e.target : null
+      const activeElement = document.activeElement as HTMLElement | null;
+      const targetElement = e.target instanceof HTMLElement ? e.target : null;
 
       const isEditableElement = (element: HTMLElement | null) =>
         element?.tagName === "INPUT" ||
         element?.tagName === "TEXTAREA" ||
         element?.tagName === "SELECT" ||
-        Boolean(element?.isContentEditable)
+        Boolean(element?.isContentEditable);
 
       const isInteractiveElement = (element: HTMLElement | null) =>
         Boolean(
           element?.closest(
             'button, a[href], summary, [role="button"], [role="link"], [role="menuitem"], [role="option"], [role="tab"], [tabindex]:not([tabindex="-1"])',
           ),
-        )
+        );
 
       if (
         isEditableElement(activeElement) ||
@@ -263,269 +313,403 @@ export default function PromptInput(props: PromptInputProps) {
         isInteractiveElement(activeElement) ||
         isInteractiveElement(targetElement)
       ) {
-        return
+        return;
       }
 
-      const isModifierKey = e.ctrlKey || e.metaKey || e.altKey
-      if (isModifierKey) return
+      const isModifierKey = e.ctrlKey || e.metaKey || e.altKey;
+      if (isModifierKey) return;
 
       const isSpecialKey =
         e.key === "Tab" ||
         e.key === "Enter" ||
         e.key.startsWith("Arrow") ||
         e.key === "Backspace" ||
-        e.key === "Delete"
-      if (isSpecialKey) return
+        e.key === "Delete";
+      if (isSpecialKey) return;
 
-      const textarea = textareaRef
-      if (!textarea || textarea.disabled) return
+      const textarea = textareaRef;
+      if (!textarea || textarea.disabled) return;
 
       // In session cache mode inactive panes are display:none; avoid stealing focus.
-      if (textarea.offsetParent === null) return
+      if (textarea.offsetParent === null) return;
 
       if (e.key.length === 1) {
-        textarea.focus()
+        textarea.focus();
       }
-    }
+    };
 
-    document.addEventListener("keydown", handleGlobalKeyDown)
+    document.addEventListener("keydown", handleGlobalKeyDown);
     onCleanup(() => {
-      document.removeEventListener("keydown", handleGlobalKeyDown)
-    })
-  })
+      document.removeEventListener("keydown", handleGlobalKeyDown);
+    });
+  });
+
+  /**
+   * Computes the maximum allowed height for the prompt input based on layout.
+   * The max height is the distance from the container's top to the toolbar's bottom edge.
+   * Falls back to DEFAULT_EXPANDED_HEIGHT if elements are not found.
+   */
+  function computeMaxHeight(): number {
+    if (!containerRef) return DEFAULT_EXPANDED_HEIGHT;
+
+    const containerRect = containerRef.getBoundingClientRect();
+    const containerBottom = containerRect.bottom;
+
+    // Find the toolbar by looking for the session-toolbar element or AppBar
+    const toolbar =
+      document.querySelector('[data-session-toolbar="true"]') ||
+      document.querySelector(".session-toolbar") ||
+      containerRef.closest(".session-view")?.querySelector(".session-toolbar");
+
+    if (toolbar) {
+      const toolbarRect = toolbar.getBoundingClientRect();
+      const availableHeight = containerBottom - toolbarRect.bottom;
+      // Subtract some padding to keep the input from touching the toolbar
+      const padding = 16;
+      return Math.max(DEFAULT_INPUT_HEIGHT, availableHeight - padding);
+    }
+
+    // Fallback: use viewport-based calculation
+    const viewportHeight = window.innerHeight;
+    const maxFromViewport = viewportHeight - 100;
+    return Math.max(DEFAULT_EXPANDED_HEIGHT, maxFromViewport);
+  }
+
+  /**
+   * Handles the start of a resize drag operation.
+   * Captures the pointer and initializes the starting Y position.
+   */
+  function handleResizeStart(event: PointerEvent) {
+    event.preventDefault();
+    setIsResizing(true);
+
+    // Capture the pointer to ensure we receive events even if cursor leaves the handle
+    const target = event.currentTarget as HTMLElement;
+    try {
+      target.setPointerCapture(event.pointerId);
+    } catch {
+      // Pointer capture not supported, continue without it
+    }
+
+    // Store initial values for the drag operation
+    const startY = event.clientY;
+    const startHeight = inputHeight();
+    const computedMax = computeMaxHeight();
+
+    /**
+     * Handles pointer movement during resize drag.
+     * Calculates new height based on drag direction and clamps to bounds.
+     * Dragging up increases height (makes input taller).
+     */
+    function handlePointerMove(moveEvent: PointerEvent) {
+      moveEvent.preventDefault();
+      const deltaY = startY - moveEvent.clientY;
+      const newHeight = Math.max(
+        DEFAULT_INPUT_HEIGHT,
+        Math.min(computedMax, startHeight + deltaY),
+      );
+      setInputHeight(newHeight);
+    }
+
+    /**
+     * Handles the end of a resize drag operation.
+     * Releases pointer capture and removes event listeners.
+     */
+    function handlePointerUp(upEvent: PointerEvent) {
+      upEvent.preventDefault();
+      setIsResizing(false);
+      try {
+        target.releasePointerCapture(upEvent.pointerId);
+      } catch {
+        // Pointer capture not supported, continue without it
+      }
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+      document.removeEventListener("pointercancel", handlePointerUp);
+      // Restore focus to textarea after resize
+      textareaRef?.focus();
+    }
+
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+    document.addEventListener("pointercancel", handlePointerUp);
+  }
 
   async function handleSend() {
-    const text = prompt().trim()
-    const currentAttachments = attachments()
-    if (props.disabled || (!text && currentAttachments.length === 0)) return
+    const text = prompt().trim();
+    const currentAttachments = attachments();
+    if (props.disabled || (!text && currentAttachments.length === 0)) return;
 
-    const isShellMode = mode() === "shell"
+    const isShellMode = mode() === "shell";
 
     // Slash command routing (match OpenCode TUI): only run if the command exists.
-    const isSlashCandidate = !isShellMode && text.startsWith("/")
-    const firstSpace = isSlashCandidate ? text.indexOf(" ") : -1
-    const commandToken = isSlashCandidate ? (firstSpace === -1 ? text : text.slice(0, firstSpace)) : ""
-    const commandName = isSlashCandidate ? commandToken.slice(1) : ""
-    const commandArgs = isSlashCandidate ? (firstSpace === -1 ? "" : text.slice(firstSpace + 1).trimStart()) : ""
+    const isSlashCandidate = !isShellMode && text.startsWith("/");
+    const firstSpace = isSlashCandidate ? text.indexOf(" ") : -1;
+    const commandToken = isSlashCandidate
+      ? firstSpace === -1
+        ? text
+        : text.slice(0, firstSpace)
+      : "";
+    const commandName = isSlashCandidate ? commandToken.slice(1) : "";
+    const commandArgs = isSlashCandidate
+      ? firstSpace === -1
+        ? ""
+        : text.slice(firstSpace + 1).trimStart()
+      : "";
 
     const isKnownSlashCommand =
       isSlashCandidate &&
       commandName.length > 0 &&
-      getCommands(props.instanceId).some((cmd) => cmd.name === commandName)
+      getCommands(props.instanceId).some((cmd) => cmd.name === commandName);
 
-    const resolvedCommandArgs = isKnownSlashCommand ? resolvePastedPlaceholders(commandArgs, currentAttachments) : ""
+    const resolvedCommandArgs = isKnownSlashCommand
+      ? resolvePastedPlaceholders(commandArgs, currentAttachments)
+      : "";
     const resolvedPrompt = isKnownSlashCommand
       ? resolvedCommandArgs
         ? `${commandToken} ${resolvedCommandArgs}`
         : commandToken
-      : resolvePastedPlaceholders(text, currentAttachments)
-    const historyEntry = resolvedPrompt
+      : resolvePastedPlaceholders(text, currentAttachments);
+    const historyEntry = resolvedPrompt;
 
-    const refreshHistory = () => recordHistoryEntry(historyEntry)
+    const refreshHistory = () => recordHistoryEntry(historyEntry);
 
-    setExpandState("normal")
-    clearPrompt()
-    clearHistoryDraft()
-    setMode("normal")
+    // Reset the input height to the default size before sending.
+    setInputHeight(DEFAULT_INPUT_HEIGHT);
+    clearPrompt();
+    clearHistoryDraft();
+    setMode("normal");
 
     // Ignore attachments for slash commands, but keep them for next prompt.
     if (!isKnownSlashCommand) {
-      clearAttachments(props.instanceId, props.sessionId)
-      syncAttachmentCounters("")
-      setIgnoredAtPositions(new Set<number>())
+      clearAttachments(props.instanceId, props.sessionId);
+      syncAttachmentCounters("");
+      setIgnoredAtPositions(new Set<number>());
     } else {
-      const consumedIds = getConsumedPastedTextAttachmentIds(commandArgs, currentAttachments)
+      const consumedIds = getConsumedPastedTextAttachmentIds(
+        commandArgs,
+        currentAttachments,
+      );
       for (const attachmentId of consumedIds) {
-        removeAttachment(props.instanceId, props.sessionId, attachmentId)
+        removeAttachment(props.instanceId, props.sessionId, attachmentId);
       }
-      syncAttachmentCounters("")
-      setIgnoredAtPositions(new Set<number>())
+      syncAttachmentCounters("");
+      setIgnoredAtPositions(new Set<number>());
     }
-
-    clearHistoryDraft()
-
     if (isKnownSlashCommand) {
       // Record attempted slash commands even if execution fails.
-      void refreshHistory()
+      void refreshHistory();
     }
 
     try {
       if (isShellMode) {
         if (props.onRunShell) {
-          await props.onRunShell(resolvedPrompt)
+          await props.onRunShell(resolvedPrompt);
         } else {
-          await props.onSend(resolvedPrompt, [])
+          await props.onSend(resolvedPrompt, []);
         }
       } else if (isKnownSlashCommand) {
-        await executeCustomCommand(props.instanceId, props.sessionId, commandName, resolvedCommandArgs)
+        await executeCustomCommand(
+          props.instanceId,
+          props.sessionId,
+          commandName,
+          resolvedCommandArgs,
+        );
       } else {
-        await props.onSend(resolvedPrompt, currentAttachments)
+        await props.onSend(resolvedPrompt, currentAttachments);
       }
       if (!isKnownSlashCommand) {
-        void refreshHistory()
+        void refreshHistory();
       }
     } catch (error) {
-      log.error("Failed to send message:", error)
+      log.error("Failed to send message:", error);
       showAlertDialog(t("promptInput.send.errorFallback"), {
         title: t("promptInput.send.errorTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
-      })
+      });
     } finally {
-      textareaRef?.focus()
+      textareaRef?.focus();
     }
   }
 
   function handleAbort() {
-    if (!props.onAbortSession || !props.isSessionBusy) return
-    void props.onAbortSession()
+    if (!props.onAbortSession || !props.isSessionBusy) return;
+    void props.onAbortSession();
   }
 
-  function handleExpandToggle(nextState: "normal" | "expanded") {
-    setExpandState(nextState)
-    // Keep focus on textarea
-    textareaRef?.focus()
+  /**
+   * Handles expand/shrink button clicks.
+   * When expand=true, sets height to default expanded height (clamped to max).
+   * When expand=false, resets height to default/minimum height.
+   * Preserves textarea focus after the operation.
+   */
+  function handleExpandToggle(expand: boolean) {
+    if (expand) {
+      const computedMax = computeMaxHeight();
+      setInputHeight(Math.min(DEFAULT_EXPANDED_HEIGHT, computedMax));
+    } else {
+      setInputHeight(DEFAULT_INPUT_HEIGHT);
+    }
+    // Keep focus on textarea after toggling
+    textareaRef?.focus();
   }
 
   function handleClearPrompt() {
-    clearPrompt()
-    clearHistoryDraft()
-    resetHistoryNavigation()
-    setShowPicker(false)
-    setPickerMode("mention")
-    setAtPosition(null)
-    setSearchQuery("")
-    setIgnoredAtPositions(new Set<number>())
-    syncAttachmentCounters("")
-    textareaRef?.focus()
+    clearPrompt();
+    clearHistoryDraft();
+    resetHistoryNavigation();
+    setShowPicker(false);
+    setPickerMode("mention");
+    setAtPosition(null);
+    setSearchQuery("");
+    setIgnoredAtPositions(new Set<number>());
+    syncAttachmentCounters("");
+    textareaRef?.focus();
   }
 
   async function handleAttachFiles() {
-    if (props.disabled) return
+    if (props.disabled) return;
     if (isDesktopHost() && isLocalWindow()) {
-      fileInputRef?.click()
-      return
+      fileInputRef?.click();
+      return;
     }
-    setIsFileBrowserOpen(true)
+    setIsFileBrowserOpen(true);
   }
 
-  async function handleFileBrowserSelect(path: string, entry?: FileSystemEntry) {
-    if (props.disabled) return
-    if (typeof entry?.size === "number" && entry.size > MAX_READABLE_PICKED_FILE_BYTES) {
+  async function handleFileBrowserSelect(
+    path: string,
+    entry?: FileSystemEntry,
+  ) {
+    if (props.disabled) return;
+    if (
+      typeof entry?.size === "number" &&
+      entry.size > MAX_READABLE_PICKED_FILE_BYTES
+    ) {
       showAlertDialog(t("promptInput.attachFiles.tooLarge.one"), {
         title: t("promptInput.attachFiles.skipped.title"),
         variant: "warning",
-      })
-      textareaRef?.focus()
-      return
+      });
+      textareaRef?.focus();
+      return;
     }
     try {
-      const filePath = entry?.path ?? path
-      const displayPath = entry?.absolutePath ?? path
-      const response = await serverApi.readFileSystemFile(filePath, { encoding: "base64" })
-      handleFilePathAttachment(displayPath, response.contents, { encoding: response.encoding })
-      setIsFileBrowserOpen(false)
+      const filePath = entry?.path ?? path;
+      const displayPath = entry?.absolutePath ?? path;
+      const response = await serverApi.readFileSystemFile(filePath, {
+        encoding: "base64",
+      });
+      handleFilePathAttachment(displayPath, response.contents, {
+        encoding: response.encoding,
+      });
+      setIsFileBrowserOpen(false);
     } catch (error) {
-      log.error("Failed to attach selected file:", error)
+      log.error("Failed to attach selected file:", error);
       showAlertDialog(error instanceof Error ? error.message : String(error), {
         title: t("promptInput.attachFiles.errorTitle"),
         variant: "error",
-      })
+      });
     } finally {
-      textareaRef?.focus()
+      textareaRef?.focus();
     }
   }
 
   function handleFileInputChange(event: Event) {
-    const input = event.currentTarget as HTMLInputElement
+    const input = event.currentTarget as HTMLInputElement;
     if (props.disabled) {
-      input.value = ""
-      return
+      input.value = "";
+      return;
     }
-    handleFileSelection(input.files)
-    input.value = ""
+    handleFileSelection(input.files);
+    input.value = "";
   }
 
   function insertBlockContent(block: string) {
-    const textarea = textareaRef
-    const current = prompt()
-    const start = textarea ? textarea.selectionStart : current.length
-    const end = textarea ? textarea.selectionEnd : current.length
-    const before = current.substring(0, start)
-    const after = current.substring(end)
-    const needsLeading = before.length > 0 && !before.endsWith("\n") ? "\n" : ""
-    const insertion = `${needsLeading}${block}`
-    const nextValue = before + insertion + after
-
-    setPrompt(nextValue)
-    setShowPicker(false)
-    setAtPosition(null)
+    const textarea = textareaRef;
+    const current = prompt();
+    const start = textarea ? textarea.selectionStart : current.length;
+    const end = textarea ? textarea.selectionEnd : current.length;
+    const before = current.substring(0, start);
+    const after = current.substring(end);
+    const needsLeading =
+      before.length > 0 && !before.endsWith("\n") ? "\n" : "";
+    const insertion = `${needsLeading}${block}`;
+    const nextValue = before + insertion + after;
+
+    setPrompt(nextValue);
+    setShowPicker(false);
+    setAtPosition(null);
 
     if (textarea) {
       setTimeout(() => {
-        const cursor = before.length + insertion.length
-        textarea.focus()
-        textarea.setSelectionRange(cursor, cursor)
-      }, 0)
+        const cursor = before.length + insertion.length;
+        textarea.focus();
+        textarea.setSelectionRange(cursor, cursor);
+      }, 0);
     }
   }
 
   function insertQuotedSelection(rawText: string) {
-    const normalized = (rawText ?? "").replace(/\r/g, "").trim()
-    if (!normalized) return
+    const normalized = (rawText ?? "").replace(/\r/g, "").trim();
+    if (!normalized) return;
     const limited =
       normalized.length > SELECTION_INSERT_MAX_LENGTH
         ? normalized.slice(0, SELECTION_INSERT_MAX_LENGTH).trimEnd()
-        : normalized
+        : normalized;
     const lines = limited
       .split(/\n/)
       .map((line) => line.trim())
-      .filter((line) => line.length > 0)
-    if (lines.length === 0) return
+      .filter((line) => line.length > 0);
+    if (lines.length === 0) return;
 
-    const blockquote = lines.map((line) => `> ${line}`).join("\n")
-    if (!blockquote) return
+    const blockquote = lines.map((line) => `> ${line}`).join("\n");
+    if (!blockquote) return;
 
     // End the blockquote with a blank line so the user's next line
     // doesn't get parsed as a lazy continuation of the quote.
-    insertBlockContent(`${blockquote}\n\n`)
+    insertBlockContent(`${blockquote}\n\n`);
   }
 
   function insertCodeSelection(rawText: string) {
-    const normalized = (rawText ?? "").replace(/\r/g, "")
+    const normalized = (rawText ?? "").replace(/\r/g, "");
     const limited =
       normalized.length > SELECTION_INSERT_MAX_LENGTH
         ? normalized.slice(0, SELECTION_INSERT_MAX_LENGTH)
-        : normalized
-    const trimmed = limited.replace(/^\n+/, "").replace(/\n+$/, "")
-    if (!trimmed) return
+        : normalized;
+    const trimmed = limited.replace(/^\n+/, "").replace(/\n+$/, "");
+    if (!trimmed) return;
 
-    const block = "```\n" + trimmed + "\n```\n\n"
-    insertBlockContent(block)
+    const block = "```\n" + trimmed + "\n```\n\n";
+    insertBlockContent(block);
   }
 
-  const canStop = () => Boolean(props.isSessionBusy && props.onAbortSession)
+  const canStop = () => Boolean(props.isSessionBusy && props.onAbortSession);
 
-  const hasHistory = () => history().length > 0
-  const canHistoryGoPrevious = () => hasHistory() && (historyIndex() === -1 || historyIndex() < history().length - 1)
-  const canHistoryGoNext = () => historyIndex() >= 0
+  const hasHistory = () => history().length > 0;
+  const canHistoryGoPrevious = () =>
+    hasHistory() &&
+    (historyIndex() === -1 || historyIndex() < history().length - 1);
+  const canHistoryGoNext = () => historyIndex() >= 0;
 
   const canSend = () => {
-    if (props.disabled) return false
-    const hasText = prompt().trim().length > 0
-    if (mode() === "shell") return hasText
-    return hasText || attachments().length > 0
-  }
+    if (props.disabled) return false;
+    const hasText = prompt().trim().length > 0;
+    if (mode() === "shell") return hasText;
+    return hasText || attachments().length > 0;
+  };
 
-  const canClearPrompt = () => prompt().length > 0
+  const canClearPrompt = () => prompt().length > 0;
 
   const shellHint = () =>
     mode() === "shell"
       ? { key: "Esc", text: t("promptInput.hints.shell.exit") }
-      : { key: "!", text: t("promptInput.hints.shell.enable") }
-  const commandHint = () => ({ key: "/", text: t("promptInput.hints.commands") })
+      : { key: "!", text: t("promptInput.hints.shell.enable") };
+  const commandHint = () => ({
+    key: "/",
+    text: t("promptInput.hints.commands"),
+  });
 
-  const submitOnEnter = () => preferences().promptSubmitOnEnter
+  const submitOnEnter = () => preferences().promptSubmitOnEnter;
 
   const handleKeyDown = usePromptKeyDown({
     getTextarea: () => textareaRef ?? null,
@@ -538,73 +722,104 @@ export default function PromptInput(props: PromptInputProps) {
     ignoredAtPositions,
     setIgnoredAtPositions,
     getAttachments: attachments,
-    removeAttachment: (attachmentId) => removeAttachment(props.instanceId, props.sessionId, attachmentId),
+    removeAttachment: (attachmentId) =>
+      removeAttachment(props.instanceId, props.sessionId, attachmentId),
     submitOnEnter,
     onSend: () => void handleSend(),
     selectPreviousHistory: (force) =>
-      selectPreviousHistory({ force, isPickerOpen: showPicker(), getTextarea: () => textareaRef ?? null }),
+      selectPreviousHistory({
+        force,
+        isPickerOpen: showPicker(),
+        getTextarea: () => textareaRef ?? null,
+      }),
     selectNextHistory: (force) =>
-      selectNextHistory({ force, isPickerOpen: showPicker(), getTextarea: () => textareaRef ?? null }),
-  })
-
-  const shouldShowOverlay = () => prompt().length === 0
+      selectNextHistory({
+        force,
+        isPickerOpen: showPicker(),
+        getTextarea: () => textareaRef ?? null,
+      }),
+  });
+
+  const shouldShowOverlay = () => prompt().length === 0;
   const voiceInput = usePromptVoiceInput({
     prompt,
     setPrompt,
     getTextarea: () => textareaRef ?? null,
     enabled: () => preferences().showPromptVoiceInput,
     disabled: () => Boolean(props.disabled),
-  })
+  });
   const showVoiceInput = () =>
     preferences().showPromptVoiceInput &&
-    (voiceInput.canUseVoiceInput() || voiceInput.isRecording() || voiceInput.isTranscribing())
-  const conversationModeEnabled = () => isConversationModeEnabled(props.instanceId)
-  const showConversationToggle = () => showVoiceInput() || conversationModeEnabled()
-  const canToggleConversationMode = () => canUseConversationMode()
+    (voiceInput.canUseVoiceInput() ||
+      voiceInput.isRecording() ||
+      voiceInput.isTranscribing());
+  const conversationModeEnabled = () =>
+    isConversationModeEnabled(props.instanceId);
+  const showConversationToggle = () =>
+    showVoiceInput() || conversationModeEnabled();
+  const canToggleConversationMode = () => canUseConversationMode();
   const conversationModeButtonTitle = () =>
     conversationModeEnabled()
       ? t("promptInput.conversationMode.disable.title")
-      : t("promptInput.conversationMode.enable.title")
+      : t("promptInput.conversationMode.enable.title");
 
-  const instance = () => getActiveInstance()
+  const instance = () => getActiveInstance();
 
-  let voiceButtonPressed = false
+  let voiceButtonPressed = false;
 
   const beginVoicePress = (event?: PointerEvent | KeyboardEvent) => {
-    if (voiceButtonPressed || props.disabled || voiceInput.isTranscribing() || !voiceInput.canUseVoiceInput()) return
-    voiceButtonPressed = true
+    if (
+      voiceButtonPressed ||
+      props.disabled ||
+      voiceInput.isTranscribing() ||
+      !voiceInput.canUseVoiceInput()
+    )
+      return;
+    voiceButtonPressed = true;
     // Treat a mic press as barge-in: stop any active assistant speech before listening.
-    clearConversationPlaybackForInstance(props.instanceId)
+    clearConversationPlaybackForInstance(props.instanceId);
 
     if (event instanceof PointerEvent) {
-      const target = event.currentTarget
+      const target = event.currentTarget;
       if (target instanceof HTMLElement) {
         try {
-          target.setPointerCapture(event.pointerId)
+          target.setPointerCapture(event.pointerId);
         } catch {
           // no-op
         }
       }
     }
 
-    void voiceInput.startRecording()
-  }
+    void voiceInput.startRecording();
+  };
 
   const endVoicePress = () => {
-    if (!voiceButtonPressed) return
-    voiceButtonPressed = false
-    voiceInput.stopRecording()
-  }
+    if (!voiceButtonPressed) return;
+    voiceButtonPressed = false;
+    voiceInput.stopRecording();
+  };
 
   return (
     <div class="prompt-input-container">
+      {/* Resize handle at the top edge of the input container */}
+      <div
+        class={`prompt-resize-handle ${isResizing() ? "is-resizing" : ""}`}
+        onPointerDown={handleResizeStart}
+        aria-label={t("promptInput.resizeHandle.ariaLabel")}
+        title={t("promptInput.resizeHandle.title")}
+      />
       <div
+        ref={containerRef}
         class={`prompt-input-wrapper relative ${isDragging() ? "border-2" : ""}`}
-        style={
-          isDragging()
-            ? "border-color: var(--accent-primary); background-color: rgba(0, 102, 255, 0.05);"
-            : ""
-        }
+        style={{
+          height: `${inputHeight()}px`,
+          ...(isDragging()
+            ? {
+                "border-color": "var(--accent-primary)",
+                "background-color": "rgba(0, 102, 255, 0.05)",
+              }
+            : {}),
+        }}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
@@ -617,8 +832,8 @@ export default function PromptInput(props: PromptInputProps) {
               onClose={handlePickerClose}
               onSelect={handlePickerSelect}
               onSubmitWithoutSelection={() => {
-                handlePickerClose()
-                void handleSend()
+                handlePickerClose();
+                void handleSend();
               }}
               agents={instanceAgents()}
               commands={getCommands(props.instanceId)}
@@ -631,45 +846,28 @@ export default function PromptInput(props: PromptInputProps) {
         </Show>
 
         <div class="prompt-input-main flex flex-1 flex-col">
-          <div class={`prompt-input-field-container ${expandState() === "expanded" ? "is-expanded" : ""}`}>
-
-            <div class={`prompt-input-field ${expandState() === "expanded" ? "is-expanded" : ""}`}>
+          <div class="prompt-input-field-container">
+            <div class="prompt-input-field">
               <textarea
                 ref={textareaRef}
-                class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""} ${expandState() === "expanded" ? "is-expanded" : ""}`}
+                class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""}`}
                 dir="auto"
                 placeholder={getPlaceholder()}
                 value={prompt()}
                 onInput={handleInput}
                 onKeyDown={handleKeyDown}
                 onPaste={handlePaste}
-                onFocus={() => setIsFocused(true)}
-                onBlur={() => setIsFocused(false)}
                 disabled={props.disabled}
-                rows={expandState() === "expanded" ? (props.compactLayout ? 10 : 15) : 3}
+                rows={3}
                 spellcheck={false}
                 autocorrect="off"
                 autoCapitalize="off"
                 autocomplete="off"
               />
-              <button
-                type="button"
-                class="prompt-clear-button prompt-clear-button-inline"
-                onClick={handleClearPrompt}
-                disabled={!canClearPrompt()}
-                aria-label={t("promptInput.clear.ariaLabel")}
-                title={t("promptInput.clear.title")}
-              >
-                <X class="h-4 w-4" aria-hidden="true" />
-              </button>
-              <div class="prompt-expand-button-inline">
-                <ExpandButton
-                  expandState={expandState}
-                  onToggleExpand={handleExpandToggle}
-                />
-              </div>
               <Show when={shouldShowOverlay()}>
-                <div class={`prompt-input-overlay keyboard-hints ${mode() === "shell" ? "shell-mode" : ""}`}>
+                <div
+                  class={`prompt-input-overlay keyboard-hints ${mode() === "shell" ? "shell-mode" : ""}`}
+                >
                   <Show
                     when={props.escapeInDebounce}
                     fallback={
@@ -679,39 +877,54 @@ export default function PromptInput(props: PromptInputProps) {
                             when={submitOnEnter()}
                             fallback={
                               <>
-                                <Kbd>Enter</Kbd> {t("promptInput.overlay.newLine")} • <Kbd shortcut="cmd+enter" /> {t("promptInput.overlay.send")}
+                                <Kbd>Enter</Kbd>{" "}
+                                {t("promptInput.overlay.newLine")} •{" "}
+                                <Kbd shortcut="cmd+enter" />{" "}
+                                {t("promptInput.overlay.send")}
                               </>
                             }
                           >
                             <>
-                              <Kbd>Enter</Kbd> {t("promptInput.overlay.send")} • <Kbd shortcut="cmd+enter" /> {t("promptInput.overlay.newLine")}
+                              <Kbd>Enter</Kbd> {t("promptInput.overlay.send")} •{" "}
+                              <Kbd shortcut="cmd+enter" />{" "}
+                              {t("promptInput.overlay.newLine")}
                             </>
-                          </Show>
-                          {" "}• <Kbd>↑↓</Kbd> {t("promptInput.overlay.history")}
+                          </Show>{" "}
+                          • <Kbd>↑↓</Kbd> {t("promptInput.overlay.history")}
                         </span>
                         <Show when={attachments().length > 0}>
-                          <span class="prompt-overlay-text prompt-overlay-muted">{t("promptInput.overlay.attachments", { count: attachments().length })}</span>
+                          <span class="prompt-overlay-text prompt-overlay-muted">
+                            {t("promptInput.overlay.attachments", {
+                              count: attachments().length,
+                            })}
+                          </span>
                         </Show>
                         <span class="prompt-overlay-text">
                           • <Kbd>{shellHint().key}</Kbd> {shellHint().text}
                         </span>
                         <Show when={mode() !== "shell"}>
                           <span class="prompt-overlay-text">
-                            • <Kbd>{commandHint().key}</Kbd> {commandHint().text}
+                            • <Kbd>{commandHint().key}</Kbd>{" "}
+                            {commandHint().text}
                           </span>
                         </Show>
                         <Show when={mode() === "shell"}>
-                          <span class="prompt-overlay-shell-active">{t("promptInput.overlay.shellModeActive")}</span>
+                          <span class="prompt-overlay-shell-active">
+                            {t("promptInput.overlay.shellModeActive")}
+                          </span>
                         </Show>
                       </>
                     }
                   >
                     <>
                       <span class="prompt-overlay-text prompt-overlay-warning">
-                        {t("promptInput.overlay.press")} <Kbd>Esc</Kbd> {t("promptInput.overlay.againToAbort")}
+                        {t("promptInput.overlay.press")} <Kbd>Esc</Kbd>{" "}
+                        {t("promptInput.overlay.againToAbort")}
                       </span>
                       <Show when={mode() === "shell"}>
-                        <span class="prompt-overlay-shell-active">{t("promptInput.overlay.shellModeActive")}</span>
+                        <span class="prompt-overlay-shell-active">
+                          {t("promptInput.overlay.shellModeActive")}
+                        </span>
                       </Show>
                     </>
                   </Show>
@@ -729,36 +942,47 @@ export default function PromptInput(props: PromptInputProps) {
                   type="button"
                   class={`prompt-voice-button prompt-nav-voice-button ${voiceInput.isRecording() ? "is-recording" : ""}`}
                   onPointerDown={(event) => {
-                    event.preventDefault()
-                    beginVoicePress(event)
+                    event.preventDefault();
+                    beginVoicePress(event);
                   }}
                   onPointerUp={(event) => {
-                    event.preventDefault()
-                    endVoicePress()
+                    event.preventDefault();
+                    endVoicePress();
                   }}
                   onPointerCancel={() => endVoicePress()}
                   onLostPointerCapture={() => endVoicePress()}
                   onKeyDown={(event) => {
-                    if (event.repeat) return
-                    if (event.key !== " " && event.key !== "Enter") return
-                    event.preventDefault()
-                    beginVoicePress(event)
+                    if (event.repeat) return;
+                    if (event.key !== " " && event.key !== "Enter") return;
+                    event.preventDefault();
+                    beginVoicePress(event);
                   }}
                   onKeyUp={(event) => {
-                    if (event.key !== " " && event.key !== "Enter") return
-                    event.preventDefault()
-                    endVoicePress()
+                    if (event.key !== " " && event.key !== "Enter") return;
+                    event.preventDefault();
+                    endVoicePress();
                   }}
                   onBlur={() => endVoicePress()}
-                  disabled={!voiceInput.isRecording() && (props.disabled || voiceInput.isTranscribing() || !voiceInput.canUseVoiceInput())}
+                  disabled={
+                    !voiceInput.isRecording() &&
+                    (props.disabled ||
+                      voiceInput.isTranscribing() ||
+                      !voiceInput.canUseVoiceInput())
+                  }
                   aria-label={voiceInput.buttonTitle()}
                   title={voiceInput.buttonTitle()}
                 >
                   <Show
                     when={voiceInput.isRecording()}
                     fallback={
-                      <Show when={voiceInput.isTranscribing()} fallback={<Mic class="h-4 w-4" aria-hidden="true" />}>
-                        <Loader2 class="h-4 w-4 animate-spin" aria-hidden="true" />
+                      <Show
+                        when={voiceInput.isTranscribing()}
+                        fallback={<Mic class="h-4 w-4" aria-hidden="true" />}
+                      >
+                        <Loader2
+                          class="h-4 w-4 animate-spin"
+                          aria-hidden="true"
+                        />
                       </Show>
                     }
                   >
@@ -771,7 +995,9 @@ export default function PromptInput(props: PromptInputProps) {
                   type="button"
                   class={`prompt-voice-button prompt-nav-voice-button prompt-conversation-button ${conversationModeEnabled() ? "is-active" : ""}`}
                   onClick={() => toggleConversationMode(props.instanceId)}
-                  disabled={!conversationModeEnabled() && !canToggleConversationMode()}
+                  disabled={
+                    !conversationModeEnabled() && !canToggleConversationMode()
+                  }
                   aria-pressed={conversationModeEnabled()}
                   aria-label={conversationModeButtonTitle()}
                   title={conversationModeButtonTitle()}
@@ -798,8 +1024,23 @@ export default function PromptInput(props: PromptInputProps) {
               >
                 <Paperclip class="h-4 w-4" aria-hidden="true" />
               </button>
+              <button
+                type="button"
+                class="prompt-clear-button"
+                onClick={handleClearPrompt}
+                disabled={!canClearPrompt()}
+                aria-label={t("promptInput.clear.ariaLabel")}
+                title={t("promptInput.clear.title")}
+              >
+                <X class="h-4 w-4" aria-hidden="true" />
+              </button>
             </div>
             <div class="prompt-nav-column prompt-nav-column-right">
+              <ExpandButton
+                currentHeight={inputHeight}
+                defaultHeight={() => DEFAULT_INPUT_HEIGHT}
+                onToggleExpand={handleExpandToggle}
+              />
               <Show when={hasHistory()}>
                 <button
                   type="button"
@@ -845,7 +1086,12 @@ export default function PromptInput(props: PromptInputProps) {
             aria-label={t("promptInput.stopSession.ariaLabel")}
             title={t("promptInput.stopSession.title")}
           >
-            <svg class="stop-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <svg
+              class="stop-icon"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
               <rect x="4" y="4" width="12" height="12" rx="2" />
             </svg>
           </button>
@@ -860,9 +1106,23 @@ export default function PromptInput(props: PromptInputProps) {
               when={mode() === "shell"}
               fallback={<span class="send-icon">▶</span>}
             >
-              <svg class="shell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 8l5 4-5 4" />
-                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h6" />
+              <svg
+                class="shell-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5 8l5 4-5 4"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M13 16h6"
+                />
               </svg>
             </Show>
           </button>
@@ -874,12 +1134,12 @@ export default function PromptInput(props: PromptInputProps) {
         mode="files"
         title={t("promptInput.attachFiles.dialogTitle")}
         onClose={() => {
-          setIsFileBrowserOpen(false)
-          textareaRef?.focus()
+          setIsFileBrowserOpen(false);
+          textareaRef?.focus();
         }}
         onSelect={(path, entry) => void handleFileBrowserSelect(path, entry)}
         initialPath={props.instanceFolder}
       />
     </div>
-  )
+  );
 }
diff --git a/packages/ui/src/components/prompt-input/types.ts b/packages/ui/src/components/prompt-input/types.ts
index 4f2bcffde..34aac5f1c 100644
--- a/packages/ui/src/components/prompt-input/types.ts
+++ b/packages/ui/src/components/prompt-input/types.ts
@@ -1,7 +1,6 @@
 import type { Attachment } from "../../types/attachment"
 
 export type PromptMode = "normal" | "shell"
-export type ExpandState = "normal" | "expanded"
 export type PickerMode = "mention" | "command"
 export type PromptInsertMode = "quote" | "code"
 
@@ -22,8 +21,6 @@ export interface PromptInputProps {
   // Used to scope global "type-to-focus" behavior.
   isActive?: boolean
 
-  // Phone/tablet layouts should keep the expanded prompt more compact.
-  compactLayout?: boolean
   onSend: (prompt: string, attachments: Attachment[]) => Promise<void>
   onRunShell?: (command: string) => Promise<void>
   disabled?: boolean
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index f151ca5e7..cb3f98cb4 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -447,7 +447,6 @@ export const SessionView: Component<SessionViewProps> = (props) => {
               instanceFolder={props.instanceFolder}
               sessionId={activeSession.id}
               isActive={props.isActive}
-              compactLayout={props.compactPromptLayout}
               onSend={handleSendMessage}
               onRunShell={handleRunShell}
               escapeInDebounce={props.escapeInDebounce}
diff --git a/packages/ui/src/lib/i18n/messages/en/messaging.ts b/packages/ui/src/lib/i18n/messages/en/messaging.ts
index 63e96fe4c..bf7e6301b 100644
--- a/packages/ui/src/lib/i18n/messages/en/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/en/messaging.ts
@@ -182,4 +182,6 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "Microphone access was denied by macOS.",
   "promptInput.voiceInput.error.unsupported": "Voice input is not supported in this browser.",
   "promptInput.voiceInput.error.transcribe": "Unable to transcribe the recorded audio.",
+  "promptInput.resizeHandle.ariaLabel": "Resize input height",
+  "promptInput.resizeHandle.title": "Drag to resize input height",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/es/messaging.ts b/packages/ui/src/lib/i18n/messages/es/messaging.ts
index 496f1da91..adcc9f00a 100644
--- a/packages/ui/src/lib/i18n/messages/es/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/es/messaging.ts
@@ -184,4 +184,6 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS denegó el acceso al micrófono.",
   "promptInput.voiceInput.error.unsupported": "La entrada de voz no es compatible con este navegador.",
   "promptInput.voiceInput.error.transcribe": "No se pudo transcribir el audio grabado.",
+  "promptInput.resizeHandle.ariaLabel": "Redimensionar altura de entrada",
+  "promptInput.resizeHandle.title": "Arrastra para redimensionar la altura",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/fr/messaging.ts b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
index 42dd878b9..d979e08bb 100644
--- a/packages/ui/src/lib/i18n/messages/fr/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
@@ -184,4 +184,6 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS a refusé l'accès au microphone.",
   "promptInput.voiceInput.error.unsupported": "La saisie vocale n'est pas prise en charge dans ce navigateur.",
   "promptInput.voiceInput.error.transcribe": "Impossible de transcrire l'audio enregistré.",
+  "promptInput.resizeHandle.ariaLabel": "Redimensionner la hauteur",
+  "promptInput.resizeHandle.title": "Faites glisser pour redimensionner",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/he/messaging.ts b/packages/ui/src/lib/i18n/messages/he/messaging.ts
index 98e2d6e7a..46c97f3f9 100644
--- a/packages/ui/src/lib/i18n/messages/he/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/he/messaging.ts
@@ -182,4 +182,6 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "הגישה למיקרופון נדחתה על ידי macOS.",
   "promptInput.voiceInput.error.unsupported": "קלט קולי אינו נתמך בדפדפן זה.",
   "promptInput.voiceInput.error.transcribe": "לא ניתן היה לתמלל את האודיו שהוקלט.",
+  "promptInput.resizeHandle.ariaLabel": "שנה גובה",
+  "promptInput.resizeHandle.title": "גרור לשינוי גובה",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/ja/messaging.ts b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
index 39c1da8a3..98ac4e84d 100644
--- a/packages/ui/src/lib/i18n/messages/ja/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
@@ -184,4 +184,6 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS によりマイクへのアクセスが拒否されました。",
   "promptInput.voiceInput.error.unsupported": "このブラウザーでは音声入力はサポートされていません。",
   "promptInput.voiceInput.error.transcribe": "録音した音声を文字起こしできませんでした。",
+  "promptInput.resizeHandle.ariaLabel": "入力の高さを変更",
+  "promptInput.resizeHandle.title": "ドラッグして高さを変更",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/ru/messaging.ts b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
index c22eb7f9d..5d55c4dfa 100644
--- a/packages/ui/src/lib/i18n/messages/ru/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
@@ -184,4 +184,6 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS запретила доступ к микрофону.",
   "promptInput.voiceInput.error.unsupported": "Голосовой ввод не поддерживается в этом браузере.",
   "promptInput.voiceInput.error.transcribe": "Не удалось расшифровать записанное аудио.",
+  "promptInput.resizeHandle.ariaLabel": "Изменить высоту",
+  "promptInput.resizeHandle.title": "Перетащите для изменения высоты",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
index 086aa1a6b..d1ef36781 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
@@ -184,4 +184,6 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS 已拒绝麦克风访问。",
   "promptInput.voiceInput.error.unsupported": "此浏览器不支持语音输入。",
   "promptInput.voiceInput.error.transcribe": "无法转写录制的音频。",
+  "promptInput.resizeHandle.ariaLabel": "调整输入框高度",
+  "promptInput.resizeHandle.title": "拖动以调整输入框高度",
 } as const
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index c22c495e5..845ed6cd1 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -2,12 +2,64 @@
   @apply flex flex-col border-t;
   border-color: var(--border-base);
   background-color: var(--surface-base);
+  position: relative;
+}
+
+/* Resize handle at the top edge of the prompt input container */
+.prompt-resize-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  cursor: ns-resize;
+  touch-action: none;
+  z-index: 10;
+  background: transparent;
+  transition: background-color 0.15s ease;
+}
+
+/* Visual indicator line in the center of the resize handle */
+.prompt-resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40px;
+  height: 2px;
+  border-radius: 1px;
+  background-color: var(--border-base);
+  opacity: 0.5;
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
+}
+
+/* Hover state for the resize handle */
+.prompt-resize-handle:hover::after {
+  opacity: 1;
+  background-color: var(--accent-primary);
+}
+
+/* Active/dragging state for the resize handle */
+.prompt-resize-handle.is-resizing::after {
+  opacity: 1;
+  background-color: var(--accent-primary);
+}
+
+/* Hide resize handle on touch devices where drag is less practical */
+@media (pointer: coarse) {
+  .prompt-resize-handle {
+    display: none;
+  }
 }
 
 .prompt-input-wrapper {
   --prompt-input-compact-height: 104px;
   @apply grid items-stretch;
   grid-template-columns: minmax(0, 1fr) 72px 64px;
+  grid-template-rows: minmax(0, 1fr);
   gap: 0;
   padding: 0;
 }
@@ -19,6 +71,7 @@
 .prompt-input-actions {
   @apply flex flex-col items-center;
   align-self: stretch;
+  justify-content: flex-start;
   height: 100%;
   padding: 0.5rem 0.25rem;
   gap: 0.5rem;
@@ -29,6 +82,7 @@
   align-self: stretch;
   justify-content: space-between;
   width: 100%;
+  height: 100%;
   gap: 0.5rem;
   padding: 0.5rem 0.25rem;
   border-inline-start: 1px solid var(--border-base);
@@ -52,7 +106,7 @@
 .prompt-input {
   @apply w-full pt-2.5 border text-sm resize-none outline-none transition-colors;
   padding-inline-start: 0.75rem;
-  padding-inline-end: 4.5rem;
+  padding-inline-end: 0.75rem;
   font-family: inherit;
   background-color: var(--surface-base);
   color: var(--text-primary);
@@ -63,19 +117,6 @@
   padding-bottom: 0;
   height: 100%;
   min-height: 100%;
-}
-
-.prompt-input-field-container.is-expanded {
-  height: auto;
-}
-
-.prompt-input-field.is-expanded {
-  height: auto;
-}
-
-.prompt-input.is-expanded {
-  height: auto;
-  min-height: 0;
   overflow-y: auto;
 }
 
@@ -131,7 +172,9 @@
   @apply w-7 h-7 flex items-center justify-center rounded-md;
   color: var(--text-muted);
   background-color: var(--control-ghost-bg);
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
   padding: 0;
   flex-shrink: 0;
 }
@@ -158,20 +201,6 @@
   cursor: not-allowed;
 }
 
-.prompt-clear-button-inline {
-  position: absolute;
-  top: 2.5rem;
-  inset-inline-end: 0.5rem;
-  z-index: 2;
-}
-
-.prompt-expand-button-inline {
-  position: absolute;
-  top: 0.5rem;
-  inset-inline-end: 0.5rem;
-  z-index: 2;
-}
-
 .prompt-overlay-text {
   display: inline-flex;
   align-items: center;
@@ -228,13 +257,21 @@
 .prompt-voice-button {
   @apply h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
   min-width: 2.5rem;
-  background-color: color-mix(in oklab, var(--surface-secondary) 82%, var(--surface-base));
+  background-color: color-mix(
+    in oklab,
+    var(--surface-secondary) 82%,
+    var(--surface-base)
+  );
   color: var(--text-secondary);
 }
 
 .prompt-voice-button:hover:not(:disabled) {
   color: var(--text-primary);
-  background-color: color-mix(in oklab, var(--accent-primary) 12%, var(--surface-secondary));
+  background-color: color-mix(
+    in oklab,
+    var(--accent-primary) 12%,
+    var(--surface-secondary)
+  );
   @apply scale-105;
 }
 
@@ -244,7 +281,11 @@
 
 .prompt-voice-button.is-recording {
   min-width: 3.5rem;
-  background-color: color-mix(in oklab, var(--button-danger-bg, rgba(239, 68, 68, 0.85)) 88%, white 12%);
+  background-color: color-mix(
+    in oklab,
+    var(--button-danger-bg, rgba(239, 68, 68, 0.85)) 88%,
+    white 12%
+  );
   color: var(--button-danger-text, var(--text-inverted, #ffffff));
 }
 
@@ -275,12 +316,20 @@
 }
 
 .prompt-conversation-button.is-active {
-  background-color: color-mix(in oklab, var(--accent-primary) 76%, var(--surface-secondary));
+  background-color: color-mix(
+    in oklab,
+    var(--accent-primary) 76%,
+    var(--surface-secondary)
+  );
   color: var(--text-inverted);
 }
 
 .prompt-conversation-button.is-active:hover:not(:disabled) {
-  background-color: color-mix(in oklab, var(--accent-primary) 88%, var(--surface-secondary));
+  background-color: color-mix(
+    in oklab,
+    var(--accent-primary) 88%,
+    var(--surface-secondary)
+  );
   color: var(--text-inverted);
 }
 
@@ -422,77 +471,46 @@
   }
 }
 
-.session-center-column[data-session-center-width="medium"] .prompt-input-wrapper,
-.session-center-column[data-session-center-width="narrow"] .prompt-input-wrapper {
+.session-center-column[data-session-center-width="medium"]
+  .prompt-input-wrapper,
+.session-center-column[data-session-center-width="narrow"]
+  .prompt-input-wrapper {
   min-height: var(--prompt-input-compact-height);
 }
 
-.session-center-column[data-session-center-width="medium"] .prompt-input-field-container,
-.session-center-column[data-session-center-width="narrow"] .prompt-input-field-container {
+.session-center-column[data-session-center-width="medium"]
+  .prompt-input-field-container,
+.session-center-column[data-session-center-width="narrow"]
+  .prompt-input-field-container {
   min-height: var(--prompt-input-compact-height);
-  height: var(--prompt-input-compact-height);
+  height: 100%;
 }
 
 .session-center-column[data-session-center-width="medium"] .prompt-input-field,
 .session-center-column[data-session-center-width="narrow"] .prompt-input-field {
-  height: var(--prompt-input-compact-height);
-}
-
-.session-center-column[data-session-center-width="medium"] .prompt-input-field-container.is-expanded,
-.session-center-column[data-session-center-width="medium"] .prompt-input-field.is-expanded,
-.session-center-column[data-session-center-width="narrow"] .prompt-input-field-container.is-expanded,
-.session-center-column[data-session-center-width="narrow"] .prompt-input-field.is-expanded {
-  height: auto;
+  min-height: var(--prompt-input-compact-height);
+  height: 100%;
 }
 
 .session-center-column[data-session-center-width="narrow"] .prompt-input-wrapper {
-  grid-template-columns: minmax(0, 1fr) auto;
-  grid-template-areas:
-    "field field"
-    "actions primary";
-}
-
-.session-center-column[data-session-center-width="narrow"] .prompt-input-main {
-  grid-area: field;
+  grid-template-columns: minmax(0, 1fr) 64px 56px;
 }
 
 .session-center-column[data-session-center-width="narrow"] .prompt-input-actions {
-  grid-area: actions;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  height: auto;
-  padding: 0.25rem 0.5rem 0.5rem;
+  padding: 0.5rem 0.125rem;
+  gap: 0.375rem;
 }
 
 .session-center-column[data-session-center-width="narrow"] .prompt-input-primary-actions {
-  grid-area: primary;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  width: auto;
-  height: auto;
-  padding: 0.25rem 0.5rem 0.5rem 0;
-  border-inline-start: none;
-}
-
-.session-center-column[data-session-center-width="narrow"] .prompt-nav-buttons {
-  justify-content: flex-start;
-  gap: 0.25rem;
-}
-
-.session-center-column[data-session-center-width="narrow"] .prompt-nav-column {
-  flex-direction: row;
-  align-items: center;
-  min-width: 0;
-  gap: 0.25rem;
+  padding: 0.5rem 0.125rem;
+  gap: 0.375rem;
 }
 
 @media (max-width: 640px) {
   .prompt-input {
     min-height: 0;
     padding: 0.5rem 0.75rem;
-    padding-inline-end: 4.5rem;
+    padding-inline-end: 0.75rem;
     padding-bottom: 0.75rem;
   }
 

From 7f61e8dff2db87d2d2e2182f3df855dbdfd798a6 Mon Sep 17 00:00:00 2001
From: jollyxenon <1378319314@qq.com>
Date: Wed, 13 May 2026 20:24:40 +0800
Subject: [PATCH 02/11] fix(ui): address composer resize review feedback

Refine the resizable session composer in response to PR review feedback. Keep the resize cleanup and viewport-based max-height fallback fixes, while removing the newly introduced keyboard resizing behavior so the feature stays aligned with the existing interaction model.

This update prevents document-level pointer listeners from leaking when the composer unmounts mid-drag and avoids over-expanding the composer on small viewports or layouts without the toolbar anchor. It intentionally leaves unrelated local edits in package-lock, Electron dev-server files, and workspace metadata out of the commit.

Validation: npm run typecheck --workspace @codenomad/ui; npm run build --workspace @codenomad/ui
---
 packages/ui/src/components/prompt-input.tsx | 60 +++++++++++++++++----
 1 file changed, 49 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index f616805e5..76c18df83 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -120,6 +120,10 @@ export default function PromptInput(props: PromptInputProps) {
    * Used to apply visual feedback during resize operations.
    */
   const [isResizing, setIsResizing] = createSignal(false);
+  let activeResizeHandle: HTMLElement | undefined;
+  let activeResizePointerId: number | null = null;
+  let activePointerMoveHandler: ((event: PointerEvent) => void) | undefined;
+  let activePointerUpHandler: ((event: PointerEvent) => void) | undefined;
 
   const getPlaceholder = () => {
     if (mode() === "shell") {
@@ -350,7 +354,11 @@ export default function PromptInput(props: PromptInputProps) {
    * Falls back to DEFAULT_EXPANDED_HEIGHT if elements are not found.
    */
   function computeMaxHeight(): number {
-    if (!containerRef) return DEFAULT_EXPANDED_HEIGHT;
+    if (typeof window === "undefined") return DEFAULT_EXPANDED_HEIGHT;
+
+    if (!containerRef) {
+      return Math.max(DEFAULT_INPUT_HEIGHT, window.innerHeight - 100);
+    }
 
     const containerRect = containerRef.getBoundingClientRect();
     const containerBottom = containerRect.bottom;
@@ -372,7 +380,36 @@ export default function PromptInput(props: PromptInputProps) {
     // Fallback: use viewport-based calculation
     const viewportHeight = window.innerHeight;
     const maxFromViewport = viewportHeight - 100;
-    return Math.max(DEFAULT_EXPANDED_HEIGHT, maxFromViewport);
+    return Math.max(DEFAULT_INPUT_HEIGHT, maxFromViewport);
+  }
+
+  /**
+   * Removes any active global resize listeners and releases pointer capture.
+   * This is used both when a drag ends normally and when the component unmounts mid-drag.
+   */
+  function cleanupResizeTracking(): void {
+    if (activePointerMoveHandler) {
+      document.removeEventListener("pointermove", activePointerMoveHandler);
+      activePointerMoveHandler = undefined;
+    }
+
+    if (activePointerUpHandler) {
+      document.removeEventListener("pointerup", activePointerUpHandler);
+      document.removeEventListener("pointercancel", activePointerUpHandler);
+      activePointerUpHandler = undefined;
+    }
+
+    if (activeResizeHandle && activeResizePointerId !== null) {
+      try {
+        activeResizeHandle.releasePointerCapture(activeResizePointerId);
+      } catch {
+        // Pointer capture may already be released.
+      }
+    }
+
+    activeResizeHandle = undefined;
+    activeResizePointerId = null;
+    setIsResizing(false);
   }
 
   /**
@@ -381,10 +418,13 @@ export default function PromptInput(props: PromptInputProps) {
    */
   function handleResizeStart(event: PointerEvent) {
     event.preventDefault();
+    cleanupResizeTracking();
     setIsResizing(true);
 
     // Capture the pointer to ensure we receive events even if cursor leaves the handle
     const target = event.currentTarget as HTMLElement;
+    activeResizeHandle = target;
+    activeResizePointerId = event.pointerId;
     try {
       target.setPointerCapture(event.pointerId);
     } catch {
@@ -417,24 +457,22 @@ export default function PromptInput(props: PromptInputProps) {
      */
     function handlePointerUp(upEvent: PointerEvent) {
       upEvent.preventDefault();
-      setIsResizing(false);
-      try {
-        target.releasePointerCapture(upEvent.pointerId);
-      } catch {
-        // Pointer capture not supported, continue without it
-      }
-      document.removeEventListener("pointermove", handlePointerMove);
-      document.removeEventListener("pointerup", handlePointerUp);
-      document.removeEventListener("pointercancel", handlePointerUp);
+      cleanupResizeTracking();
       // Restore focus to textarea after resize
       textareaRef?.focus();
     }
 
+    activePointerMoveHandler = handlePointerMove;
+    activePointerUpHandler = handlePointerUp;
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
     document.addEventListener("pointercancel", handlePointerUp);
   }
 
+  onCleanup(() => {
+    cleanupResizeTracking();
+  });
+
   async function handleSend() {
     const text = prompt().trim();
     const currentAttachments = attachments();

From ae84ba9f60a6af2ded8991a2367abd383c658c43 Mon Sep 17 00:00:00 2001
From: jollyxenon <1378319314@qq.com>
Date: Thu, 14 May 2026 20:57:16 +0800
Subject: [PATCH 03/11] fix(ui): preserve maintainer prompt behavior with drag
 resize

Restore the maintainer-owned prompt model for default height, expand state, and compact narrow-pane behavior while keeping top-edge drag resizing as an additive capability. This keeps the feature aligned with the existing composer interaction model instead of replacing it with a separate height-only workflow.

The commit limits itself to prompt logic and supporting component APIs so the baseline UX remains recognizable. Validation was completed with npm run typecheck --workspace @codenomad/ui and npm run build --workspace @codenomad/ui.
---
 packages/ui/src/components/expand-button.tsx  |  37 +-
 packages/ui/src/components/prompt-input.tsx   | 986 +++++++-----------
 .../ui/src/components/prompt-input/types.ts   |   4 +
 3 files changed, 413 insertions(+), 614 deletions(-)

diff --git a/packages/ui/src/components/expand-button.tsx b/packages/ui/src/components/expand-button.tsx
index 667921aab..953b3f874 100644
--- a/packages/ui/src/components/expand-button.tsx
+++ b/packages/ui/src/components/expand-button.tsx
@@ -3,43 +3,16 @@ import { Maximize2, Minimize2 } from "lucide-solid"
 import { useI18n } from "../lib/i18n"
 
 interface ExpandButtonProps {
-  /**
-   * Current height of the input container in pixels.
-   * Used to determine which icon to show (expand vs shrink).
-   */
-  currentHeight: () => number
-  /**
-   * Default/minimum height of the input container in pixels.
-   * When currentHeight exceeds this, the shrink icon is shown.
-   */
-  defaultHeight: () => number
-  /**
-   * Callback when the button is clicked.
-   * true = expand to default expanded height, false = shrink to default height
-   */
-  onToggleExpand: (expand: boolean) => void
+  expandState: () => "normal" | "expanded"
+  onToggleExpand: (nextState: "normal" | "expanded") => void
 }
 
-/**
- * Expand/shrink button for the prompt input.
- * Shows expand icon when at default height, shrink icon when enlarged.
- * Clicking toggles between default and expanded heights.
- */
 export default function ExpandButton(props: ExpandButtonProps) {
   const { t } = useI18n()
 
-  /**
-   * Determines if the input is currently expanded based on actual height.
-   * Returns true when current height exceeds the default height.
-   */
-  const isExpanded = () => props.currentHeight() > props.defaultHeight()
-
-  /**
-   * Handles button click by toggling between expanded and collapsed states.
-   * Passes true to expand, false to shrink.
-   */
   function handleClick() {
-    props.onToggleExpand(!isExpanded())
+    const current = props.expandState()
+    props.onToggleExpand(current === "normal" ? "expanded" : "normal")
   }
 
   return (
@@ -50,7 +23,7 @@ export default function ExpandButton(props: ExpandButtonProps) {
       aria-label={t("expandButton.toggleAriaLabel")}
     >
       <Show
-        when={!isExpanded()}
+        when={props.expandState() === "normal"}
         fallback={<Minimize2 class="h-4 w-4" aria-hidden="true" />}
       >
         <Maximize2 class="h-4 w-4" aria-hidden="true" />
diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index 76c18df83..f07c31f9d 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -1,142 +1,96 @@
-import {
-  Suspense,
-  createEffect,
-  createSignal,
-  lazy,
-  on,
-  onCleanup,
-  Show,
-} from "solid-js";
-import {
-  ArrowBigUp,
-  ArrowBigDown,
-  Loader2,
-  Mic,
-  Paperclip,
-  Volume2,
-  X,
-} from "lucide-solid";
-import ExpandButton from "./expand-button";
-import { clearAttachments, removeAttachment } from "../stores/attachments";
-import { resolvePastedPlaceholders } from "../lib/prompt-placeholders";
-import {
-  createPastedPlaceholderRegex,
-  pastedDisplayCounterRegex,
-} from "./prompt-input/attachmentPlaceholders";
-import Kbd from "./kbd";
-import { getActiveInstance } from "../stores/instances";
-import { agents, executeCustomCommand } from "../stores/sessions";
-import { getCommands } from "../stores/commands";
-import { showAlertDialog } from "../stores/alerts";
-import { useI18n } from "../lib/i18n";
-import { getLogger } from "../lib/logger";
-import { serverApi } from "../lib/api-client";
-import { isDesktopHost, isLocalWindow } from "../lib/runtime-env";
-import { preferences } from "../stores/preferences";
-import type {
-  PromptInputApi,
-  PromptInputProps,
-  PromptInsertMode,
-  PromptMode,
-} from "./prompt-input/types";
-import type { Attachment } from "../types/attachment";
-import type { FileSystemEntry } from "../../../server/src/api-types";
-import DirectoryBrowserDialog from "./directory-browser-dialog";
-import { usePromptState } from "./prompt-input/usePromptState";
-import { usePromptAttachments } from "./prompt-input/usePromptAttachments";
-import { usePromptPicker } from "./prompt-input/usePromptPicker";
-import { usePromptKeyDown } from "./prompt-input/usePromptKeyDown";
-import { usePromptVoiceInput } from "./prompt-input/usePromptVoiceInput";
+import { Suspense, createEffect, createSignal, lazy, on, onCleanup, Show } from "solid-js"
+import { ArrowBigUp, ArrowBigDown, Loader2, Mic, Paperclip, Volume2, X } from "lucide-solid"
+import ExpandButton from "./expand-button"
+import { clearAttachments, removeAttachment } from "../stores/attachments"
+import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
+import { createPastedPlaceholderRegex, pastedDisplayCounterRegex } from "./prompt-input/attachmentPlaceholders"
+import Kbd from "./kbd"
+import { getActiveInstance } from "../stores/instances"
+import { agents, executeCustomCommand } from "../stores/sessions"
+import { getCommands } from "../stores/commands"
+import { showAlertDialog } from "../stores/alerts"
+import { useI18n } from "../lib/i18n"
+import { getLogger } from "../lib/logger"
+import { serverApi } from "../lib/api-client"
+import { isDesktopHost, isLocalWindow } from "../lib/runtime-env"
+import { preferences } from "../stores/preferences"
+import type { ExpandState, PromptInputApi, PromptInputProps, PromptInsertMode, PromptMode } from "./prompt-input/types"
+import type { Attachment } from "../types/attachment"
+import type { FileSystemEntry } from "../../../server/src/api-types"
+import DirectoryBrowserDialog from "./directory-browser-dialog"
+import { usePromptState } from "./prompt-input/usePromptState"
+import { usePromptAttachments } from "./prompt-input/usePromptAttachments"
+import { usePromptPicker } from "./prompt-input/usePromptPicker"
+import { usePromptKeyDown } from "./prompt-input/usePromptKeyDown"
+import { usePromptVoiceInput } from "./prompt-input/usePromptVoiceInput"
 import {
   canUseConversationMode,
   clearConversationPlaybackForInstance,
   isConversationModeEnabled,
   toggleConversationMode,
-} from "../stores/conversation-speech";
-const log = getLogger("actions");
-const LazyUnifiedPicker = lazy(() => import("./unified-picker"));
+} from "../stores/conversation-speech"
+const log = getLogger("actions")
+const LazyUnifiedPicker = lazy(() => import("./unified-picker"))
 
-function getConsumedPastedTextAttachmentIds(
-  text: string,
-  attachments: Attachment[],
-): string[] {
-  if (!text || attachments.length === 0) return [];
+function getConsumedPastedTextAttachmentIds(text: string, attachments: Attachment[]): string[] {
+  if (!text || attachments.length === 0) return []
 
-  const usedCounters = new Set<string>();
+  const usedCounters = new Set<string>()
   for (const match of text.matchAll(createPastedPlaceholderRegex())) {
-    const counter = match?.[1];
-    if (counter) usedCounters.add(counter);
+    const counter = match?.[1]
+    if (counter) usedCounters.add(counter)
   }
 
-  if (usedCounters.size === 0) return [];
+  if (usedCounters.size === 0) return []
 
-  const consumed = new Set<string>();
+  const consumed = new Set<string>()
 
   for (const attachment of attachments) {
-    if (!attachment?.id) continue;
-    if (attachment?.source?.type !== "text") continue;
-    const display = attachment.display;
-    if (typeof display !== "string") continue;
-    const match = display.match(pastedDisplayCounterRegex);
-    if (!match?.[1]) continue;
+    if (!attachment?.id) continue
+    if (attachment?.source?.type !== "text") continue
+    const display = attachment.display
+    if (typeof display !== "string") continue
+    const match = display.match(pastedDisplayCounterRegex)
+    if (!match?.[1]) continue
     if (usedCounters.has(match[1])) {
-      consumed.add(attachment.id);
+      consumed.add(attachment.id)
     }
   }
 
-  return Array.from(consumed);
+  return Array.from(consumed)
 }
 
-/**
- * Default height of the prompt input in pixels (compact state).
- * This is the minimum height the input can be resized to.
- */
-const DEFAULT_INPUT_HEIGHT = 104;
-
-/**
- * Default expanded height of the prompt input in pixels.
- * Used when clicking the expand button.
- */
-const DEFAULT_EXPANDED_HEIGHT = 280;
-
 export default function PromptInput(props: PromptInputProps) {
-  const { t } = useI18n();
-  const [mode, setMode] = createSignal<PromptMode>("normal");
-  const [isFileBrowserOpen, setIsFileBrowserOpen] = createSignal(false);
-  const SELECTION_INSERT_MAX_LENGTH = 2000;
-  const MAX_READABLE_PICKED_FILE_BYTES = 5 * 1024 * 1024;
-  let textareaRef: HTMLTextAreaElement | undefined;
-  let fileInputRef: HTMLInputElement | undefined;
-  let containerRef: HTMLDivElement | undefined;
-
-  /**
-   * Current height of the prompt input container in pixels.
-   * Starts at default height and can be resized via drag or button click.
-   */
-  const [inputHeight, setInputHeight] = createSignal(DEFAULT_INPUT_HEIGHT);
-
-  /**
-   * Whether the user is currently dragging the resize handle.
-   * Used to apply visual feedback during resize operations.
-   */
-  const [isResizing, setIsResizing] = createSignal(false);
-  let activeResizeHandle: HTMLElement | undefined;
-  let activeResizePointerId: number | null = null;
-  let activePointerMoveHandler: ((event: PointerEvent) => void) | undefined;
-  let activePointerUpHandler: ((event: PointerEvent) => void) | undefined;
+  const { t } = useI18n()
+  const [, setIsFocused] = createSignal(false)
+  const [mode, setMode] = createSignal<PromptMode>("normal")
+  const [expandState, setExpandState] = createSignal<ExpandState>("normal")
+  const [inputHeight, setInputHeight] = createSignal<number | null>(null)
+  const [isResizing, setIsResizing] = createSignal(false)
+  const [isFileBrowserOpen, setIsFileBrowserOpen] = createSignal(false)
+  const SELECTION_INSERT_MAX_LENGTH = 2000
+  const MAX_READABLE_PICKED_FILE_BYTES = 5 * 1024 * 1024
+  let textareaRef: HTMLTextAreaElement | undefined
+  let fileInputRef: HTMLInputElement | undefined
+  let wrapperRef: HTMLDivElement | undefined
+  let fieldContainerRef: HTMLDivElement | undefined
+  let activeResizeHandle: HTMLElement | undefined
+  let activeResizePointerId: number | null = null
+  let activePointerMoveHandler: ((event: PointerEvent) => void) | undefined
+  let activePointerUpHandler: ((event: PointerEvent) => void) | undefined
 
   const getPlaceholder = () => {
     if (mode() === "shell") {
-      return t("promptInput.placeholder.shell");
+      return t("promptInput.placeholder.shell")
     }
-    return t("promptInput.placeholder.default");
-  };
+    return t("promptInput.placeholder.default")
+  }
 
   const promptState = usePromptState({
     instanceId: () => props.instanceId,
     sessionId: () => props.sessionId,
     instanceFolder: () => props.instanceFolder,
-  });
+  })
 
   const {
     prompt,
@@ -150,7 +104,7 @@ export default function PromptInput(props: PromptInputProps) {
     resetHistoryNavigation,
     selectPreviousHistory,
     selectNextHistory,
-  } = promptState;
+  } = promptState
 
   const {
     attachments,
@@ -172,72 +126,72 @@ export default function PromptInput(props: PromptInputProps) {
     setPrompt,
     getTextarea: () => textareaRef ?? null,
     disabled: () => Boolean(props.disabled),
-  });
+  })
 
   createEffect(() => {
-    if (!props.registerPromptInputApi) return;
+    if (!props.registerPromptInputApi) return
     const api: PromptInputApi = {
       insertSelection: (text: string, mode: PromptInsertMode) => {
         if (mode === "code") {
-          insertCodeSelection(text);
+          insertCodeSelection(text)
         } else {
-          insertQuotedSelection(text);
+          insertQuotedSelection(text)
         }
       },
       insertComment: (text: string) => {
-        const normalized = (text ?? "").replace(/\r/g, "").trim();
-        if (!normalized) return;
-        insertBlockContent(`${normalized}\n\n`);
+        const normalized = (text ?? "").replace(/\r/g, "").trim()
+        if (!normalized) return
+        insertBlockContent(`${normalized}\n\n`)
       },
       expandTextAttachment: (attachmentId: string) => {
-        const attachment = attachments().find((a) => a.id === attachmentId);
-        if (!attachment) return;
-        handleExpandTextAttachment(attachment);
+        const attachment = attachments().find((a) => a.id === attachmentId)
+        if (!attachment) return
+        handleExpandTextAttachment(attachment)
       },
       removeAttachment: (attachmentId: string) => {
-        handleRemoveAttachment(attachmentId);
+        handleRemoveAttachment(attachmentId)
       },
       setPromptText: (text: string, opts?: { focus?: boolean }) => {
-        const textarea = textareaRef;
+        const textarea = textareaRef
         if (textarea) {
-          textarea.value = text;
-          textarea.dispatchEvent(new Event("input", { bubbles: true }));
+          textarea.value = text
+          textarea.dispatchEvent(new Event("input", { bubbles: true }))
           if (opts?.focus) {
             try {
-              textarea.focus({ preventScroll: true } as any);
+              textarea.focus({ preventScroll: true } as any)
             } catch {
-              textarea.focus();
+              textarea.focus()
             }
           }
-          return;
+          return
         }
 
-        setPrompt(text);
+        setPrompt(text)
         if (opts?.focus) {
           setTimeout(() => {
-            api.focus();
-          }, 0);
+            api.focus()
+          }, 0)
         }
       },
       focus: () => {
-        const textarea = textareaRef;
-        if (!textarea || textarea.disabled) return;
+        const textarea = textareaRef
+        if (!textarea || textarea.disabled) return
         try {
-          textarea.focus({ preventScroll: true } as any);
+          textarea.focus({ preventScroll: true } as any)
         } catch {
-          textarea.focus();
+          textarea.focus()
         }
       },
-    };
-    const cleanup = props.registerPromptInputApi(api);
+    }
+    const cleanup = props.registerPromptInputApi(api)
     onCleanup(() => {
       if (typeof cleanup === "function") {
-        cleanup();
+        cleanup()
       }
-    });
-  });
+    })
+  })
 
-  const instanceAgents = () => agents().get(props.instanceId) || [];
+  const instanceAgents = () => agents().get(props.instanceId) || []
 
   const promptPicker = usePromptPicker({
     instanceId: () => props.instanceId,
@@ -248,7 +202,7 @@ export default function PromptInput(props: PromptInputProps) {
     getTextarea: () => textareaRef ?? null,
     instanceAgents,
     commands: () => getCommands(props.instanceId),
-  });
+  })
 
   const {
     showPicker,
@@ -263,53 +217,54 @@ export default function PromptInput(props: PromptInputProps) {
     handleInput,
     handlePickerSelect,
     handlePickerClose,
-  } = promptPicker;
+  } = promptPicker
 
   createEffect(
     on(
       draftLoadedNonce,
       () => {
         // Session switch resets (picker/counters/ignored positions) stay in the component.
-        setIgnoredAtPositions(new Set<number>());
-        setShowPicker(false);
-        setPickerMode("mention");
-        setAtPosition(null);
-        setSearchQuery("");
-
-        syncAttachmentCounters(prompt());
+        setInputHeight(null)
+        setIgnoredAtPositions(new Set<number>())
+        setShowPicker(false)
+        setPickerMode("mention")
+        setAtPosition(null)
+        setSearchQuery("")
+
+        syncAttachmentCounters(prompt())
       },
       { defer: true },
     ),
-  );
+  )
 
   const isCoarsePointer = () => {
-    if (typeof window === "undefined") return false;
-    return Boolean(window.matchMedia?.("(pointer: coarse)")?.matches);
-  };
+    if (typeof window === "undefined") return false
+    return Boolean(window.matchMedia?.("(pointer: coarse)")?.matches)
+  }
 
   createEffect(() => {
     // Scope global "type-to-focus" behavior to the active, visible prompt only.
-    if (typeof document === "undefined") return;
-    if (isCoarsePointer()) return;
-    if (props.isActive === false) return;
-    if (props.disabled) return;
+    if (typeof document === "undefined") return
+    if (isCoarsePointer()) return
+    if (props.isActive === false) return
+    if (props.disabled) return
 
     const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      const activeElement = document.activeElement as HTMLElement | null;
-      const targetElement = e.target instanceof HTMLElement ? e.target : null;
+      const activeElement = document.activeElement as HTMLElement | null
+      const targetElement = e.target instanceof HTMLElement ? e.target : null
 
       const isEditableElement = (element: HTMLElement | null) =>
         element?.tagName === "INPUT" ||
         element?.tagName === "TEXTAREA" ||
         element?.tagName === "SELECT" ||
-        Boolean(element?.isContentEditable);
+        Boolean(element?.isContentEditable)
 
       const isInteractiveElement = (element: HTMLElement | null) =>
         Boolean(
           element?.closest(
             'button, a[href], summary, [role="button"], [role="link"], [role="menuitem"], [role="option"], [role="tab"], [tabindex]:not([tabindex="-1"])',
           ),
-        );
+        )
 
       if (
         isEditableElement(activeElement) ||
@@ -317,437 +272,366 @@ export default function PromptInput(props: PromptInputProps) {
         isInteractiveElement(activeElement) ||
         isInteractiveElement(targetElement)
       ) {
-        return;
+        return
       }
 
-      const isModifierKey = e.ctrlKey || e.metaKey || e.altKey;
-      if (isModifierKey) return;
+      const isModifierKey = e.ctrlKey || e.metaKey || e.altKey
+      if (isModifierKey) return
 
       const isSpecialKey =
         e.key === "Tab" ||
         e.key === "Enter" ||
         e.key.startsWith("Arrow") ||
         e.key === "Backspace" ||
-        e.key === "Delete";
-      if (isSpecialKey) return;
+        e.key === "Delete"
+      if (isSpecialKey) return
 
-      const textarea = textareaRef;
-      if (!textarea || textarea.disabled) return;
+      const textarea = textareaRef
+      if (!textarea || textarea.disabled) return
 
       // In session cache mode inactive panes are display:none; avoid stealing focus.
-      if (textarea.offsetParent === null) return;
+      if (textarea.offsetParent === null) return
 
       if (e.key.length === 1) {
-        textarea.focus();
+        textarea.focus()
       }
-    };
+    }
 
-    document.addEventListener("keydown", handleGlobalKeyDown);
+    document.addEventListener("keydown", handleGlobalKeyDown)
     onCleanup(() => {
-      document.removeEventListener("keydown", handleGlobalKeyDown);
-    });
-  });
-
-  /**
-   * Computes the maximum allowed height for the prompt input based on layout.
-   * The max height is the distance from the container's top to the toolbar's bottom edge.
-   * Falls back to DEFAULT_EXPANDED_HEIGHT if elements are not found.
-   */
-  function computeMaxHeight(): number {
-    if (typeof window === "undefined") return DEFAULT_EXPANDED_HEIGHT;
-
-    if (!containerRef) {
-      return Math.max(DEFAULT_INPUT_HEIGHT, window.innerHeight - 100);
-    }
+      document.removeEventListener("keydown", handleGlobalKeyDown)
+    })
+  })
+
+  function computeMaxFieldHeight(): number {
+    if (typeof window === "undefined") return 280
 
-    const containerRect = containerRef.getBoundingClientRect();
-    const containerBottom = containerRect.bottom;
+    const currentFieldHeight = fieldContainerRef?.getBoundingClientRect().height ?? 104
+    const wrapperHeight = wrapperRef?.getBoundingClientRect().height ?? currentFieldHeight
+    const nonFieldHeight = Math.max(0, wrapperHeight - currentFieldHeight)
+    const padding = 16
 
-    // Find the toolbar by looking for the session-toolbar element or AppBar
+    if (!wrapperRef) {
+      return Math.max(104, window.innerHeight - 100 - nonFieldHeight)
+    }
+
+    const wrapperRect = wrapperRef.getBoundingClientRect()
     const toolbar =
       document.querySelector('[data-session-toolbar="true"]') ||
-      document.querySelector(".session-toolbar") ||
-      containerRef.closest(".session-view")?.querySelector(".session-toolbar");
+      document.querySelector('.session-toolbar') ||
+      wrapperRef.closest('.session-view')?.querySelector('.session-toolbar')
 
     if (toolbar) {
-      const toolbarRect = toolbar.getBoundingClientRect();
-      const availableHeight = containerBottom - toolbarRect.bottom;
-      // Subtract some padding to keep the input from touching the toolbar
-      const padding = 16;
-      return Math.max(DEFAULT_INPUT_HEIGHT, availableHeight - padding);
+      const toolbarRect = toolbar.getBoundingClientRect()
+      const availableTotalHeight = wrapperRect.bottom - toolbarRect.bottom - padding
+      return Math.max(104, availableTotalHeight - nonFieldHeight)
     }
 
-    // Fallback: use viewport-based calculation
-    const viewportHeight = window.innerHeight;
-    const maxFromViewport = viewportHeight - 100;
-    return Math.max(DEFAULT_INPUT_HEIGHT, maxFromViewport);
+    return Math.max(104, window.innerHeight - 100 - nonFieldHeight)
   }
 
-  /**
-   * Removes any active global resize listeners and releases pointer capture.
-   * This is used both when a drag ends normally and when the component unmounts mid-drag.
-   */
   function cleanupResizeTracking(): void {
     if (activePointerMoveHandler) {
-      document.removeEventListener("pointermove", activePointerMoveHandler);
-      activePointerMoveHandler = undefined;
+      document.removeEventListener('pointermove', activePointerMoveHandler)
+      activePointerMoveHandler = undefined
     }
 
     if (activePointerUpHandler) {
-      document.removeEventListener("pointerup", activePointerUpHandler);
-      document.removeEventListener("pointercancel", activePointerUpHandler);
-      activePointerUpHandler = undefined;
+      document.removeEventListener('pointerup', activePointerUpHandler)
+      document.removeEventListener('pointercancel', activePointerUpHandler)
+      activePointerUpHandler = undefined
     }
 
     if (activeResizeHandle && activeResizePointerId !== null) {
       try {
-        activeResizeHandle.releasePointerCapture(activeResizePointerId);
+        activeResizeHandle.releasePointerCapture(activeResizePointerId)
       } catch {
         // Pointer capture may already be released.
       }
     }
 
-    activeResizeHandle = undefined;
-    activeResizePointerId = null;
-    setIsResizing(false);
+    activeResizeHandle = undefined
+    activeResizePointerId = null
+    setIsResizing(false)
   }
 
-  /**
-   * Handles the start of a resize drag operation.
-   * Captures the pointer and initializes the starting Y position.
-   */
   function handleResizeStart(event: PointerEvent) {
-    event.preventDefault();
-    cleanupResizeTracking();
-    setIsResizing(true);
-
-    // Capture the pointer to ensure we receive events even if cursor leaves the handle
-    const target = event.currentTarget as HTMLElement;
-    activeResizeHandle = target;
-    activeResizePointerId = event.pointerId;
+    event.preventDefault()
+    cleanupResizeTracking()
+    setIsResizing(true)
+
+    const target = event.currentTarget as HTMLElement
+    activeResizeHandle = target
+    activeResizePointerId = event.pointerId
+
     try {
-      target.setPointerCapture(event.pointerId);
+      target.setPointerCapture(event.pointerId)
     } catch {
-      // Pointer capture not supported, continue without it
+      // Pointer capture not supported, continue without it.
     }
 
-    // Store initial values for the drag operation
-    const startY = event.clientY;
-    const startHeight = inputHeight();
-    const computedMax = computeMaxHeight();
+    const startY = event.clientY
+    const startHeight = fieldContainerRef?.getBoundingClientRect().height ?? 104
+    const computedMax = computeMaxFieldHeight()
 
-    /**
-     * Handles pointer movement during resize drag.
-     * Calculates new height based on drag direction and clamps to bounds.
-     * Dragging up increases height (makes input taller).
-     */
     function handlePointerMove(moveEvent: PointerEvent) {
-      moveEvent.preventDefault();
-      const deltaY = startY - moveEvent.clientY;
-      const newHeight = Math.max(
-        DEFAULT_INPUT_HEIGHT,
-        Math.min(computedMax, startHeight + deltaY),
-      );
-      setInputHeight(newHeight);
+      moveEvent.preventDefault()
+      const deltaY = startY - moveEvent.clientY
+      const nextHeight = Math.max(104, Math.min(computedMax, startHeight + deltaY))
+      setInputHeight(nextHeight)
     }
 
-    /**
-     * Handles the end of a resize drag operation.
-     * Releases pointer capture and removes event listeners.
-     */
     function handlePointerUp(upEvent: PointerEvent) {
-      upEvent.preventDefault();
-      cleanupResizeTracking();
-      // Restore focus to textarea after resize
-      textareaRef?.focus();
+      upEvent.preventDefault()
+      cleanupResizeTracking()
+      textareaRef?.focus()
     }
 
-    activePointerMoveHandler = handlePointerMove;
-    activePointerUpHandler = handlePointerUp;
-    document.addEventListener("pointermove", handlePointerMove);
-    document.addEventListener("pointerup", handlePointerUp);
-    document.addEventListener("pointercancel", handlePointerUp);
+    activePointerMoveHandler = handlePointerMove
+    activePointerUpHandler = handlePointerUp
+    document.addEventListener('pointermove', handlePointerMove)
+    document.addEventListener('pointerup', handlePointerUp)
+    document.addEventListener('pointercancel', handlePointerUp)
   }
 
   onCleanup(() => {
-    cleanupResizeTracking();
-  });
+    cleanupResizeTracking()
+  })
 
   async function handleSend() {
-    const text = prompt().trim();
-    const currentAttachments = attachments();
-    if (props.disabled || (!text && currentAttachments.length === 0)) return;
+    const text = prompt().trim()
+    const currentAttachments = attachments()
+    if (props.disabled || (!text && currentAttachments.length === 0)) return
 
-    const isShellMode = mode() === "shell";
+    const isShellMode = mode() === "shell"
 
     // Slash command routing (match OpenCode TUI): only run if the command exists.
-    const isSlashCandidate = !isShellMode && text.startsWith("/");
-    const firstSpace = isSlashCandidate ? text.indexOf(" ") : -1;
-    const commandToken = isSlashCandidate
-      ? firstSpace === -1
-        ? text
-        : text.slice(0, firstSpace)
-      : "";
-    const commandName = isSlashCandidate ? commandToken.slice(1) : "";
-    const commandArgs = isSlashCandidate
-      ? firstSpace === -1
-        ? ""
-        : text.slice(firstSpace + 1).trimStart()
-      : "";
+    const isSlashCandidate = !isShellMode && text.startsWith("/")
+    const firstSpace = isSlashCandidate ? text.indexOf(" ") : -1
+    const commandToken = isSlashCandidate ? (firstSpace === -1 ? text : text.slice(0, firstSpace)) : ""
+    const commandName = isSlashCandidate ? commandToken.slice(1) : ""
+    const commandArgs = isSlashCandidate ? (firstSpace === -1 ? "" : text.slice(firstSpace + 1).trimStart()) : ""
 
     const isKnownSlashCommand =
       isSlashCandidate &&
       commandName.length > 0 &&
-      getCommands(props.instanceId).some((cmd) => cmd.name === commandName);
+      getCommands(props.instanceId).some((cmd) => cmd.name === commandName)
 
-    const resolvedCommandArgs = isKnownSlashCommand
-      ? resolvePastedPlaceholders(commandArgs, currentAttachments)
-      : "";
+    const resolvedCommandArgs = isKnownSlashCommand ? resolvePastedPlaceholders(commandArgs, currentAttachments) : ""
     const resolvedPrompt = isKnownSlashCommand
       ? resolvedCommandArgs
         ? `${commandToken} ${resolvedCommandArgs}`
         : commandToken
-      : resolvePastedPlaceholders(text, currentAttachments);
-    const historyEntry = resolvedPrompt;
+      : resolvePastedPlaceholders(text, currentAttachments)
+    const historyEntry = resolvedPrompt
 
-    const refreshHistory = () => recordHistoryEntry(historyEntry);
+    const refreshHistory = () => recordHistoryEntry(historyEntry)
 
-    // Reset the input height to the default size before sending.
-    setInputHeight(DEFAULT_INPUT_HEIGHT);
-    clearPrompt();
-    clearHistoryDraft();
-    setMode("normal");
+    setExpandState("normal")
+    setInputHeight(null)
+    clearPrompt()
+    clearHistoryDraft()
+    setMode("normal")
 
     // Ignore attachments for slash commands, but keep them for next prompt.
     if (!isKnownSlashCommand) {
-      clearAttachments(props.instanceId, props.sessionId);
-      syncAttachmentCounters("");
-      setIgnoredAtPositions(new Set<number>());
+      clearAttachments(props.instanceId, props.sessionId)
+      syncAttachmentCounters("")
+      setIgnoredAtPositions(new Set<number>())
     } else {
-      const consumedIds = getConsumedPastedTextAttachmentIds(
-        commandArgs,
-        currentAttachments,
-      );
+      const consumedIds = getConsumedPastedTextAttachmentIds(commandArgs, currentAttachments)
       for (const attachmentId of consumedIds) {
-        removeAttachment(props.instanceId, props.sessionId, attachmentId);
+        removeAttachment(props.instanceId, props.sessionId, attachmentId)
       }
-      syncAttachmentCounters("");
-      setIgnoredAtPositions(new Set<number>());
+      syncAttachmentCounters("")
+      setIgnoredAtPositions(new Set<number>())
     }
+
+    clearHistoryDraft()
+
     if (isKnownSlashCommand) {
       // Record attempted slash commands even if execution fails.
-      void refreshHistory();
+      void refreshHistory()
     }
 
     try {
       if (isShellMode) {
         if (props.onRunShell) {
-          await props.onRunShell(resolvedPrompt);
+          await props.onRunShell(resolvedPrompt)
         } else {
-          await props.onSend(resolvedPrompt, []);
+          await props.onSend(resolvedPrompt, [])
         }
       } else if (isKnownSlashCommand) {
-        await executeCustomCommand(
-          props.instanceId,
-          props.sessionId,
-          commandName,
-          resolvedCommandArgs,
-        );
+        await executeCustomCommand(props.instanceId, props.sessionId, commandName, resolvedCommandArgs)
       } else {
-        await props.onSend(resolvedPrompt, currentAttachments);
+        await props.onSend(resolvedPrompt, currentAttachments)
       }
       if (!isKnownSlashCommand) {
-        void refreshHistory();
+        void refreshHistory()
       }
     } catch (error) {
-      log.error("Failed to send message:", error);
+      log.error("Failed to send message:", error)
       showAlertDialog(t("promptInput.send.errorFallback"), {
         title: t("promptInput.send.errorTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
-      });
+      })
     } finally {
-      textareaRef?.focus();
+      textareaRef?.focus()
     }
   }
 
   function handleAbort() {
-    if (!props.onAbortSession || !props.isSessionBusy) return;
-    void props.onAbortSession();
+    if (!props.onAbortSession || !props.isSessionBusy) return
+    void props.onAbortSession()
   }
 
-  /**
-   * Handles expand/shrink button clicks.
-   * When expand=true, sets height to default expanded height (clamped to max).
-   * When expand=false, resets height to default/minimum height.
-   * Preserves textarea focus after the operation.
-   */
-  function handleExpandToggle(expand: boolean) {
-    if (expand) {
-      const computedMax = computeMaxHeight();
-      setInputHeight(Math.min(DEFAULT_EXPANDED_HEIGHT, computedMax));
-    } else {
-      setInputHeight(DEFAULT_INPUT_HEIGHT);
-    }
-    // Keep focus on textarea after toggling
-    textareaRef?.focus();
+  function handleExpandToggle(nextState: "normal" | "expanded") {
+    setInputHeight(null)
+    setExpandState(nextState)
+    // Keep focus on textarea
+    textareaRef?.focus()
   }
 
   function handleClearPrompt() {
-    clearPrompt();
-    clearHistoryDraft();
-    resetHistoryNavigation();
-    setShowPicker(false);
-    setPickerMode("mention");
-    setAtPosition(null);
-    setSearchQuery("");
-    setIgnoredAtPositions(new Set<number>());
-    syncAttachmentCounters("");
-    textareaRef?.focus();
+    clearPrompt()
+    clearHistoryDraft()
+    resetHistoryNavigation()
+    setShowPicker(false)
+    setPickerMode("mention")
+    setAtPosition(null)
+    setSearchQuery("")
+    setIgnoredAtPositions(new Set<number>())
+    syncAttachmentCounters("")
+    textareaRef?.focus()
   }
 
   async function handleAttachFiles() {
-    if (props.disabled) return;
+    if (props.disabled) return
     if (isDesktopHost() && isLocalWindow()) {
-      fileInputRef?.click();
-      return;
+      fileInputRef?.click()
+      return
     }
-    setIsFileBrowserOpen(true);
+    setIsFileBrowserOpen(true)
   }
 
-  async function handleFileBrowserSelect(
-    path: string,
-    entry?: FileSystemEntry,
-  ) {
-    if (props.disabled) return;
-    if (
-      typeof entry?.size === "number" &&
-      entry.size > MAX_READABLE_PICKED_FILE_BYTES
-    ) {
+  async function handleFileBrowserSelect(path: string, entry?: FileSystemEntry) {
+    if (props.disabled) return
+    if (typeof entry?.size === "number" && entry.size > MAX_READABLE_PICKED_FILE_BYTES) {
       showAlertDialog(t("promptInput.attachFiles.tooLarge.one"), {
         title: t("promptInput.attachFiles.skipped.title"),
         variant: "warning",
-      });
-      textareaRef?.focus();
-      return;
+      })
+      textareaRef?.focus()
+      return
     }
     try {
-      const filePath = entry?.path ?? path;
-      const displayPath = entry?.absolutePath ?? path;
-      const response = await serverApi.readFileSystemFile(filePath, {
-        encoding: "base64",
-      });
-      handleFilePathAttachment(displayPath, response.contents, {
-        encoding: response.encoding,
-      });
-      setIsFileBrowserOpen(false);
+      const filePath = entry?.path ?? path
+      const displayPath = entry?.absolutePath ?? path
+      const response = await serverApi.readFileSystemFile(filePath, { encoding: "base64" })
+      handleFilePathAttachment(displayPath, response.contents, { encoding: response.encoding })
+      setIsFileBrowserOpen(false)
     } catch (error) {
-      log.error("Failed to attach selected file:", error);
+      log.error("Failed to attach selected file:", error)
       showAlertDialog(error instanceof Error ? error.message : String(error), {
         title: t("promptInput.attachFiles.errorTitle"),
         variant: "error",
-      });
+      })
     } finally {
-      textareaRef?.focus();
+      textareaRef?.focus()
     }
   }
 
   function handleFileInputChange(event: Event) {
-    const input = event.currentTarget as HTMLInputElement;
+    const input = event.currentTarget as HTMLInputElement
     if (props.disabled) {
-      input.value = "";
-      return;
+      input.value = ""
+      return
     }
-    handleFileSelection(input.files);
-    input.value = "";
+    handleFileSelection(input.files)
+    input.value = ""
   }
 
   function insertBlockContent(block: string) {
-    const textarea = textareaRef;
-    const current = prompt();
-    const start = textarea ? textarea.selectionStart : current.length;
-    const end = textarea ? textarea.selectionEnd : current.length;
-    const before = current.substring(0, start);
-    const after = current.substring(end);
-    const needsLeading =
-      before.length > 0 && !before.endsWith("\n") ? "\n" : "";
-    const insertion = `${needsLeading}${block}`;
-    const nextValue = before + insertion + after;
-
-    setPrompt(nextValue);
-    setShowPicker(false);
-    setAtPosition(null);
+    const textarea = textareaRef
+    const current = prompt()
+    const start = textarea ? textarea.selectionStart : current.length
+    const end = textarea ? textarea.selectionEnd : current.length
+    const before = current.substring(0, start)
+    const after = current.substring(end)
+    const needsLeading = before.length > 0 && !before.endsWith("\n") ? "\n" : ""
+    const insertion = `${needsLeading}${block}`
+    const nextValue = before + insertion + after
+
+    setPrompt(nextValue)
+    setShowPicker(false)
+    setAtPosition(null)
 
     if (textarea) {
       setTimeout(() => {
-        const cursor = before.length + insertion.length;
-        textarea.focus();
-        textarea.setSelectionRange(cursor, cursor);
-      }, 0);
+        const cursor = before.length + insertion.length
+        textarea.focus()
+        textarea.setSelectionRange(cursor, cursor)
+      }, 0)
     }
   }
 
   function insertQuotedSelection(rawText: string) {
-    const normalized = (rawText ?? "").replace(/\r/g, "").trim();
-    if (!normalized) return;
+    const normalized = (rawText ?? "").replace(/\r/g, "").trim()
+    if (!normalized) return
     const limited =
       normalized.length > SELECTION_INSERT_MAX_LENGTH
         ? normalized.slice(0, SELECTION_INSERT_MAX_LENGTH).trimEnd()
-        : normalized;
+        : normalized
     const lines = limited
       .split(/\n/)
       .map((line) => line.trim())
-      .filter((line) => line.length > 0);
-    if (lines.length === 0) return;
+      .filter((line) => line.length > 0)
+    if (lines.length === 0) return
 
-    const blockquote = lines.map((line) => `> ${line}`).join("\n");
-    if (!blockquote) return;
+    const blockquote = lines.map((line) => `> ${line}`).join("\n")
+    if (!blockquote) return
 
     // End the blockquote with a blank line so the user's next line
     // doesn't get parsed as a lazy continuation of the quote.
-    insertBlockContent(`${blockquote}\n\n`);
+    insertBlockContent(`${blockquote}\n\n`)
   }
 
   function insertCodeSelection(rawText: string) {
-    const normalized = (rawText ?? "").replace(/\r/g, "");
+    const normalized = (rawText ?? "").replace(/\r/g, "")
     const limited =
       normalized.length > SELECTION_INSERT_MAX_LENGTH
         ? normalized.slice(0, SELECTION_INSERT_MAX_LENGTH)
-        : normalized;
-    const trimmed = limited.replace(/^\n+/, "").replace(/\n+$/, "");
-    if (!trimmed) return;
+        : normalized
+    const trimmed = limited.replace(/^\n+/, "").replace(/\n+$/, "")
+    if (!trimmed) return
 
-    const block = "```\n" + trimmed + "\n```\n\n";
-    insertBlockContent(block);
+    const block = "```\n" + trimmed + "\n```\n\n"
+    insertBlockContent(block)
   }
 
-  const canStop = () => Boolean(props.isSessionBusy && props.onAbortSession);
+  const canStop = () => Boolean(props.isSessionBusy && props.onAbortSession)
 
-  const hasHistory = () => history().length > 0;
-  const canHistoryGoPrevious = () =>
-    hasHistory() &&
-    (historyIndex() === -1 || historyIndex() < history().length - 1);
-  const canHistoryGoNext = () => historyIndex() >= 0;
+  const hasHistory = () => history().length > 0
+  const canHistoryGoPrevious = () => hasHistory() && (historyIndex() === -1 || historyIndex() < history().length - 1)
+  const canHistoryGoNext = () => historyIndex() >= 0
 
   const canSend = () => {
-    if (props.disabled) return false;
-    const hasText = prompt().trim().length > 0;
-    if (mode() === "shell") return hasText;
-    return hasText || attachments().length > 0;
-  };
+    if (props.disabled) return false
+    const hasText = prompt().trim().length > 0
+    if (mode() === "shell") return hasText
+    return hasText || attachments().length > 0
+  }
 
-  const canClearPrompt = () => prompt().length > 0;
+  const canClearPrompt = () => prompt().length > 0
 
   const shellHint = () =>
     mode() === "shell"
       ? { key: "Esc", text: t("promptInput.hints.shell.exit") }
-      : { key: "!", text: t("promptInput.hints.shell.enable") };
-  const commandHint = () => ({
-    key: "/",
-    text: t("promptInput.hints.commands"),
-  });
+      : { key: "!", text: t("promptInput.hints.shell.enable") }
+  const commandHint = () => ({ key: "/", text: t("promptInput.hints.commands") })
 
-  const submitOnEnter = () => preferences().promptSubmitOnEnter;
+  const submitOnEnter = () => preferences().promptSubmitOnEnter
 
   const handleKeyDown = usePromptKeyDown({
     getTextarea: () => textareaRef ?? null,
@@ -760,104 +644,79 @@ export default function PromptInput(props: PromptInputProps) {
     ignoredAtPositions,
     setIgnoredAtPositions,
     getAttachments: attachments,
-    removeAttachment: (attachmentId) =>
-      removeAttachment(props.instanceId, props.sessionId, attachmentId),
+    removeAttachment: (attachmentId) => removeAttachment(props.instanceId, props.sessionId, attachmentId),
     submitOnEnter,
     onSend: () => void handleSend(),
     selectPreviousHistory: (force) =>
-      selectPreviousHistory({
-        force,
-        isPickerOpen: showPicker(),
-        getTextarea: () => textareaRef ?? null,
-      }),
+      selectPreviousHistory({ force, isPickerOpen: showPicker(), getTextarea: () => textareaRef ?? null }),
     selectNextHistory: (force) =>
-      selectNextHistory({
-        force,
-        isPickerOpen: showPicker(),
-        getTextarea: () => textareaRef ?? null,
-      }),
-  });
-
-  const shouldShowOverlay = () => prompt().length === 0;
+      selectNextHistory({ force, isPickerOpen: showPicker(), getTextarea: () => textareaRef ?? null }),
+  })
+
+  const shouldShowOverlay = () => prompt().length === 0
   const voiceInput = usePromptVoiceInput({
     prompt,
     setPrompt,
     getTextarea: () => textareaRef ?? null,
     enabled: () => preferences().showPromptVoiceInput,
     disabled: () => Boolean(props.disabled),
-  });
+  })
   const showVoiceInput = () =>
     preferences().showPromptVoiceInput &&
-    (voiceInput.canUseVoiceInput() ||
-      voiceInput.isRecording() ||
-      voiceInput.isTranscribing());
-  const conversationModeEnabled = () =>
-    isConversationModeEnabled(props.instanceId);
-  const showConversationToggle = () =>
-    showVoiceInput() || conversationModeEnabled();
-  const canToggleConversationMode = () => canUseConversationMode();
+    (voiceInput.canUseVoiceInput() || voiceInput.isRecording() || voiceInput.isTranscribing())
+  const conversationModeEnabled = () => isConversationModeEnabled(props.instanceId)
+  const showConversationToggle = () => showVoiceInput() || conversationModeEnabled()
+  const canToggleConversationMode = () => canUseConversationMode()
   const conversationModeButtonTitle = () =>
     conversationModeEnabled()
       ? t("promptInput.conversationMode.disable.title")
-      : t("promptInput.conversationMode.enable.title");
+      : t("promptInput.conversationMode.enable.title")
 
-  const instance = () => getActiveInstance();
+  const instance = () => getActiveInstance()
 
-  let voiceButtonPressed = false;
+  let voiceButtonPressed = false
 
   const beginVoicePress = (event?: PointerEvent | KeyboardEvent) => {
-    if (
-      voiceButtonPressed ||
-      props.disabled ||
-      voiceInput.isTranscribing() ||
-      !voiceInput.canUseVoiceInput()
-    )
-      return;
-    voiceButtonPressed = true;
+    if (voiceButtonPressed || props.disabled || voiceInput.isTranscribing() || !voiceInput.canUseVoiceInput()) return
+    voiceButtonPressed = true
     // Treat a mic press as barge-in: stop any active assistant speech before listening.
-    clearConversationPlaybackForInstance(props.instanceId);
+    clearConversationPlaybackForInstance(props.instanceId)
 
     if (event instanceof PointerEvent) {
-      const target = event.currentTarget;
+      const target = event.currentTarget
       if (target instanceof HTMLElement) {
         try {
-          target.setPointerCapture(event.pointerId);
+          target.setPointerCapture(event.pointerId)
         } catch {
           // no-op
         }
       }
     }
 
-    void voiceInput.startRecording();
-  };
+    void voiceInput.startRecording()
+  }
 
   const endVoicePress = () => {
-    if (!voiceButtonPressed) return;
-    voiceButtonPressed = false;
-    voiceInput.stopRecording();
-  };
+    if (!voiceButtonPressed) return
+    voiceButtonPressed = false
+    voiceInput.stopRecording()
+  }
 
   return (
     <div class="prompt-input-container">
-      {/* Resize handle at the top edge of the input container */}
       <div
-        class={`prompt-resize-handle ${isResizing() ? "is-resizing" : ""}`}
+        class={`prompt-resize-handle ${isResizing() ? 'is-resizing' : ''}`}
         onPointerDown={handleResizeStart}
-        aria-label={t("promptInput.resizeHandle.ariaLabel")}
         title={t("promptInput.resizeHandle.title")}
       />
       <div
-        ref={containerRef}
+        ref={wrapperRef}
         class={`prompt-input-wrapper relative ${isDragging() ? "border-2" : ""}`}
-        style={{
-          height: `${inputHeight()}px`,
-          ...(isDragging()
-            ? {
-                "border-color": "var(--accent-primary)",
-                "background-color": "rgba(0, 102, 255, 0.05)",
-              }
-            : {}),
-        }}
+        style={
+          isDragging()
+            ? "border-color: var(--accent-primary); background-color: rgba(0, 102, 255, 0.05);"
+            : ""
+        }
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
@@ -870,8 +729,8 @@ export default function PromptInput(props: PromptInputProps) {
               onClose={handlePickerClose}
               onSelect={handlePickerSelect}
               onSubmitWithoutSelection={() => {
-                handlePickerClose();
-                void handleSend();
+                handlePickerClose()
+                void handleSend()
               }}
               agents={instanceAgents()}
               commands={getCommands(props.instanceId)}
@@ -884,28 +743,53 @@ export default function PromptInput(props: PromptInputProps) {
         </Show>
 
         <div class="prompt-input-main flex flex-1 flex-col">
-          <div class="prompt-input-field-container">
-            <div class="prompt-input-field">
+          <div
+            ref={fieldContainerRef}
+            class={`prompt-input-field-container ${expandState() === "expanded" ? "is-expanded" : ""}`}
+            style={inputHeight() !== null ? { height: `${inputHeight()}px`, 'min-height': `${inputHeight()}px` } : undefined}
+          >
+
+            <div
+              class={`prompt-input-field ${expandState() === "expanded" ? "is-expanded" : ""}`}
+              style={inputHeight() !== null ? { height: `${inputHeight()}px`, 'min-height': `${inputHeight()}px` } : undefined}
+            >
               <textarea
                 ref={textareaRef}
-                class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""}`}
+                class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""} ${expandState() === "expanded" ? "is-expanded" : ""}`}
                 dir="auto"
                 placeholder={getPlaceholder()}
                 value={prompt()}
                 onInput={handleInput}
                 onKeyDown={handleKeyDown}
                 onPaste={handlePaste}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
                 disabled={props.disabled}
-                rows={3}
+                rows={expandState() === "expanded" ? (props.compactLayout ? 10 : 15) : 3}
                 spellcheck={false}
                 autocorrect="off"
                 autoCapitalize="off"
                 autocomplete="off"
+                style={inputHeight() !== null ? { height: `${inputHeight()}px`, 'min-height': `${inputHeight()}px`, 'overflow-y': 'auto' } : undefined}
               />
+              <button
+                type="button"
+                class="prompt-clear-button prompt-clear-button-inline"
+                onClick={handleClearPrompt}
+                disabled={!canClearPrompt()}
+                aria-label={t("promptInput.clear.ariaLabel")}
+                title={t("promptInput.clear.title")}
+              >
+                <X class="h-4 w-4" aria-hidden="true" />
+              </button>
+              <div class="prompt-expand-button-inline">
+                <ExpandButton
+                  expandState={expandState}
+                  onToggleExpand={handleExpandToggle}
+                />
+              </div>
               <Show when={shouldShowOverlay()}>
-                <div
-                  class={`prompt-input-overlay keyboard-hints ${mode() === "shell" ? "shell-mode" : ""}`}
-                >
+                <div class={`prompt-input-overlay keyboard-hints ${mode() === "shell" ? "shell-mode" : ""}`}>
                   <Show
                     when={props.escapeInDebounce}
                     fallback={
@@ -915,54 +799,39 @@ export default function PromptInput(props: PromptInputProps) {
                             when={submitOnEnter()}
                             fallback={
                               <>
-                                <Kbd>Enter</Kbd>{" "}
-                                {t("promptInput.overlay.newLine")} •{" "}
-                                <Kbd shortcut="cmd+enter" />{" "}
-                                {t("promptInput.overlay.send")}
+                                <Kbd>Enter</Kbd> {t("promptInput.overlay.newLine")} • <Kbd shortcut="cmd+enter" /> {t("promptInput.overlay.send")}
                               </>
                             }
                           >
                             <>
-                              <Kbd>Enter</Kbd> {t("promptInput.overlay.send")} •{" "}
-                              <Kbd shortcut="cmd+enter" />{" "}
-                              {t("promptInput.overlay.newLine")}
+                              <Kbd>Enter</Kbd> {t("promptInput.overlay.send")} • <Kbd shortcut="cmd+enter" /> {t("promptInput.overlay.newLine")}
                             </>
-                          </Show>{" "}
-                          • <Kbd>↑↓</Kbd> {t("promptInput.overlay.history")}
+                          </Show>
+                          {" "}• <Kbd>↑↓</Kbd> {t("promptInput.overlay.history")}
                         </span>
                         <Show when={attachments().length > 0}>
-                          <span class="prompt-overlay-text prompt-overlay-muted">
-                            {t("promptInput.overlay.attachments", {
-                              count: attachments().length,
-                            })}
-                          </span>
+                          <span class="prompt-overlay-text prompt-overlay-muted">{t("promptInput.overlay.attachments", { count: attachments().length })}</span>
                         </Show>
                         <span class="prompt-overlay-text">
                           • <Kbd>{shellHint().key}</Kbd> {shellHint().text}
                         </span>
                         <Show when={mode() !== "shell"}>
                           <span class="prompt-overlay-text">
-                            • <Kbd>{commandHint().key}</Kbd>{" "}
-                            {commandHint().text}
+                            • <Kbd>{commandHint().key}</Kbd> {commandHint().text}
                           </span>
                         </Show>
                         <Show when={mode() === "shell"}>
-                          <span class="prompt-overlay-shell-active">
-                            {t("promptInput.overlay.shellModeActive")}
-                          </span>
+                          <span class="prompt-overlay-shell-active">{t("promptInput.overlay.shellModeActive")}</span>
                         </Show>
                       </>
                     }
                   >
                     <>
                       <span class="prompt-overlay-text prompt-overlay-warning">
-                        {t("promptInput.overlay.press")} <Kbd>Esc</Kbd>{" "}
-                        {t("promptInput.overlay.againToAbort")}
+                        {t("promptInput.overlay.press")} <Kbd>Esc</Kbd> {t("promptInput.overlay.againToAbort")}
                       </span>
                       <Show when={mode() === "shell"}>
-                        <span class="prompt-overlay-shell-active">
-                          {t("promptInput.overlay.shellModeActive")}
-                        </span>
+                        <span class="prompt-overlay-shell-active">{t("promptInput.overlay.shellModeActive")}</span>
                       </Show>
                     </>
                   </Show>
@@ -980,47 +849,36 @@ export default function PromptInput(props: PromptInputProps) {
                   type="button"
                   class={`prompt-voice-button prompt-nav-voice-button ${voiceInput.isRecording() ? "is-recording" : ""}`}
                   onPointerDown={(event) => {
-                    event.preventDefault();
-                    beginVoicePress(event);
+                    event.preventDefault()
+                    beginVoicePress(event)
                   }}
                   onPointerUp={(event) => {
-                    event.preventDefault();
-                    endVoicePress();
+                    event.preventDefault()
+                    endVoicePress()
                   }}
                   onPointerCancel={() => endVoicePress()}
                   onLostPointerCapture={() => endVoicePress()}
                   onKeyDown={(event) => {
-                    if (event.repeat) return;
-                    if (event.key !== " " && event.key !== "Enter") return;
-                    event.preventDefault();
-                    beginVoicePress(event);
+                    if (event.repeat) return
+                    if (event.key !== " " && event.key !== "Enter") return
+                    event.preventDefault()
+                    beginVoicePress(event)
                   }}
                   onKeyUp={(event) => {
-                    if (event.key !== " " && event.key !== "Enter") return;
-                    event.preventDefault();
-                    endVoicePress();
+                    if (event.key !== " " && event.key !== "Enter") return
+                    event.preventDefault()
+                    endVoicePress()
                   }}
                   onBlur={() => endVoicePress()}
-                  disabled={
-                    !voiceInput.isRecording() &&
-                    (props.disabled ||
-                      voiceInput.isTranscribing() ||
-                      !voiceInput.canUseVoiceInput())
-                  }
+                  disabled={!voiceInput.isRecording() && (props.disabled || voiceInput.isTranscribing() || !voiceInput.canUseVoiceInput())}
                   aria-label={voiceInput.buttonTitle()}
                   title={voiceInput.buttonTitle()}
                 >
                   <Show
                     when={voiceInput.isRecording()}
                     fallback={
-                      <Show
-                        when={voiceInput.isTranscribing()}
-                        fallback={<Mic class="h-4 w-4" aria-hidden="true" />}
-                      >
-                        <Loader2
-                          class="h-4 w-4 animate-spin"
-                          aria-hidden="true"
-                        />
+                      <Show when={voiceInput.isTranscribing()} fallback={<Mic class="h-4 w-4" aria-hidden="true" />}>
+                        <Loader2 class="h-4 w-4 animate-spin" aria-hidden="true" />
                       </Show>
                     }
                   >
@@ -1033,9 +891,7 @@ export default function PromptInput(props: PromptInputProps) {
                   type="button"
                   class={`prompt-voice-button prompt-nav-voice-button prompt-conversation-button ${conversationModeEnabled() ? "is-active" : ""}`}
                   onClick={() => toggleConversationMode(props.instanceId)}
-                  disabled={
-                    !conversationModeEnabled() && !canToggleConversationMode()
-                  }
+                  disabled={!conversationModeEnabled() && !canToggleConversationMode()}
                   aria-pressed={conversationModeEnabled()}
                   aria-label={conversationModeButtonTitle()}
                   title={conversationModeButtonTitle()}
@@ -1062,23 +918,8 @@ export default function PromptInput(props: PromptInputProps) {
               >
                 <Paperclip class="h-4 w-4" aria-hidden="true" />
               </button>
-              <button
-                type="button"
-                class="prompt-clear-button"
-                onClick={handleClearPrompt}
-                disabled={!canClearPrompt()}
-                aria-label={t("promptInput.clear.ariaLabel")}
-                title={t("promptInput.clear.title")}
-              >
-                <X class="h-4 w-4" aria-hidden="true" />
-              </button>
             </div>
             <div class="prompt-nav-column prompt-nav-column-right">
-              <ExpandButton
-                currentHeight={inputHeight}
-                defaultHeight={() => DEFAULT_INPUT_HEIGHT}
-                onToggleExpand={handleExpandToggle}
-              />
               <Show when={hasHistory()}>
                 <button
                   type="button"
@@ -1124,12 +965,7 @@ export default function PromptInput(props: PromptInputProps) {
             aria-label={t("promptInput.stopSession.ariaLabel")}
             title={t("promptInput.stopSession.title")}
           >
-            <svg
-              class="stop-icon"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
-            >
+            <svg class="stop-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <rect x="4" y="4" width="12" height="12" rx="2" />
             </svg>
           </button>
@@ -1144,23 +980,9 @@ export default function PromptInput(props: PromptInputProps) {
               when={mode() === "shell"}
               fallback={<span class="send-icon">▶</span>}
             >
-              <svg
-                class="shell-icon"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M5 8l5 4-5 4"
-                />
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M13 16h6"
-                />
+              <svg class="shell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 8l5 4-5 4" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h6" />
               </svg>
             </Show>
           </button>
@@ -1172,12 +994,12 @@ export default function PromptInput(props: PromptInputProps) {
         mode="files"
         title={t("promptInput.attachFiles.dialogTitle")}
         onClose={() => {
-          setIsFileBrowserOpen(false);
-          textareaRef?.focus();
+          setIsFileBrowserOpen(false)
+          textareaRef?.focus()
         }}
         onSelect={(path, entry) => void handleFileBrowserSelect(path, entry)}
         initialPath={props.instanceFolder}
       />
     </div>
-  );
+  )
 }
diff --git a/packages/ui/src/components/prompt-input/types.ts b/packages/ui/src/components/prompt-input/types.ts
index 34aac5f1c..fdfd2a9fc 100644
--- a/packages/ui/src/components/prompt-input/types.ts
+++ b/packages/ui/src/components/prompt-input/types.ts
@@ -1,6 +1,7 @@
 import type { Attachment } from "../../types/attachment"
 
 export type PromptMode = "normal" | "shell"
+export type ExpandState = "normal" | "expanded"
 export type PickerMode = "mention" | "command"
 export type PromptInsertMode = "quote" | "code"
 
@@ -21,6 +22,9 @@ export interface PromptInputProps {
   // Used to scope global "type-to-focus" behavior.
   isActive?: boolean
 
+  // Phone/tablet layouts should keep the expanded prompt more compact.
+  compactLayout?: boolean
+
   onSend: (prompt: string, attachments: Attachment[]) => Promise<void>
   onRunShell?: (command: string) => Promise<void>
   disabled?: boolean

From 228c3a25fd91710450c26faa838e025098874e40 Mon Sep 17 00:00:00 2001
From: jollyxenon <1378319314@qq.com>
Date: Thu, 14 May 2026 20:57:16 +0800
Subject: [PATCH 04/11] fix(ui): layer drag handle onto narrow prompt layout

Add the top-edge resize affordance while preserving the maintainer's narrow-pane grid, inline controls, and compact-height rules. The CSS remains responsible for the original responsive layout, and the drag handle only overlays new pointer behavior on top of it.

Validation was completed with npm run typecheck --workspace @codenomad/ui and npm run build --workspace @codenomad/ui.
---
 .../ui/src/styles/messaging/prompt-input.css  | 143 ++++++++++--------
 1 file changed, 83 insertions(+), 60 deletions(-)

diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 845ed6cd1..3db6ef238 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -5,7 +5,6 @@
   position: relative;
 }
 
-/* Resize handle at the top edge of the prompt input container */
 .prompt-resize-handle {
   position: absolute;
   top: 0;
@@ -16,10 +15,8 @@
   touch-action: none;
   z-index: 10;
   background: transparent;
-  transition: background-color 0.15s ease;
 }
 
-/* Visual indicator line in the center of the resize handle */
 .prompt-resize-handle::after {
   content: "";
   position: absolute;
@@ -36,19 +33,12 @@
     background-color 0.15s ease;
 }
 
-/* Hover state for the resize handle */
-.prompt-resize-handle:hover::after {
-  opacity: 1;
-  background-color: var(--accent-primary);
-}
-
-/* Active/dragging state for the resize handle */
+.prompt-resize-handle:hover::after,
 .prompt-resize-handle.is-resizing::after {
   opacity: 1;
   background-color: var(--accent-primary);
 }
 
-/* Hide resize handle on touch devices where drag is less practical */
 @media (pointer: coarse) {
   .prompt-resize-handle {
     display: none;
@@ -59,7 +49,6 @@
   --prompt-input-compact-height: 104px;
   @apply grid items-stretch;
   grid-template-columns: minmax(0, 1fr) 72px 64px;
-  grid-template-rows: minmax(0, 1fr);
   gap: 0;
   padding: 0;
 }
@@ -71,7 +60,6 @@
 .prompt-input-actions {
   @apply flex flex-col items-center;
   align-self: stretch;
-  justify-content: flex-start;
   height: 100%;
   padding: 0.5rem 0.25rem;
   gap: 0.5rem;
@@ -82,7 +70,6 @@
   align-self: stretch;
   justify-content: space-between;
   width: 100%;
-  height: 100%;
   gap: 0.5rem;
   padding: 0.5rem 0.25rem;
   border-inline-start: 1px solid var(--border-base);
@@ -106,7 +93,7 @@
 .prompt-input {
   @apply w-full pt-2.5 border text-sm resize-none outline-none transition-colors;
   padding-inline-start: 0.75rem;
-  padding-inline-end: 0.75rem;
+  padding-inline-end: 4.5rem;
   font-family: inherit;
   background-color: var(--surface-base);
   color: var(--text-primary);
@@ -117,6 +104,19 @@
   padding-bottom: 0;
   height: 100%;
   min-height: 100%;
+}
+
+.prompt-input-field-container.is-expanded {
+  height: auto;
+}
+
+.prompt-input-field.is-expanded {
+  height: auto;
+}
+
+.prompt-input.is-expanded {
+  height: auto;
+  min-height: 0;
   overflow-y: auto;
 }
 
@@ -172,9 +172,7 @@
   @apply w-7 h-7 flex items-center justify-center rounded-md;
   color: var(--text-muted);
   background-color: var(--control-ghost-bg);
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease;
   padding: 0;
   flex-shrink: 0;
 }
@@ -201,6 +199,20 @@
   cursor: not-allowed;
 }
 
+.prompt-clear-button-inline {
+  position: absolute;
+  top: 2.5rem;
+  inset-inline-end: 0.5rem;
+  z-index: 2;
+}
+
+.prompt-expand-button-inline {
+  position: absolute;
+  top: 0.5rem;
+  inset-inline-end: 0.5rem;
+  z-index: 2;
+}
+
 .prompt-overlay-text {
   display: inline-flex;
   align-items: center;
@@ -257,21 +269,13 @@
 .prompt-voice-button {
   @apply h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
   min-width: 2.5rem;
-  background-color: color-mix(
-    in oklab,
-    var(--surface-secondary) 82%,
-    var(--surface-base)
-  );
+  background-color: color-mix(in oklab, var(--surface-secondary) 82%, var(--surface-base));
   color: var(--text-secondary);
 }
 
 .prompt-voice-button:hover:not(:disabled) {
   color: var(--text-primary);
-  background-color: color-mix(
-    in oklab,
-    var(--accent-primary) 12%,
-    var(--surface-secondary)
-  );
+  background-color: color-mix(in oklab, var(--accent-primary) 12%, var(--surface-secondary));
   @apply scale-105;
 }
 
@@ -281,11 +285,7 @@
 
 .prompt-voice-button.is-recording {
   min-width: 3.5rem;
-  background-color: color-mix(
-    in oklab,
-    var(--button-danger-bg, rgba(239, 68, 68, 0.85)) 88%,
-    white 12%
-  );
+  background-color: color-mix(in oklab, var(--button-danger-bg, rgba(239, 68, 68, 0.85)) 88%, white 12%);
   color: var(--button-danger-text, var(--text-inverted, #ffffff));
 }
 
@@ -316,20 +316,12 @@
 }
 
 .prompt-conversation-button.is-active {
-  background-color: color-mix(
-    in oklab,
-    var(--accent-primary) 76%,
-    var(--surface-secondary)
-  );
+  background-color: color-mix(in oklab, var(--accent-primary) 76%, var(--surface-secondary));
   color: var(--text-inverted);
 }
 
 .prompt-conversation-button.is-active:hover:not(:disabled) {
-  background-color: color-mix(
-    in oklab,
-    var(--accent-primary) 88%,
-    var(--surface-secondary)
-  );
+  background-color: color-mix(in oklab, var(--accent-primary) 88%, var(--surface-secondary));
   color: var(--text-inverted);
 }
 
@@ -471,46 +463,77 @@
   }
 }
 
-.session-center-column[data-session-center-width="medium"]
-  .prompt-input-wrapper,
-.session-center-column[data-session-center-width="narrow"]
-  .prompt-input-wrapper {
+.session-center-column[data-session-center-width="medium"] .prompt-input-wrapper,
+.session-center-column[data-session-center-width="narrow"] .prompt-input-wrapper {
   min-height: var(--prompt-input-compact-height);
 }
 
-.session-center-column[data-session-center-width="medium"]
-  .prompt-input-field-container,
-.session-center-column[data-session-center-width="narrow"]
-  .prompt-input-field-container {
+.session-center-column[data-session-center-width="medium"] .prompt-input-field-container,
+.session-center-column[data-session-center-width="narrow"] .prompt-input-field-container {
   min-height: var(--prompt-input-compact-height);
-  height: 100%;
+  height: var(--prompt-input-compact-height);
 }
 
 .session-center-column[data-session-center-width="medium"] .prompt-input-field,
 .session-center-column[data-session-center-width="narrow"] .prompt-input-field {
-  min-height: var(--prompt-input-compact-height);
-  height: 100%;
+  height: var(--prompt-input-compact-height);
+}
+
+.session-center-column[data-session-center-width="medium"] .prompt-input-field-container.is-expanded,
+.session-center-column[data-session-center-width="medium"] .prompt-input-field.is-expanded,
+.session-center-column[data-session-center-width="narrow"] .prompt-input-field-container.is-expanded,
+.session-center-column[data-session-center-width="narrow"] .prompt-input-field.is-expanded {
+  height: auto;
 }
 
 .session-center-column[data-session-center-width="narrow"] .prompt-input-wrapper {
-  grid-template-columns: minmax(0, 1fr) 64px 56px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "field field"
+    "actions primary";
+}
+
+.session-center-column[data-session-center-width="narrow"] .prompt-input-main {
+  grid-area: field;
 }
 
 .session-center-column[data-session-center-width="narrow"] .prompt-input-actions {
-  padding: 0.5rem 0.125rem;
-  gap: 0.375rem;
+  grid-area: actions;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  height: auto;
+  padding: 0.25rem 0.5rem 0.5rem;
 }
 
 .session-center-column[data-session-center-width="narrow"] .prompt-input-primary-actions {
-  padding: 0.5rem 0.125rem;
-  gap: 0.375rem;
+  grid-area: primary;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  width: auto;
+  height: auto;
+  padding: 0.25rem 0.5rem 0.5rem 0;
+  border-inline-start: none;
+}
+
+.session-center-column[data-session-center-width="narrow"] .prompt-nav-buttons {
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+
+.session-center-column[data-session-center-width="narrow"] .prompt-nav-column {
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+  gap: 0.25rem;
 }
 
 @media (max-width: 640px) {
   .prompt-input {
     min-height: 0;
     padding: 0.5rem 0.75rem;
-    padding-inline-end: 0.75rem;
+    padding-inline-end: 4.5rem;
     padding-bottom: 0.75rem;
   }
 

From 0cc448ab9357ff3014a567b09645fb8366c4f923 Mon Sep 17 00:00:00 2001
From: jollyxenon <1378319314@qq.com>
Date: Thu, 14 May 2026 20:57:16 +0800
Subject: [PATCH 05/11] fix(i18n): add resize handle strings for prompt drag

Add the new resize-handle tooltip text for the locales touched by this branch so the drag affordance remains localized alongside the prompt composer updates. This keeps the new interaction discoverable without changing the maintainer's existing layout semantics.

Validation was completed with npm run typecheck --workspace @codenomad/ui and npm run build --workspace @codenomad/ui.
---
 packages/ui/src/lib/i18n/messages/es/messaging.ts | 2 +-
 packages/ui/src/lib/i18n/messages/fr/messaging.ts | 2 +-
 packages/ui/src/lib/i18n/messages/he/messaging.ts | 2 +-
 packages/ui/src/lib/i18n/messages/ja/messaging.ts | 2 +-
 packages/ui/src/lib/i18n/messages/ru/messaging.ts | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/lib/i18n/messages/es/messaging.ts b/packages/ui/src/lib/i18n/messages/es/messaging.ts
index adcc9f00a..422f85017 100644
--- a/packages/ui/src/lib/i18n/messages/es/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/es/messaging.ts
@@ -149,6 +149,7 @@ export const messagingMessages = {
   "promptInput.hints.commands": "Comandos",
   "promptInput.history.previousAriaLabel": "Prompt anterior",
   "promptInput.history.nextAriaLabel": "Siguiente prompt",
+  "promptInput.resizeHandle.title": "Arrastra para cambiar la altura del campo de entrada",
   "promptInput.overlay.newLine": "Nueva línea",
   "promptInput.overlay.send": "Enviar",
   "promptInput.overlay.filesAgents": "Archivos/agentes",
@@ -185,5 +186,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.unsupported": "La entrada de voz no es compatible con este navegador.",
   "promptInput.voiceInput.error.transcribe": "No se pudo transcribir el audio grabado.",
   "promptInput.resizeHandle.ariaLabel": "Redimensionar altura de entrada",
-  "promptInput.resizeHandle.title": "Arrastra para redimensionar la altura",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/fr/messaging.ts b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
index d979e08bb..233404708 100644
--- a/packages/ui/src/lib/i18n/messages/fr/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
@@ -149,6 +149,7 @@ export const messagingMessages = {
   "promptInput.hints.commands": "Commandes",
   "promptInput.history.previousAriaLabel": "Prompt précédent",
   "promptInput.history.nextAriaLabel": "Prompt suivant",
+  "promptInput.resizeHandle.title": "Faites glisser pour redimensionner la hauteur de saisie",
   "promptInput.overlay.newLine": "Nouvelle ligne",
   "promptInput.overlay.send": "Envoyer",
   "promptInput.overlay.filesAgents": "Fichiers/agents",
@@ -185,5 +186,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.unsupported": "La saisie vocale n'est pas prise en charge dans ce navigateur.",
   "promptInput.voiceInput.error.transcribe": "Impossible de transcrire l'audio enregistré.",
   "promptInput.resizeHandle.ariaLabel": "Redimensionner la hauteur",
-  "promptInput.resizeHandle.title": "Faites glisser pour redimensionner",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/he/messaging.ts b/packages/ui/src/lib/i18n/messages/he/messaging.ts
index 46c97f3f9..e297bf9d1 100644
--- a/packages/ui/src/lib/i18n/messages/he/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/he/messaging.ts
@@ -147,6 +147,7 @@ export const messagingMessages = {
   "promptInput.hints.commands": "פקודות",
   "promptInput.history.previousAriaLabel": "פקודה קודמת",
   "promptInput.history.nextAriaLabel": "פקודה הבאה",
+  "promptInput.resizeHandle.title": "גרור כדי לשנות את גובה שדה הקלט",
   "promptInput.overlay.newLine": "שורה חדשה",
   "promptInput.overlay.send": "שלח",
   "promptInput.overlay.filesAgents": "קבצים/סוכנים",
@@ -183,5 +184,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.unsupported": "קלט קולי אינו נתמך בדפדפן זה.",
   "promptInput.voiceInput.error.transcribe": "לא ניתן היה לתמלל את האודיו שהוקלט.",
   "promptInput.resizeHandle.ariaLabel": "שנה גובה",
-  "promptInput.resizeHandle.title": "גרור לשינוי גובה",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/ja/messaging.ts b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
index 98ac4e84d..2b15e6959 100644
--- a/packages/ui/src/lib/i18n/messages/ja/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
@@ -149,6 +149,7 @@ export const messagingMessages = {
   "promptInput.hints.commands": "コマンド",
   "promptInput.history.previousAriaLabel": "前のプロンプト",
   "promptInput.history.nextAriaLabel": "次のプロンプト",
+  "promptInput.resizeHandle.title": "ドラッグして入力欄の高さを変更",
   "promptInput.overlay.newLine": "改行",
   "promptInput.overlay.send": "送信",
   "promptInput.overlay.filesAgents": "ファイル/エージェント",
@@ -185,5 +186,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.unsupported": "このブラウザーでは音声入力はサポートされていません。",
   "promptInput.voiceInput.error.transcribe": "録音した音声を文字起こしできませんでした。",
   "promptInput.resizeHandle.ariaLabel": "入力の高さを変更",
-  "promptInput.resizeHandle.title": "ドラッグして高さを変更",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/ru/messaging.ts b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
index 5d55c4dfa..628ea4c68 100644
--- a/packages/ui/src/lib/i18n/messages/ru/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
@@ -149,6 +149,7 @@ export const messagingMessages = {
   "promptInput.hints.commands": "Команды",
   "promptInput.history.previousAriaLabel": "Предыдущий prompt",
   "promptInput.history.nextAriaLabel": "Следующий prompt",
+  "promptInput.resizeHandle.title": "Перетащите, чтобы изменить высоту поля ввода",
   "promptInput.overlay.newLine": "Новая строка",
   "promptInput.overlay.send": "Отправить",
   "promptInput.overlay.filesAgents": "Файлы/агенты",
@@ -185,5 +186,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.unsupported": "Голосовой ввод не поддерживается в этом браузере.",
   "promptInput.voiceInput.error.transcribe": "Не удалось расшифровать записанное аудио.",
   "promptInput.resizeHandle.ariaLabel": "Изменить высоту",
-  "promptInput.resizeHandle.title": "Перетащите для изменения высоты",
 } as const

From ab0e3e8b20bcf6c0290eff49c3234c61e5b17330 Mon Sep 17 00:00:00 2001
From: jollyxenon <1378319314@qq.com>
Date: Fri, 15 May 2026 00:51:47 +0800
Subject: [PATCH 06/11] fix(ui): restore compact prompt layout for active
 sessions

---
 packages/ui/src/components/session/session-view.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index cb3f98cb4..f151ca5e7 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -447,6 +447,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
               instanceFolder={props.instanceFolder}
               sessionId={activeSession.id}
               isActive={props.isActive}
+              compactLayout={props.compactPromptLayout}
               onSend={handleSendMessage}
               onRunShell={handleRunShell}
               escapeInDebounce={props.escapeInDebounce}

From a876513fbaa2725e18aadbc86cc87de8828e04c6 Mon Sep 17 00:00:00 2001
From: jollyxenon <1378319314@qq.com>
Date: Fri, 15 May 2026 00:52:58 +0800
Subject: [PATCH 07/11] fix(ui): restore compact prompt layout for draft
 prompts

---
 packages/ui/src/components/instance/instance-shell2.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index a631b51f4..ba91fb387 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -1084,6 +1084,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       instanceFolder={props.instance.folder}
                       sessionId={NO_SESSION_DRAFT_SESSION_ID}
                       isActive={props.isActiveInstance}
+                      compactLayout={compactPromptLayout()}
                       onSend={handleFirstPromptSend}
                       escapeInDebounce={props.escapeInDebounce}
                     />

From 5a3454fde4e15458176f327554a58818bd4a3f59 Mon Sep 17 00:00:00 2001
From: jollyxenon <1378319314@qq.com>
Date: Fri, 15 May 2026 00:54:05 +0800
Subject: [PATCH 08/11] fix(ui): tighten prompt resize behavior

---
 packages/ui/src/components/prompt-input.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index f07c31f9d..53caef7c8 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -316,10 +316,13 @@ export default function PromptInput(props: PromptInputProps) {
     }
 
     const wrapperRect = wrapperRef.getBoundingClientRect()
+    const localToolbar =
+      wrapperRef.closest('.session-view')?.querySelector('.session-toolbar') ||
+      wrapperRef.closest('[data-session-center-width]')?.querySelector('.session-toolbar')
     const toolbar =
+      localToolbar ||
       document.querySelector('[data-session-toolbar="true"]') ||
-      document.querySelector('.session-toolbar') ||
-      wrapperRef.closest('.session-view')?.querySelector('.session-toolbar')
+      document.querySelector('.session-toolbar')
 
     if (toolbar) {
       const toolbarRect = toolbar.getBoundingClientRect()
@@ -707,6 +710,8 @@ export default function PromptInput(props: PromptInputProps) {
       <div
         class={`prompt-resize-handle ${isResizing() ? 'is-resizing' : ''}`}
         onPointerDown={handleResizeStart}
+        aria-hidden="true"
+        role="presentation"
         title={t("promptInput.resizeHandle.title")}
       />
       <div

From 24e74649328bb5d40abb60cf21fb5ab84cb93da6 Mon Sep 17 00:00:00 2001
From: jollyxenon <1378319314@qq.com>
Date: Fri, 15 May 2026 00:54:52 +0800
Subject: [PATCH 09/11] fix(i18n): remove unused resize handle aria labels

---
 packages/ui/src/lib/i18n/messages/en/messaging.ts      | 1 -
 packages/ui/src/lib/i18n/messages/es/messaging.ts      | 1 -
 packages/ui/src/lib/i18n/messages/fr/messaging.ts      | 1 -
 packages/ui/src/lib/i18n/messages/he/messaging.ts      | 1 -
 packages/ui/src/lib/i18n/messages/ja/messaging.ts      | 1 -
 packages/ui/src/lib/i18n/messages/ru/messaging.ts      | 1 -
 packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts | 1 -
 7 files changed, 7 deletions(-)

diff --git a/packages/ui/src/lib/i18n/messages/en/messaging.ts b/packages/ui/src/lib/i18n/messages/en/messaging.ts
index bf7e6301b..31700b64d 100644
--- a/packages/ui/src/lib/i18n/messages/en/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/en/messaging.ts
@@ -182,6 +182,5 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "Microphone access was denied by macOS.",
   "promptInput.voiceInput.error.unsupported": "Voice input is not supported in this browser.",
   "promptInput.voiceInput.error.transcribe": "Unable to transcribe the recorded audio.",
-  "promptInput.resizeHandle.ariaLabel": "Resize input height",
   "promptInput.resizeHandle.title": "Drag to resize input height",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/es/messaging.ts b/packages/ui/src/lib/i18n/messages/es/messaging.ts
index 422f85017..a2e88568d 100644
--- a/packages/ui/src/lib/i18n/messages/es/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/es/messaging.ts
@@ -185,5 +185,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS denegó el acceso al micrófono.",
   "promptInput.voiceInput.error.unsupported": "La entrada de voz no es compatible con este navegador.",
   "promptInput.voiceInput.error.transcribe": "No se pudo transcribir el audio grabado.",
-  "promptInput.resizeHandle.ariaLabel": "Redimensionar altura de entrada",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/fr/messaging.ts b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
index 233404708..c15477e24 100644
--- a/packages/ui/src/lib/i18n/messages/fr/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
@@ -185,5 +185,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS a refusé l'accès au microphone.",
   "promptInput.voiceInput.error.unsupported": "La saisie vocale n'est pas prise en charge dans ce navigateur.",
   "promptInput.voiceInput.error.transcribe": "Impossible de transcrire l'audio enregistré.",
-  "promptInput.resizeHandle.ariaLabel": "Redimensionner la hauteur",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/he/messaging.ts b/packages/ui/src/lib/i18n/messages/he/messaging.ts
index e297bf9d1..537db2db2 100644
--- a/packages/ui/src/lib/i18n/messages/he/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/he/messaging.ts
@@ -183,5 +183,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "הגישה למיקרופון נדחתה על ידי macOS.",
   "promptInput.voiceInput.error.unsupported": "קלט קולי אינו נתמך בדפדפן זה.",
   "promptInput.voiceInput.error.transcribe": "לא ניתן היה לתמלל את האודיו שהוקלט.",
-  "promptInput.resizeHandle.ariaLabel": "שנה גובה",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/ja/messaging.ts b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
index 2b15e6959..013d9b60b 100644
--- a/packages/ui/src/lib/i18n/messages/ja/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
@@ -185,5 +185,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS によりマイクへのアクセスが拒否されました。",
   "promptInput.voiceInput.error.unsupported": "このブラウザーでは音声入力はサポートされていません。",
   "promptInput.voiceInput.error.transcribe": "録音した音声を文字起こしできませんでした。",
-  "promptInput.resizeHandle.ariaLabel": "入力の高さを変更",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/ru/messaging.ts b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
index 628ea4c68..a4ce41f2b 100644
--- a/packages/ui/src/lib/i18n/messages/ru/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
@@ -185,5 +185,4 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS запретила доступ к микрофону.",
   "promptInput.voiceInput.error.unsupported": "Голосовой ввод не поддерживается в этом браузере.",
   "promptInput.voiceInput.error.transcribe": "Не удалось расшифровать записанное аудио.",
-  "promptInput.resizeHandle.ariaLabel": "Изменить высоту",
 } as const
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
index d1ef36781..b00f7e676 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
@@ -184,6 +184,5 @@ export const messagingMessages = {
   "promptInput.voiceInput.error.permissionDenied": "macOS 已拒绝麦克风访问。",
   "promptInput.voiceInput.error.unsupported": "此浏览器不支持语音输入。",
   "promptInput.voiceInput.error.transcribe": "无法转写录制的音频。",
-  "promptInput.resizeHandle.ariaLabel": "调整输入框高度",
   "promptInput.resizeHandle.title": "拖动以调整输入框高度",
 } as const

From 62ddb371a4d510875ddbe2477105ac35ca960587 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Fri, 15 May 2026 14:23:04 +0100
Subject: [PATCH 10/11] fix(ui): cap prompt resize height

Limit manual prompt resizing to sixty percent of the local session center so the composer cannot consume the full message area.

The resize handle now lives inside the prompt field container, keeping the affordance visually centered over the text editor instead of spanning the full composer chrome. Removing the toolbar lookup also drops the temporary data attribute from the session toolbar and avoids cross-pane DOM coupling.

Validation: npm run typecheck --workspace @codenomad/ui; npm run build --workspace @codenomad/ui.
---
 .../components/instance/instance-shell2.tsx   |  2 +-
 packages/ui/src/components/prompt-input.tsx   | 69 +++++++------------
 .../ui/src/styles/messaging/prompt-input.css  |  8 +--
 3 files changed, 30 insertions(+), 49 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index ba91fb387..f23ec071b 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -837,7 +837,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       >
         <Show when={!mobileFullscreen()}>
           <AppBar position="sticky" color="default" elevation={0} class="border-b border-base">
-            <Toolbar variant="dense" data-session-toolbar="true" class="session-toolbar flex flex-wrap items-center gap-2 py-0 min-h-[40px]">
+            <Toolbar variant="dense" class="session-toolbar flex flex-wrap items-center gap-2 py-0 min-h-[40px]">
               <Show
                 when={!compactHeaderLayout()}
                 fallback={
diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index 53caef7c8..ddc727db3 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -31,6 +31,8 @@ import {
 } from "../stores/conversation-speech"
 const log = getLogger("actions")
 const LazyUnifiedPicker = lazy(() => import("./unified-picker"))
+const DEFAULT_PROMPT_FIELD_HEIGHT = 104
+const MAX_PROMPT_FIELD_HEIGHT_RATIO = 0.6
 
 function getConsumedPastedTextAttachmentIds(text: string, attachments: Attachment[]): string[] {
   if (!text || attachments.length === 0) return []
@@ -304,44 +306,23 @@ export default function PromptInput(props: PromptInputProps) {
   })
 
   function computeMaxFieldHeight(): number {
-    if (typeof window === "undefined") return 280
+    if (typeof window === "undefined") return DEFAULT_PROMPT_FIELD_HEIGHT
 
-    const currentFieldHeight = fieldContainerRef?.getBoundingClientRect().height ?? 104
-    const wrapperHeight = wrapperRef?.getBoundingClientRect().height ?? currentFieldHeight
-    const nonFieldHeight = Math.max(0, wrapperHeight - currentFieldHeight)
-    const padding = 16
-
-    if (!wrapperRef) {
-      return Math.max(104, window.innerHeight - 100 - nonFieldHeight)
-    }
-
-    const wrapperRect = wrapperRef.getBoundingClientRect()
-    const localToolbar =
-      wrapperRef.closest('.session-view')?.querySelector('.session-toolbar') ||
-      wrapperRef.closest('[data-session-center-width]')?.querySelector('.session-toolbar')
-    const toolbar =
-      localToolbar ||
-      document.querySelector('[data-session-toolbar="true"]') ||
-      document.querySelector('.session-toolbar')
-
-    if (toolbar) {
-      const toolbarRect = toolbar.getBoundingClientRect()
-      const availableTotalHeight = wrapperRect.bottom - toolbarRect.bottom - padding
-      return Math.max(104, availableTotalHeight - nonFieldHeight)
-    }
-
-    return Math.max(104, window.innerHeight - 100 - nonFieldHeight)
+    const sessionCenter = wrapperRef?.closest("[data-session-center-width]")
+    const availableHeight = sessionCenter?.getBoundingClientRect().height ?? window.innerHeight
+    const maxHeight = Math.floor(availableHeight * MAX_PROMPT_FIELD_HEIGHT_RATIO)
+    return Math.max(DEFAULT_PROMPT_FIELD_HEIGHT, maxHeight)
   }
 
   function cleanupResizeTracking(): void {
     if (activePointerMoveHandler) {
-      document.removeEventListener('pointermove', activePointerMoveHandler)
+      document.removeEventListener("pointermove", activePointerMoveHandler)
       activePointerMoveHandler = undefined
     }
 
     if (activePointerUpHandler) {
-      document.removeEventListener('pointerup', activePointerUpHandler)
-      document.removeEventListener('pointercancel', activePointerUpHandler)
+      document.removeEventListener("pointerup", activePointerUpHandler)
+      document.removeEventListener("pointercancel", activePointerUpHandler)
       activePointerUpHandler = undefined
     }
 
@@ -374,13 +355,13 @@ export default function PromptInput(props: PromptInputProps) {
     }
 
     const startY = event.clientY
-    const startHeight = fieldContainerRef?.getBoundingClientRect().height ?? 104
+    const startHeight = fieldContainerRef?.getBoundingClientRect().height ?? DEFAULT_PROMPT_FIELD_HEIGHT
     const computedMax = computeMaxFieldHeight()
 
     function handlePointerMove(moveEvent: PointerEvent) {
       moveEvent.preventDefault()
       const deltaY = startY - moveEvent.clientY
-      const nextHeight = Math.max(104, Math.min(computedMax, startHeight + deltaY))
+      const nextHeight = Math.max(DEFAULT_PROMPT_FIELD_HEIGHT, Math.min(computedMax, startHeight + deltaY))
       setInputHeight(nextHeight)
     }
 
@@ -392,9 +373,9 @@ export default function PromptInput(props: PromptInputProps) {
 
     activePointerMoveHandler = handlePointerMove
     activePointerUpHandler = handlePointerUp
-    document.addEventListener('pointermove', handlePointerMove)
-    document.addEventListener('pointerup', handlePointerUp)
-    document.addEventListener('pointercancel', handlePointerUp)
+    document.addEventListener("pointermove", handlePointerMove)
+    document.addEventListener("pointerup", handlePointerUp)
+    document.addEventListener("pointercancel", handlePointerUp)
   }
 
   onCleanup(() => {
@@ -707,13 +688,6 @@ export default function PromptInput(props: PromptInputProps) {
 
   return (
     <div class="prompt-input-container">
-      <div
-        class={`prompt-resize-handle ${isResizing() ? 'is-resizing' : ''}`}
-        onPointerDown={handleResizeStart}
-        aria-hidden="true"
-        role="presentation"
-        title={t("promptInput.resizeHandle.title")}
-      />
       <div
         ref={wrapperRef}
         class={`prompt-input-wrapper relative ${isDragging() ? "border-2" : ""}`}
@@ -751,12 +725,19 @@ export default function PromptInput(props: PromptInputProps) {
           <div
             ref={fieldContainerRef}
             class={`prompt-input-field-container ${expandState() === "expanded" ? "is-expanded" : ""}`}
-            style={inputHeight() !== null ? { height: `${inputHeight()}px`, 'min-height': `${inputHeight()}px` } : undefined}
+            style={inputHeight() !== null ? { height: `${inputHeight()}px`, "min-height": `${inputHeight()}px` } : undefined}
           >
+            <div
+              class={`prompt-resize-handle ${isResizing() ? "is-resizing" : ""}`}
+              onPointerDown={handleResizeStart}
+              aria-hidden="true"
+              role="presentation"
+              title={t("promptInput.resizeHandle.title")}
+            />
 
             <div
               class={`prompt-input-field ${expandState() === "expanded" ? "is-expanded" : ""}`}
-              style={inputHeight() !== null ? { height: `${inputHeight()}px`, 'min-height': `${inputHeight()}px` } : undefined}
+              style={inputHeight() !== null ? { height: `${inputHeight()}px`, "min-height": `${inputHeight()}px` } : undefined}
             >
               <textarea
                 ref={textareaRef}
@@ -775,7 +756,7 @@ export default function PromptInput(props: PromptInputProps) {
                 autocorrect="off"
                 autoCapitalize="off"
                 autocomplete="off"
-                style={inputHeight() !== null ? { height: `${inputHeight()}px`, 'min-height': `${inputHeight()}px`, 'overflow-y': 'auto' } : undefined}
+                style={inputHeight() !== null ? { height: `${inputHeight()}px`, "min-height": `${inputHeight()}px`, "overflow-y": "auto" } : undefined}
               />
               <button
                 type="button"
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 3db6ef238..07f3e998e 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -2,15 +2,15 @@
   @apply flex flex-col border-t;
   border-color: var(--border-base);
   background-color: var(--surface-base);
-  position: relative;
 }
 
 .prompt-resize-handle {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
-  height: 6px;
+  left: 50%;
+  width: 72px;
+  height: 10px;
+  transform: translateX(-50%);
   cursor: ns-resize;
   touch-action: none;
   z-index: 10;

From 704f755c5890faba06e6b02d726a06d76808fd65 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Fri, 15 May 2026 14:43:36 +0100
Subject: [PATCH 11/11] refactor(ui): simplify prompt resize tracking

Use pointer capture on the resize handle instead of document-level pointer listeners so resize state stays local to the prompt control and no manual listener teardown is needed.

Keep explicit resized-height styling through the prompt field stack because the existing expanded-state CSS otherwise prevents the textarea from filling the resized container. Also remove the whitespace-only prompt input type diff.

Validation: npm run typecheck --workspace @codenomad/ui.
---
 packages/ui/src/components/prompt-input.tsx   | 95 ++++++++-----------
 .../ui/src/components/prompt-input/types.ts   |  1 -
 .../ui/src/styles/messaging/prompt-input.css  | 10 ++
 3 files changed, 50 insertions(+), 56 deletions(-)

diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index ddc727db3..e43e21308 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -34,6 +34,13 @@ const LazyUnifiedPicker = lazy(() => import("./unified-picker"))
 const DEFAULT_PROMPT_FIELD_HEIGHT = 104
 const MAX_PROMPT_FIELD_HEIGHT_RATIO = 0.6
 
+type ResizeDragState = {
+  pointerId: number
+  startY: number
+  startHeight: number
+  maxHeight: number
+}
+
 function getConsumedPastedTextAttachmentIds(text: string, attachments: Attachment[]): string[] {
   if (!text || attachments.length === 0) return []
 
@@ -76,10 +83,7 @@ export default function PromptInput(props: PromptInputProps) {
   let fileInputRef: HTMLInputElement | undefined
   let wrapperRef: HTMLDivElement | undefined
   let fieldContainerRef: HTMLDivElement | undefined
-  let activeResizeHandle: HTMLElement | undefined
-  let activeResizePointerId: number | null = null
-  let activePointerMoveHandler: ((event: PointerEvent) => void) | undefined
-  let activePointerUpHandler: ((event: PointerEvent) => void) | undefined
+  let resizeDragState: ResizeDragState | undefined
 
   const getPlaceholder = () => {
     if (mode() === "shell") {
@@ -314,72 +318,50 @@ export default function PromptInput(props: PromptInputProps) {
     return Math.max(DEFAULT_PROMPT_FIELD_HEIGHT, maxHeight)
   }
 
-  function cleanupResizeTracking(): void {
-    if (activePointerMoveHandler) {
-      document.removeEventListener("pointermove", activePointerMoveHandler)
-      activePointerMoveHandler = undefined
-    }
-
-    if (activePointerUpHandler) {
-      document.removeEventListener("pointerup", activePointerUpHandler)
-      document.removeEventListener("pointercancel", activePointerUpHandler)
-      activePointerUpHandler = undefined
-    }
+  function handleResizeStart(event: PointerEvent) {
+    event.preventDefault()
+    const target = event.currentTarget as HTMLElement
 
-    if (activeResizeHandle && activeResizePointerId !== null) {
-      try {
-        activeResizeHandle.releasePointerCapture(activeResizePointerId)
-      } catch {
-        // Pointer capture may already be released.
-      }
+    resizeDragState = {
+      pointerId: event.pointerId,
+      startY: event.clientY,
+      startHeight: fieldContainerRef?.getBoundingClientRect().height ?? DEFAULT_PROMPT_FIELD_HEIGHT,
+      maxHeight: computeMaxFieldHeight(),
     }
 
-    activeResizeHandle = undefined
-    activeResizePointerId = null
-    setIsResizing(false)
-  }
-
-  function handleResizeStart(event: PointerEvent) {
-    event.preventDefault()
-    cleanupResizeTracking()
     setIsResizing(true)
 
-    const target = event.currentTarget as HTMLElement
-    activeResizeHandle = target
-    activeResizePointerId = event.pointerId
-
     try {
       target.setPointerCapture(event.pointerId)
     } catch {
-      // Pointer capture not supported, continue without it.
+      resizeDragState = undefined
+      setIsResizing(false)
     }
+  }
 
-    const startY = event.clientY
-    const startHeight = fieldContainerRef?.getBoundingClientRect().height ?? DEFAULT_PROMPT_FIELD_HEIGHT
-    const computedMax = computeMaxFieldHeight()
+  function handleResizeMove(event: PointerEvent) {
+    if (!resizeDragState || resizeDragState.pointerId !== event.pointerId) return
 
-    function handlePointerMove(moveEvent: PointerEvent) {
-      moveEvent.preventDefault()
-      const deltaY = startY - moveEvent.clientY
-      const nextHeight = Math.max(DEFAULT_PROMPT_FIELD_HEIGHT, Math.min(computedMax, startHeight + deltaY))
-      setInputHeight(nextHeight)
-    }
+    event.preventDefault()
+    const deltaY = resizeDragState.startY - event.clientY
+    const nextHeight = Math.max(
+      DEFAULT_PROMPT_FIELD_HEIGHT,
+      Math.min(resizeDragState.maxHeight, resizeDragState.startHeight + deltaY),
+    )
+    setInputHeight(nextHeight)
+  }
 
-    function handlePointerUp(upEvent: PointerEvent) {
-      upEvent.preventDefault()
-      cleanupResizeTracking()
-      textareaRef?.focus()
-    }
+  function handleResizeEnd(event: PointerEvent) {
+    if (!resizeDragState || resizeDragState.pointerId !== event.pointerId) return
 
-    activePointerMoveHandler = handlePointerMove
-    activePointerUpHandler = handlePointerUp
-    document.addEventListener("pointermove", handlePointerMove)
-    document.addEventListener("pointerup", handlePointerUp)
-    document.addEventListener("pointercancel", handlePointerUp)
+    event.preventDefault()
+    resizeDragState = undefined
+    setIsResizing(false)
+    textareaRef?.focus()
   }
 
   onCleanup(() => {
-    cleanupResizeTracking()
+    resizeDragState = undefined
   })
 
   async function handleSend() {
@@ -724,12 +706,15 @@ export default function PromptInput(props: PromptInputProps) {
         <div class="prompt-input-main flex flex-1 flex-col">
           <div
             ref={fieldContainerRef}
-            class={`prompt-input-field-container ${expandState() === "expanded" ? "is-expanded" : ""}`}
+            class={`prompt-input-field-container ${expandState() === "expanded" ? "is-expanded" : ""} ${inputHeight() !== null ? "is-resized" : ""}`}
             style={inputHeight() !== null ? { height: `${inputHeight()}px`, "min-height": `${inputHeight()}px` } : undefined}
           >
             <div
               class={`prompt-resize-handle ${isResizing() ? "is-resizing" : ""}`}
               onPointerDown={handleResizeStart}
+              onPointerMove={handleResizeMove}
+              onPointerUp={handleResizeEnd}
+              onPointerCancel={handleResizeEnd}
               aria-hidden="true"
               role="presentation"
               title={t("promptInput.resizeHandle.title")}
diff --git a/packages/ui/src/components/prompt-input/types.ts b/packages/ui/src/components/prompt-input/types.ts
index fdfd2a9fc..4f2bcffde 100644
--- a/packages/ui/src/components/prompt-input/types.ts
+++ b/packages/ui/src/components/prompt-input/types.ts
@@ -24,7 +24,6 @@ export interface PromptInputProps {
 
   // Phone/tablet layouts should keep the expanded prompt more compact.
   compactLayout?: boolean
-
   onSend: (prompt: string, attachments: Attachment[]) => Promise<void>
   onRunShell?: (command: string) => Promise<void>
   disabled?: boolean
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 07f3e998e..b24cb5721 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -120,6 +120,16 @@
   overflow-y: auto;
 }
 
+.prompt-input-field-container.is-resized .prompt-input-field {
+  height: 100%;
+}
+
+.prompt-input-field-container.is-resized .prompt-input {
+  height: 100%;
+  min-height: 100%;
+  overflow-y: auto;
+}
+
 .prompt-input-overlay {
   position: absolute;
   bottom: 1rem;