IMPLEMENT: auto-grow PromptInput up to 8 lines (#237)

.sandcastle/CODING_STANDARDS.md

@@ -13,6 +13,7 @@
 - No `any` — ever (`noExplicitAny` is an error)
 - kebab-case filenames for components; camelCase for utilities
 - 2-space indent, 100-char line width, single quotes, trailing commas (Biome enforced)
+- **Never** suppress lint rules with `biome-ignore` (or `@ts-ignore`/`eslint-disable`). If a rule fires, fix the underlying code — restructure the effect, derive a value, lift state, or pick a different approach. A suppression silences the linter but leaves the smell; future readers can't tell whether it's still warranted. The same applies to `as any` and other type escape hatches.
 
 ## Architecture
 

apps/desktop/src/renderer/src/components/chat/ChatPanel.tsx

@@ -73,7 +73,6 @@ export function ChatPanel({ chat }: ChatPanelProps): React.JSX.Element {
   const history = useChatThreads();
 
   const [input, setInput] = useState('');
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   // Track previous filePath so file-change and initial-mount paths
@@ -161,19 +160,11 @@ export function ChatPanel({ chat }: ChatPanelProps): React.JSX.Element {
     });
   }, [history.activeThreadId, history.updateThreadSessionId]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll whenever the message list changes; biome can't see `messages` is the intended trigger
+  const messageCount = messages.length;
   useEffect(() => {
+    if (messageCount === 0) return;
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  // Auto-grow the textarea up to a cap so prompts with a few lines
-  // don't force the user to scroll a single-line input.
-  useEffect(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
-  }, []);
+  }, [messageCount]);
 
   const fileThreads = useMemo(
     () => history.threadsForFile(filePath),
@@ -367,17 +358,17 @@ export function ChatPanel({ chat }: ChatPanelProps): React.JSX.Element {
           )}
         >
           <textarea
-            ref={textareaRef}
             value={input}
             onChange={(ev) => setInput(ev.target.value)}
             onKeyDown={handleKeyDown}
             placeholder={isReady ? 'Ask anything…' : 'Configure auth first…'}
             disabled={!isReady || isStreaming}
             rows={1}
             className={cn(
-              'w-full resize-none bg-transparent px-3 pt-3 pb-2 text-sm',
+              'w-full resize-none bg-transparent px-3 pt-3 pb-2 text-sm leading-5',
+              'field-sizing-content max-h-[calc(8*1.25rem+1.25rem)]',
               'placeholder:text-muted-foreground focus:outline-none',
-              'disabled:cursor-not-allowed max-h-32 overflow-y-auto',
+              'disabled:cursor-not-allowed overflow-y-auto',
             )}
             data-testid="chat-input"
           />

apps/desktop/tests/components/chat/ChatPanel.test.tsx

@@ -111,4 +111,20 @@ describe('ChatPanel', () => {
     expect(screen.getByTitle('Stop')).toBeInTheDocument();
     expect(screen.queryByTitle('Send')).not.toBeInTheDocument();
   });
+
+  it('auto-grows the textarea via CSS field-sizing with an 8-line cap and scroll overflow', async () => {
+    render(<ChatPanel chat={makeChat()} />);
+    await waitFor(() => {
+      const ta = screen.getByTestId('chat-input') as HTMLTextAreaElement;
+      expect(ta.disabled).toBe(false);
+    });
+    const textarea = screen.getByTestId('chat-input') as HTMLTextAreaElement;
+
+    // Auto-grow is delivered by CSS (`field-sizing: content`) rather
+    // than a useEffect that pokes inline height — verify the contract
+    // is expressed on the element.
+    expect(textarea.className).toMatch(/field-sizing-content/);
+    expect(textarea.className).toMatch(/max-h-\[/);
+    expect(textarea.className).toMatch(/overflow-y-auto/);
+  });
 });