Function SessionsPanel

dashboard/savings/src/SessionsPanel.tsx:91–271

({
  data,
  prices,
  page,
  onPage,
  pageSize,
}: {
  data: SessionsResponse | null;
  prices: PriceTable;
  page: number;
  onPage: (page: number) => void;
  pageSize: number;
})

}

export default function SessionsPanel({
  data,
  prices,
  page,
  onPage,
  pageSize,
}: {
  data: SessionsResponse | null;
  prices: PriceTable;
  page: number;
  onPage: (page: number) => void;
  pageSize: number;
}) {
  const [expanded, setExpanded] = useState<string | null>(null);

  if (!data) {
    return <EmptyState variant="dashed">Loading session accounting…</EmptyState>;
  }
  if (!data.available) {
    return (
      <EmptyState variant="dashed">
        <h3>Session store unavailable</h3>
        <p>No session database could be opened for this project.</p>
      </EmptyState>
    );
  }
  if (!data.sessions.length) {
    return (
      <EmptyState variant="dashed">
        <h3>No sessions in this range</h3>
        <p>
          Sessions appear here once agent transcripts are ingested into the
          session store ({data.db}). Sessions without timestamps are only
          listed in the “All time” range.
        </p>
      </EmptyState>
    );
  }

  const pageCount = Math.max(1, Math.ceil(data.total / pageSize));

  return (
    <Card>
      <CardHeader>
        <CardTitle>Session cost accounting</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="tss-table-scroll">
          <table className="tss-table">
            <thead>
              <tr>
                <th>Session</th>
                <th>Models</th>
                <th>Messages</th>
                <th>Tokens in</th>
                <th>Tokens out</th>
                <th>Cost</th>
                <th>Basis</th>