94aa88c154
- 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 ✓
121 lines
3.0 KiB
Markdown
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
|