loading indicator, growing message box

web/src/App.tsx

@@ -272,6 +272,14 @@ export default function App() {
   const searchRunCounterRef = useRef(0);
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
 
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const textarea = document.getElementById("composer-input") as HTMLTextAreaElement | null;
+    if (!textarea) return;
+    textarea.style.height = "0px";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [composer]);
+
   const sidebarItems = useMemo(() => buildSidebarItems(chats, searches), [chats, searches]);
 
   const resetWorkspaceState = () => {
@@ -916,9 +924,15 @@ export default function App() {
           <footer className="border-t p-3 md:p-4">
             <div className="mx-auto max-w-3xl rounded-xl border bg-background p-2 shadow-sm">
               <Textarea
-                rows={3}
+                id="composer-input"
+                rows={1}
                 value={composer}
-                onInput={(event) => setComposer(event.currentTarget.value)}
+                onInput={(event) => {
+                  const textarea = event.currentTarget;
+                  textarea.style.height = "0px";
+                  textarea.style.height = `${textarea.scrollHeight}px`;
+                  setComposer(textarea.value);
+                }}
                 onKeyDown={(event) => {
                   if (event.key === "Enter" && !event.shiftKey) {
                     event.preventDefault();
@@ -926,11 +940,11 @@ export default function App() {
                   }
                 }}
                 placeholder={isSearchMode ? "Search the web" : "Message Sybil"}
-                className="resize-none border-0 shadow-none focus-visible:ring-0"
+                className="max-h-40 min-h-0 resize-none overflow-y-auto border-0 shadow-none focus-visible:ring-0"
                 disabled={isSending}
               />
-              <div className="flex items-center justify-between px-2 pb-1">
-                {error ? <p className="text-xs text-red-600">{error}</p> : <span className="text-xs text-muted-foreground">{isSearchMode ? "Enter to search" : "Enter to send"}</span>}
+              <div className={cn("flex items-center px-2 pb-1", error ? "justify-between" : "justify-end")}>
+                {error ? <p className="text-xs text-red-600">{error}</p> : null}
                 <Button onClick={() => void handleSend()} size="icon" disabled={isSending || !composer.trim()}>
                   {isSearchMode ? <Search className="h-4 w-4" /> : <SendHorizontal className="h-4 w-4" />}
                 </Button>