DashDescomplicar/okf/entidades/Painel-Sessoes.md

type, layer, tags, title

type	layer	tags	title
Entity	wiki	stack dashdescomplicar frontend painel sessoes claude-code	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)