storkit/.story_kit/specs/functional/UI_LAYOUT.md

Functional Spec: UI Layout

1. Global Structure

The application uses a fixed-layout strategy to maximize chat visibility.

+-------------------------------------------------------+
|  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.