feat: redesign authenticated UI with home overview and settings hub

- Add HomePage with open sessions grid, projects overview, and session composer
- Add SettingsPage with tabs for General, SSH Keys, Tool Types, Tool Configs
- Update navigation to Home, Projects, Settings
- Redirect legacy routes (/sessions, /ssh-keys, /tool-types, /tool-configs)
- Apply Inter font and warm editorial styling
- Update tests for new dashboard and projects pages

Quality gates: typecheck pass, lint pass, 15/15 tests pass

Refs: openspec/changes/ui-redesign-home-settings
This commit is contained in:
2026-05-22 20:34:39 +02:00
parent 575e5837ea
commit 6f35eb77ae
18 changed files with 3036 additions and 202 deletions
@@ -0,0 +1,2 @@
schema: spec-driven
created: 2026-05-22
@@ -0,0 +1,106 @@
# 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
@@ -0,0 +1,35 @@
# UI Redesign: Home + Settings
## Problem
The current authenticated UI is functional but fragmented. Sessions, tool setup, and settings are spread across top-level pages, and the home screen does not yet provide a strong overview of open sessions and available projects.
## Solution
Redesign the authenticated frontend around two primary surfaces:
1. **Home**: an overview of open sessions and available projects
2. **Settings**: a tabbed settings hub with General, SSH Keys, Tool Types, and Tool Configs
Keep existing functionality and the Project -> Repository -> Session hierarchy intact. Reuse the current APIs and workflows.
## Scope
- Redesign the main landing page into an operational overview
- Fold the Sessions page into the home experience
- Convert SSH Keys, Tool Types, and Tool Configs into settings tabs
- Update navigation and routes to match the new IA
- Refresh visual design, typography, and spacing
## Non-Goals
- No backend behavior changes
- No new session or project APIs
- No changes to the project/repository/session data model
## Success Criteria
- Home shows open sessions and available projects clearly
- Settings contains tabs for General, SSH Keys, Tool Types, Tool Configs
- Old top-level settings-related routes redirect to the new structure
- Visual system uses Inter and a refined warm palette
@@ -0,0 +1,34 @@
# UI Redesign - Tasks
## 1. Visual System
- [ ] Update global typography to Inter
- [ ] Refine color tokens for the new warm editorial palette
- [ ] Add styling for new home sections and settings tabs
## 2. Navigation and Routing
- [ ] Remove Sessions from top-level navigation
- [ ] Keep SSH Keys, Tool Types, and Tool Configs accessible from Settings tabs
- [ ] Add redirects for legacy top-level config routes
- [ ] Redirect `/sessions` to `/`
## 3. Home Page
- [ ] Redesign the home page as an overview of open sessions and projects
- [ ] Add summary cards and hero actions
- [ ] Reuse existing session and project data
- [ ] Keep create/open session actions available
## 4. Settings Hub
- [ ] Turn Settings into a tabbed hub
- [ ] Build General, SSH Keys, Tool Types, and Tool Configs tabs
- [ ] Reuse existing APIs and forms
- [ ] Keep the Project settings page separate
## 5. Cleanup and Verification
- [ ] Remove obsolete top-level pages from navigation flow
- [ ] Update tests for the new landing page and redirects
- [ ] Run typecheck, lint, and build