alex
ffb7ef0d21
- 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
61 lines
2.5 KiB
Markdown
61 lines
2.5 KiB
Markdown
## 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
|