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 ✓
This commit is contained in:
Fusion
@@ -0,0 +1,2 @@
|
||||
schema: spec-driven
|
||||
name: sessions-hub
|
||||
@@ -0,0 +1,120 @@
|
||||
# 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
|
||||
@@ -0,0 +1,51 @@
|
||||
# Sessions Hub
|
||||
|
||||
## Problem
|
||||
|
||||
Users currently have to navigate into individual projects and repositories to see their active tool instances (sessions). There's no centralized place to:
|
||||
- See all active/open sessions at a glance
|
||||
- Quickly access the last used session
|
||||
- Create new sessions without navigating deep into the project hierarchy
|
||||
|
||||
## Solution
|
||||
|
||||
Create a dedicated **Sessions Hub** page that serves as the central place for managing tool instances:
|
||||
|
||||
1. **Navigation tab** between Dashboard and Projects
|
||||
2. **Active sessions section** showing all running/open instances
|
||||
3. **Last session** prominently displayed for quick access
|
||||
4. **Quick create** - create sessions for any project from one place
|
||||
5. **Persist last session** in user config for easier access
|
||||
|
||||
## Key Features
|
||||
|
||||
### Sessions Page
|
||||
- Shows all active (running) sessions with status, type, and links
|
||||
- Shows recent sessions (last 5)
|
||||
- Shows last created session at the top for quick access
|
||||
- "New Session" button to create instances for any project
|
||||
|
||||
### Navigation
|
||||
- New "Sessions" tab in the app shell between Dashboard and Projects
|
||||
- Shows count of active sessions as a badge
|
||||
|
||||
### Quick Access
|
||||
- Last created session saved to user config
|
||||
- One-click to reopen/resume last session
|
||||
- Session history for quick navigation
|
||||
|
||||
## Benefits
|
||||
|
||||
- **Faster workflow** - No need to navigate deep into projects
|
||||
- **Better visibility** - See all active work at a glance
|
||||
- **Quick resume** - Jump back to last work instantly
|
||||
- **Centralized management** - One place for all sessions
|
||||
|
||||
## Success Criteria
|
||||
|
||||
- [ ] Sessions tab visible in navigation between Dashboard and Projects
|
||||
- [ ] Sessions page shows active sessions
|
||||
- [ ] Last session displayed prominently
|
||||
- [ ] Can create session for any project from Sessions page
|
||||
- [ ] Last created session persists in user config
|
||||
- [ ] Badge shows count of active sessions
|
||||
@@ -0,0 +1,115 @@
|
||||
# Sessions Hub Specification
|
||||
|
||||
## Requirements
|
||||
|
||||
### Functional Requirements
|
||||
|
||||
1. **Sessions Tab**: Navigation item between Dashboard and Projects
|
||||
2. **Active Sessions Display**: Show all running sessions with actions
|
||||
3. **Last Session**: Prominently show last created/accessed session
|
||||
4. **Quick Create**: Create sessions for any project from Sessions page
|
||||
5. **Session Persistence**: Save last_session_id in user config
|
||||
6. **Badge**: Show active session count in navigation
|
||||
|
||||
### Non-Functional Requirements
|
||||
|
||||
1. **Performance**: Load sessions in < 500ms
|
||||
2. **Real-time**: Badge updates with active count
|
||||
3. **Responsive**: Works on mobile and desktop
|
||||
|
||||
## API Specification
|
||||
|
||||
### Existing Endpoints Used
|
||||
|
||||
- `GET /users/me/sessions` - List all user sessions
|
||||
- `POST /projects/{id}/repositories/{id}/instances` - Create instance
|
||||
- `GET /projects` - List projects for selector
|
||||
- `GET /projects/{id}/repositories` - List repos for selector
|
||||
- `GET /tool-types` - List tool types for selector
|
||||
- `GET /users/me/config` - Get user config (with last_session_id)
|
||||
- `PATCH /users/me/config` - Update user config (last_session_id)
|
||||
|
||||
### User Config Schema Update
|
||||
|
||||
```python
|
||||
class UserConfigUpdate(BaseModel):
|
||||
theme: Optional[str] = None
|
||||
default_editor: Optional[str] = None
|
||||
git_user_name: Optional[str] = None
|
||||
git_user_email: Optional[str] = None
|
||||
last_session_id: Optional[str] = None # NEW
|
||||
```
|
||||
|
||||
## UI Specification
|
||||
|
||||
### Sessions Page Layout
|
||||
|
||||
```
|
||||
+------------------------------------------+
|
||||
| Sessions [New Session]|
|
||||
+------------------------------------------+
|
||||
| |
|
||||
| Last Session |
|
||||
| +--------------------------------------+ |
|
||||
| | VS Code Server - My Project [Open] | |
|
||||
| | Running on port 8080 | |
|
||||
| +--------------------------------------+ |
|
||||
| |
|
||||
| Active Sessions (3) |
|
||||
| +----------+ +----------+ +----------+ |
|
||||
| | Session 1| | Session 2| | Session 3| |
|
||||
| | Running | | Running | | Running | |
|
||||
| | [Open] | | [Open] | | [Open] | |
|
||||
| +----------+ +----------+ +----------+ |
|
||||
| |
|
||||
| Recent Sessions |
|
||||
| - Session 4 (stopped) |
|
||||
| - Session 5 (stopped) |
|
||||
| |
|
||||
+------------------------------------------+
|
||||
```
|
||||
|
||||
### Navigation Badge
|
||||
|
||||
```
|
||||
[Dashboard] [Sessions (3)] [Projects] ...
|
||||
```
|
||||
|
||||
Badge shows count of sessions with status === "running".
|
||||
|
||||
### Create Session Dialog
|
||||
|
||||
```
|
||||
+------------------------------------------+
|
||||
| Create New Session |
|
||||
+------------------------------------------+
|
||||
| Project: [Dropdown] |
|
||||
| Repository: [Dropdown] |
|
||||
| Tool Type: [Dropdown] |
|
||||
| Name: [Input] |
|
||||
| |
|
||||
| [Cancel] [Create] |
|
||||
+------------------------------------------+
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
### Sessions Context (existing)
|
||||
Already polls `/users/me/sessions` every 10s. Use this for:
|
||||
- Active session count (badge)
|
||||
- Active sessions list
|
||||
- Recent sessions list
|
||||
|
||||
### User Config (existing)
|
||||
Add `last_session_id` field. Update:
|
||||
- On session creation
|
||||
- On session open/resume
|
||||
|
||||
## Quality Gates
|
||||
|
||||
- TypeScript compilation passes
|
||||
- ESLint passes
|
||||
- All sessions load correctly
|
||||
- Badge updates with active count
|
||||
- Last session persists across reloads
|
||||
- Create session works from Sessions page
|
||||
@@ -0,0 +1,93 @@
|
||||
# Sessions Hub - Tasks
|
||||
|
||||
## Phase 1: Backend Config Update
|
||||
|
||||
- [ ] **Task 1.1**: Update UserConfig model
|
||||
- Add `last_session_id` field to `models/user_config.py`
|
||||
- Create Alembic migration
|
||||
|
||||
- [ ] **Task 1.2**: Update config API
|
||||
- Accept `last_session_id` in `api/user_config.py`
|
||||
- Update Pydantic schemas
|
||||
|
||||
## Phase 2: Frontend Navigation
|
||||
|
||||
- [ ] **Task 2.1**: Add Sessions tab to AppShell
|
||||
- Insert between Dashboard and Projects
|
||||
- Add sessions icon
|
||||
- Show badge with active count
|
||||
|
||||
- [ ] **Task 2.2**: Update router
|
||||
- Add `/sessions` route
|
||||
- Create placeholder page
|
||||
|
||||
## Phase 3: Sessions Page
|
||||
|
||||
- [ ] **Task 3.1**: Create SessionsPage component
|
||||
- Page layout with sections
|
||||
- Loading and error states
|
||||
|
||||
- [ ] **Task 3.2**: Implement Last Session section
|
||||
- Fetch from user config
|
||||
- Show session card with resume button
|
||||
- Handle no last session state
|
||||
|
||||
- [ ] **Task 3.3**: Implement Active Sessions section
|
||||
- Fetch from sessions context
|
||||
- Grid of session cards
|
||||
- Action buttons (Open, Stop, Restart, Delete)
|
||||
|
||||
- [ ] **Task 3.4**: Implement Recent Sessions section
|
||||
- Show last 5 sessions
|
||||
- Compact list view
|
||||
- Status indicators
|
||||
|
||||
- [ ] **Task 3.5**: Implement Create Session section
|
||||
- Project selector (fetch all projects)
|
||||
- Repository selector (filtered by project)
|
||||
- Tool type selector
|
||||
- Display name input
|
||||
- Create button with validation
|
||||
|
||||
## Phase 4: Session Actions
|
||||
|
||||
- [ ] **Task 4.1**: Resume last session
|
||||
- Navigate to workspace
|
||||
- Update user config
|
||||
|
||||
- [ ] **Task 4.2**: Open session
|
||||
- Navigate to workspace with session
|
||||
|
||||
- [ ] **Task 4.3**: Create session
|
||||
- Call API to create instance
|
||||
- Update user config with last_session_id
|
||||
- Refresh sessions list
|
||||
|
||||
## Phase 5: Polish
|
||||
|
||||
- [ ] **Task 5.1**: Add CSS styles
|
||||
- Session cards layout
|
||||
- Badge styling
|
||||
- Responsive design
|
||||
|
||||
- [ ] **Task 5.2**: Add icons
|
||||
- Session icon in navigation
|
||||
- Action icons on cards
|
||||
|
||||
## Phase 6: Quality Gates
|
||||
|
||||
- [ ] **Task 6.1**: TypeScript check
|
||||
- `npm run typecheck`
|
||||
|
||||
- [ ] **Task 6.2**: Lint check
|
||||
- `npm run lint`
|
||||
|
||||
- [ ] **Task 6.3**: Build check
|
||||
- `npm run build`
|
||||
|
||||
- [ ] **Task 6.4**: Manual verification
|
||||
- Navigation shows Sessions tab
|
||||
- Badge shows correct count
|
||||
- Last session displays
|
||||
- Can create session from page
|
||||
- Config persists
|
||||
Reference in New Issue
Block a user