# Functional Spec: UI Layout

## 1. Global Structure
The application uses a **fixed-layout** strategy to maximize chat visibility.

```text
+-------------------------------------------------------+
|  HEADER (Fixed Height, e.g., 50px)                    |
|  [Project: ~/foo/bar]  [Model: llama3]  [x] Tools     |
+-------------------------------------------------------+
|                                                       |
|  CHAT AREA (Flex Grow, Scrollable)                    |
|                                                       |
|  (User Message)                                       |
|  (Agent Message)                                      |
|                                                       |
+-------------------------------------------------------+
|  INPUT AREA (Fixed Height, Bottom)                    |
|  [ Input Field ........................... ] [Send]   |
+-------------------------------------------------------+
```

## 2. Components
*   **Header:** Contains global context (Project) and session config (Model/Tools).
    *   *Constraint:* Must not scroll away.
*   **ChatList:** The scrollable container for messages.
*   **InputBar:** Pinned to the bottom.

## 3. Styling
*   Use Flexbox (`flex-direction: column`) on the main container.
*   Header: `flex-shrink: 0`.
*   ChatList: `flex-grow: 1`, `overflow-y: auto`.
*   InputBar: `flex-shrink: 0`.