miguel
6f35eb77ae
- 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
107 lines
2.3 KiB
Markdown
107 lines
2.3 KiB
Markdown
# 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
|