feat(ui): add resizable session composer

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" />

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}
                     />