Files
Fusion 94aa88c154 feat: add Sessions Hub page
- Add Sessions tab to navigation between Dashboard and Projects
- Show active session count badge in navigation
- Create SessionsPage with:
  - Last session section with resume button
  - Active sessions grid with open/stop actions
  - Recent sessions list
  - Create session form with project/repo/tool selectors
- Add last_session_id to user config
- Update UserConfig schemas (backend and frontend)
- Add comprehensive CSS for sessions page

Quality gates: typecheck ✓, lint ✓, build ✓
2026-05-19 23:06:54 +02:00

121 lines
3.0 KiB
Markdown

# Sessions Hub - Design
## Architecture
```
Sessions Hub
├── Navigation
│ └── "Sessions" tab (between Dashboard and Projects)
│ └── Badge with active session count
├── SessionsPage
│ ├── Last Session Section
│ │ └── Quick access card with resume button
│ ├── Active Sessions Section
│ │ └── Grid of active session cards
│ ├── Recent Sessions Section
│ │ └── List of recent sessions
│ └── Create Session Section
│ └── Project selector + tool type selector
└── User Config
└── last_session_id field
```
## Component Design
### SessionsPage
**Sections:**
1. **Last Session** (if exists)
- Large card showing last session details
- "Resume" button to open the workspace
- Shows project, repository, tool type
2. **Active Sessions**
- Grid of cards for running instances
- Each card: name, type, status badge, action buttons
- Actions: Open, Stop, Restart, Delete
3. **Recent Sessions**
- List of last 5 sessions (any status)
- Compact list view with status indicators
- Click to navigate to workspace
4. **Create New Session**
- Project dropdown (all user's projects)
- Repository dropdown (filtered by project)
- Tool type dropdown
- Display name input
- "Create" button
### AppShell Updates
**Navigation:**
```
Dashboard | Sessions (3) | Projects | SSH Keys | Tool Types | Settings
```
**Badge:**
- Shows count of active (running) sessions
- Updates via existing sessions polling
### User Config Extension
**New field:**
```typescript
interface UserConfig {
// existing fields...
last_session_id: string | null;
}
```
**Update timing:**
- Set when creating a new session
- Set when opening/resuming a session
## Data Flow
### Loading Sessions Page
1. Fetch user config (for last_session_id)
2. Fetch all user sessions via `/users/me/sessions`
3. Filter into active vs recent
4. Display last session if available
### Creating Session
1. User selects project, repo, tool type
2. POST to `/projects/{id}/repositories/{id}/instances`
3. On success: update user config with last_session_id
4. Refresh sessions list
### Resuming Session
1. User clicks "Resume" on last session
2. Navigate to workspace with session active
3. Update user config (reinforce as last)
## API Changes
### GET /users/me/sessions
Already exists - returns all sessions for user.
### PATCH /users/me/config
Already exists - add `last_session_id` to config schema.
## Technical Details
**Frontend:**
- New page: `pages/sessions.tsx`
- Update: `app-shell.tsx` for navigation
- Update: `api/settings.ts` for config type
- Update: `state/sessions.tsx` for badge count
**Backend:**
- Update: `models/user_config.py` schema
- Update: `api/user_config.py` to accept last_session_id
**No new backend endpoints needed** - reuse existing APIs.
## Error Handling
- No sessions: Show empty state with "Create your first session" CTA
- Failed to load: Show error with retry button
- Create failed: Show error message, keep form open