feat: add session list overhaul proposal
- Add proposal for unified session list components - Add design doc with component architecture - Add specs for SessionCard and SessionList requirements - Add implementation tasks Refs: session-list-overhaul
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
## Context
|
||||
|
||||
The current session list implementation duplicates rendering logic across `dashboard.tsx` and `sessions.tsx`. Both pages fetch the same data, apply similar filtering (active vs recent/stopped), and render session cards with inconsistent styling and controls. The dashboard has a compact grid view while the sessions page has a list view, but neither provides all control actions (open, stop, start, delete) in a consistent way.
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:**
|
||||
- Unified session card component with all control actions visible and accessible
|
||||
- Unified session list component that handles filtering, grouping, and empty states
|
||||
- Consistent visual design across dashboard and sessions pages
|
||||
- Clear status indicators (running, stopped, error, building, etc.)
|
||||
- Project/repository context visible on each card
|
||||
- Responsive layout that works on mobile and desktop
|
||||
|
||||
**Non-Goals:**
|
||||
- No API changes
|
||||
- No new session management features (just better UI for existing ones)
|
||||
- No changes to session creation flow
|
||||
- No real-time updates beyond existing polling
|
||||
|
||||
## Decisions
|
||||
|
||||
**Decision: Two levels of components**
|
||||
- `SessionCard`: Individual session display with actions
|
||||
- `SessionList`: Container that handles grouping and layout
|
||||
This allows the dashboard to use `SessionList` directly while the sessions page can add additional filtering/controls around it.
|
||||
|
||||
**Decision: Card-based layout over table**
|
||||
Cards provide better mobile experience and can show richer information (project context, tool icon, status badge). Tables are harder to make responsive.
|
||||
|
||||
**Decision: Inline actions on cards**
|
||||
Each card shows primary action (Open for running, Start for stopped) and secondary actions in a dropdown or secondary button row. This matches the existing dashboard pattern but makes it consistent.
|
||||
|
||||
**Decision: Status colors**
|
||||
- Running: green
|
||||
- Building/Starting/Probing: yellow/amber
|
||||
- Stopped: gray
|
||||
- Error: red
|
||||
- Unhealthy: orange
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
**Risk: Breaking existing dashboard layout**
|
||||
→ Mitigation: Keep the same grid layout structure, just swap the inner rendering to use SessionCard
|
||||
|
||||
**Risk: Mobile experience with many action buttons**
|
||||
→ Mitigation: Use icon buttons on mobile, text buttons on desktop. Collapse secondary actions into a "..." menu.
|
||||
|
||||
## Migration Plan
|
||||
|
||||
1. Create SessionCard and SessionList components
|
||||
2. Update dashboard.tsx to use SessionList
|
||||
3. Update sessions.tsx to use SessionList
|
||||
4. Remove old duplicated session rendering code
|
||||
5. Update styles
|
||||
6. Test both pages
|
||||
|
||||
## Open Questions
|
||||
|
||||
None
|
||||
Reference in New Issue
Block a user