Auto-grow Generate textarea and add GPT-5.4 Image 2 model

Quick-generate's textarea now resizes with content via a layout effect
that resets height to scrollHeight on prompt changes; cap raised to
240px with overflow-y scroll past that.

Adds openai/gpt-5.4-image-2 to the /api/models list.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: pallaoro

src/client/components/quick-generate.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useEffect, useMemo, type DragEvent, type KeyboardEvent } from "react";
+import { useState, useCallback, useRef, useEffect, useLayoutEffect, useMemo, type DragEvent, type KeyboardEvent } from "react";
 import { useWorkflow } from "../context";
 import { api } from "../api";
 import type { Generation } from "../types";
@@ -117,6 +117,14 @@ export function QuickGenerate() {
   const [imageDims, setImageDims] = useState<Record<number, number>>({});
   const fileRef = useRef<HTMLInputElement>(null);
   const gridRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${ta.scrollHeight}px`;
+  }, [prompt]);
 
   // Measure container
   useEffect(() => {
@@ -319,7 +327,8 @@ export function QuickGenerate() {
             </div>
           )}
           <textarea
-            className="w-full bg-transparent text-gray-900 text-sm leading-relaxed resize-none outline-none min-h-[24px] max-h-[120px] placeholder:text-gray-400 border-none p-0"
+            ref={textareaRef}
+            className="w-full bg-transparent text-gray-900 text-sm leading-relaxed resize-none outline-none min-h-[24px] max-h-[240px] overflow-y-auto placeholder:text-gray-400 border-none p-0"
             placeholder="Describe the scene you imagine"
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}

src/server/index.ts

@@ -336,6 +336,7 @@ app.openapi(listModels, async (c) => {
     { id: "openai/gpt-image-1", name: "GPT Image 1" },
     { id: "openai/gpt-5-image-mini", name: "GPT-5 Image Mini" },
     { id: "openai/gpt-5-image", name: "GPT-5 Image" },
+    { id: "openai/gpt-5.4-image-2", name: "GPT-5.4 Image 2" },
     { id: "google/gemini-2.5-flash-image", name: "Gemini 2.5 Flash Image" },
     { id: "bytedance-seed/seedream-4.5", name: "SeedDream 4.5" },
     { id: "black-forest-labs/flux.2-max", name: "FLUX.2 Max" },