Files

T

miguel 6f35eb77ae 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

2026-05-22 20:38:05 +02:00

2.3 KiB

Raw Permalink Blame History

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

Hero
- Greeting
- Short status line
- Primary actions: New Project, Open Session, Settings
Summary strip
- Small count cards for sessions, projects, and tooling state
Open Sessions
- Primary section
- Session cards with project, repository, tool type, status, and actions
Available Projects
- Secondary section
- Project cards with quick entry into the project workspace
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

2.3 KiB Raw Permalink Blame History