63 lines
2.1 KiB
Markdown
63 lines
2.1 KiB
Markdown
---
|
|
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)
|