Developer
30 lines
3.3 KiB
Markdown
30 lines
3.3 KiB
Markdown
# apps/web/src/components/features/session
|
|
dir: apps/web/src/components/features/session
|
|
|
|
index: apps/web/src/components/features/session/.pi-map.index.md
|
|
|
|
## role
|
|
Provides UI components for managing development sessions including creation, listing, and individual session display with status and actions.
|
|
## files
|
|
- create-session-form.tsx | A React form component for creating and starting a new development session with configurable project, repository, workspace, tool type, config profile, and SSH key options. | exp: CreateSessionForm | dep: react, ../../icon, ../../loading-overlay, ../../../api/sessions, ../../../types, ../../../api/git-repositories, ../../../api/tool-types, ../../../api/ssh-keys, ../../../api/config-profiles, ../../../api/workspaces, ../../../types/workspace, icon, loading-overlay, sessions API, git-repositories API, tool-types API, ssh-keys API, config-profiles API, workspaces API, types
|
|
- session-card.tsx | Renders a React card component displaying session information with status badges, inline rename editing, action buttons, and responsive mobile/desktop layouts including dropdown menus and action sheets. | exp: SessionCardProps, func:SessionCard({ session, onOpen, onStart, onStop, onDelete, onRecreateTunnel, onRename, isBusy = false, busyLabel = "Working...", tunnelHealth = null, }: SessionCardProps), call:useState, call:useRef, call:useMobileViewport, call:session.tool_type_interfaces?.includes, call:[ "running", "building", "starting", "probing", "pending", "unhealthy", ].includes, call:useEffect, call:optionsRef.current.contains, call:setOptionsOpen, call:document.addEventListener, call:document.removeEventListener, call:window.confirm, call:onDelete, call:setEditName, call:onRename, call:setIsEditingName, call:editName.trim, call:onOpen, call:new Date(session.created_at).toLocaleString, call:setShowActionSheet, call:onStart, call:onStop, call:onRecreateTunnel | dep: react, ../../../api/sessions, ../../icon, ../../../hooks/use-mobile-viewport, ../mobile/mobile-action-sheet, ../../loading-overlay
|
|
- session-list.tsx | Renders a list of sessions grouped by active/recent status or as a flat grid, delegating to SessionCard for individual session display. | exp: SessionListProps, func:SessionList({ sessions, onOpen, onStart, onStop, onDelete, onRecreateTunnel, onRename, actionBusyId = null, tunnelHealth = {}, showGrouping = true, activeTitle = "Active Sessions", recentTitle = "Recent Sessions", maxRecent = 5, emptyMessage = "No sessions", }: SessionListProps), call:sessions.filter, call:activeStatuses.includes, call:sessions .filter((s) => recentStatuses.includes(s.status)) .slice, call:recentStatuses.includes, call:sessions.map, call:activeSessions.map, call:recentSessions.map | dep: ../../../api/sessions, ./session-card, Session, SessionCard, InstanceHealth
|
|
## arch
|
|
Presentational component pattern with feature-specific compound components (form, list, card) using responsive design and inline editing for CRUD session operations.
|
|
## tags
|
|
session, call:on, api, card, call:use, call:set, list, mobile
|
|
## symbols
|
|
- SessionCard
|
|
- SessionList
|
|
- CreateSessionForm
|
|
- SessionCardProps
|
|
- call:useState
|
|
- call:useRef
|
|
- call:useMobileViewport
|
|
- call:session.tool_type_interfaces?.includes
|
|
## workflows
|
|
- change session behavior
|
|
read: create-session-form.tsx, session-card.tsx, session-list.tsx
|
|
## dirty
|
|
-
|