# UI Redesign - Design

## Information Architecture

```
App
├── Home
│   ├── Hero / status
│   ├── Open sessions
│   ├── Available projects
│   └── Session creation
├── Projects
├── Settings
│   ├── General
│   ├── SSH Keys
│   ├── Tool Types
│   └── Tool Configs
└── Legacy routes
    └── Redirect to new locations
```

## Home Page

### Purpose

Provide a fast, glanceable overview of the user's active work.

### Sections

1. **Hero**
   - Greeting
   - Short status line
   - Primary actions: New Project, Open Session, Settings

2. **Summary strip**
   - Small count cards for sessions, projects, and tooling state

3. **Open Sessions**
   - Primary section
   - Session cards with project, repository, tool type, status, and actions

4. **Available Projects**
   - Secondary section
   - Project cards with quick entry into the project workspace

5. **Session composer**
   - Optional compact create flow if it fits the page cleanly

## Settings Page

### Layout

Tabbed shell with one content area and four tabs:

- General
- SSH Keys
- Tool Types
- Tool Configs

### Tab Responsibilities

**General**
- Theme
- Git identity
- Default editor

**SSH Keys**
- List keys
- Create key
- Copy public key
- Delete key

**Tool Types**
- Browse tool catalog
- Edit custom tool types
- Delete custom tool types

**Tool Configs**
- Browse per-tool configurations
- Add/edit/delete configs
- Keep the existing config model and API behavior

## Visual Direction

- Font: Inter for UI text
- Code font: monospace only for technical fields
- Palette: warm light surfaces, forest green primary, muted utility accents
- Dark mode: charcoal surfaces with softened accents
- Styling: editorial, structured, high-contrast hierarchy, minimal chrome

## Routing

- `/` -> Home
- `/sessions` -> redirect to `/`
- `/settings` -> General tab
- `/settings/ssh-keys` -> SSH Keys tab
- `/settings/tool-types` -> Tool Types tab
- `/settings/tool-configs` -> Tool Configs tab
- legacy `/ssh-keys`, `/tool-types`, `/tool-configs` -> redirect to settings tabs

## Component Strategy

- Reuse shell and existing APIs
- Replace the dashboard page with the new home overview
- Convert the settings layout into a shared tab shell
- Keep changes focused to the frontend layer