---
type: Entity
layer: wiki
tags: [stack, dashdescomplicar, frontend, painel, sessoes, claude-code]
title: "Painel-Sessoes"
---

# Painel-Sessoes

Painel de observabilidade de sessões Claude Code. Lista sessões indexadas com filtros (projecto, tool, skill, pesquisa) e navega para detalhe com visualização de eventos.

## Responsabilidades

- **Listagem**: 50 sessões por página com paginação (offset)
- **Filtros**: Dias (7 default), projecto, tool, skill, pesquisa textual
- **Navegação**: Link para `/sessions/:id` (detalhe da sessão)
- **Detalhe**: Visualização de eventos com filtros (all, no-system, tools-only, prompts-only)
- **Estado**: Loading, error, e empty states com fallback

## Stack

- **React 19** + TypeScript 5.6
- **Framer Motion** (animações)
- **React Router DOM 7** (`useParams`, `Link`)
- **Tailwind CSS** (glass-card, bordas, estados)

## Componentes

| Componente | Ficheiro | Função |
|---|---|---|
| `Sessions` | `src/pages/Sessions.tsx` | Página listagem (130 linhas) |
| `SessionDetail` | `src/pages/SessionDetail.tsx` | Página detalhe (83 linhas) |
| `FilterBar` | `src/components/sessions/FilterBar.tsx` | Barra de filtros (projecto, tool, skill, search) |
| `SessionRow` | `src/components/sessions/SessionRow.tsx` | Linha de sessão na tabela |
| `EventBlock` | `src/components/sessions/EventBlock.tsx` | Bloco de evento no detalhe |

## Tipos

- `SessionMeta`: session_id, project_slug, started_at, duration_sec, event_count, tool_calls, skills_invoked, outcome, jsonl_path, first_prompt
- `SessionEvent`: index, type (user|system|assistant), tool_name, tool_result, content
- `ListResponse`: total + items[]
- `Filters`: days, project, tool, skill, q

## API Consumida

- `GET /api/sessions` — lista paginada com filtros (Zod validation)
- `GET /api/sessions/:id` — detalhe com meta + eventos

## Rota

- `/sessions` — Lista de sessões
- `/sessions/:id` — Detalhe da sessão

## Dependências

- **Observabilidade-Sessions**: SQLite local (`sessions.db`) + indexer
- **Express-API**: Rota `/api/sessions`
- **Dashboard-Engine**: Layout + navegação sidebar

## Estado

- Activo (Fase C — implementado 2026-06)