Files
storkit/.storkit/specs/functional/UI_LAYOUT.md
dave f610ef6046 Restore codebase deleted by bad auto-commit e4227cf
Commit e4227cf (a story creation auto-commit) erroneously deleted 175
files from master's tree, likely due to a race condition between
concurrent git operations. This commit re-adds all files from the
working directory.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-22 19:07:07 +00:00

1.4 KiB

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.