Session row / list
The primary list surface for the operator's sessions. Each row is fully self-describing: status, title, agent, branch, duration, spend, owner, and last activity.
Included in the single kansho full pack. Components are not offered as separate installs.
List
Selectable rowsStandalone row
Used in cards and panelsCompact density
Included components
This page is the canonical destination for these components. All ship in the single Kansho pack.
Interactive container
components/ui/interactive-container.tsxSession row
components/surfaces/session-row.tsxComponent documentation
Interactive container
components/ui/interactive-container.tsxPurpose
Turns a wrapper into a button only when an onClick handler is supplied.
Appropriate use
Use for row or card surfaces that are sometimes interactive while preserving a non-interactive div otherwise.
Example
components/ui/interactive-container.tsx has a representative live example in the "Standalone row" section on /components/session-list.
States
Supports interactive or static rendering plus pressed, expanded, and controls states.
API and props
InteractiveContainer accepts children, className, style, onClick, pressed, expanded, and controls.
Dependencies
React and the Kansho cn utility.
Accessibility
Interactive instances use native button semantics and can expose aria-pressed, aria-expanded, and aria-controls; static instances remain divs.
Limitations
Interactive content must not contain nested buttons or links; use separate actions outside the container.
Source
Source: components/ui/interactive-container.tsx.
Full pack
components/ui/interactive-container.tsx is documented at /components/session-list and installs only through the single Kansho full pack; no individual component install is offered.
Session row
components/surfaces/session-row.tsxPurpose
Displays a session summary as a selectable row and supplies a matching list composition.
Appropriate use
Use for recent-session or run navigation where status, title, time, and optional trailing content need a consistent row.
Example
components/surfaces/session-row.tsx has a representative live example in the "Standalone row" section on /components/session-list.
States
Supports comfortable or compact density, selected or unselected state, static or clickable rows, optional trailing content, and list-level selected session state.
API and props
SessionRow accepts session, density, selected, onClick, trailing, className, and style; SessionList accepts sessions, density, onSelect, selectedId, className, and caption.
Dependencies
React, Lucide icons, InteractiveContainer, StatusPill, Time, and the Kansho cn utility.
Accessibility
Clickable rows use native button semantics through InteractiveContainer, expose pressed state, and receive a readable session label; timestamps and status retain visible text.
Limitations
The list does not fetch, group, paginate, or virtualize sessions, and nested interactive controls must not be placed inside a clickable row.
Source
Source: components/surfaces/session-row.tsx.
Full pack
components/surfaces/session-row.tsx is documented at /components/session-list and installs only through the single Kansho full pack; no individual component install is offered.