UI componentsHooks
useSessions
Paginated session list fetcher. Holds its own cursor — pass a stable initialOffset and drive pagination with setOffset. Refetches automatically whenever filters or offset change.
Signature
useSessions(limit?: number, initialOffset?: number, filters?: SessionsFilters): { sessions, meta, loading, error, offset, setOffset }Installation
pnpm dlx agent-observability-ui@latest add observability-hooksnpx agent-observability-ui@latest add observability-hooksyarn dlx agent-observability-ui@latest add observability-hooksbunx --bun agent-observability-ui@latest add observability-hooksUsage
import { useSessions } from '@/lib/observability-hooks'
export function MyList() {
const { sessions, meta, loading, offset, setOffset } = useSessions(20, 0, {
accountId: 'acc_demo',
})
if (loading) return <Spinner />
return (
<>
{sessions.map((s) => (
<Row key={s.id} session={s} />
))}
<Pagination
offset={offset}
limit={meta.limit}
total={meta.total_count}
onChange={setOffset}
/>
</>
)
}Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
limit | number | 20 | Page size. The server clamps to [1, 20]. |
initialOffset | number | 0 | Starting offset. Syncs when the prop changes (so you can drive it from URL state) AND exposes setOffset for local pagination. |
filters | SessionsFilters | — | Optional filters: { accountId?, startedFrom?, startedTo? }. Offset auto-resets to 0 when any filter changes. |
Returns
{ sessions: AgentSessionRow[], meta: PlivoMeta, loading: boolean, error: string | null, offset: number, setOffset: (n: number) => void }Agent Observability Provider
Context provider that every other component from this library expects. Install and mount it once, high in your tree — it creates the API client, resolves the current session, and shares the hooks that drive the rest of the UI. No visual output of its own.
useSession
Returns the single session loaded by the provider. Read-only convenience wrapper — the actual fetch is done by AgentObservabilityProvider when a sessionId is passed to it.