feat(observabilidade): UI lista de sessões com filtros

2026-04-23 01:10:23 +01:00
parent b933b4c2e2
commit eb781a87ce
7 changed files with 321 additions and 0 deletions
@@ -10,6 +10,7 @@ import {
  Bot,
  Brain,
  ClipboardList,
+  Eye,
  Zap,
  ChevronLeft,
  ChevronRight,
@@ -35,6 +36,7 @@ const NAV_ITEMS: NavItem[] = [
  { to: '/paperclip', label: 'Paperclip', icon: Bot },
  { to: '/ai', label: 'IA / Claude', icon: Brain },
  { to: '/operations', label: 'Operações', icon: ClipboardList },
+  { to: '/sessions', label: 'Espelho', icon: Eye },
 ]

 function useIsMobile() {
@@ -0,0 +1,90 @@
+import { useState } from 'react'
+
+export interface Filters {
+  days: number
+  project: string
+  tool: string
+  skill: string
+  q: string
+}
+
+interface Props {
+  initial: Filters
+  projects: string[]
+  tools: string[]
+  skills: string[]
+  onChange: (f: Filters) => void
+}
+
+export function FilterBar({ initial, projects, tools, skills, onChange }: Props) {
+  const [f, setF] = useState<Filters>(initial)
+
+  function update(partial: Partial<Filters>) {
+    const next = { ...f, ...partial }
+    setF(next)
+    onChange(next)
+  }
+
+  return (
+    <div className="flex flex-wrap gap-3 p-4 bg-white/5 rounded-lg backdrop-blur border border-white/10">
+      <select
+        value={f.days}
+        onChange={(e) => update({ days: Number(e.target.value) })}
+        className="bg-slate-900 border border-white/10 rounded px-3 py-2 text-sm"
+      >
+        <option value={1}>24h</option>
+        <option value={7}>7 dias</option>
+        <option value={30}>30 dias</option>
+        <option value={90}>90 dias</option>
+        <option value={3650}>Tudo</option>
+      </select>
+
+      <select
+        value={f.project}
+        onChange={(e) => update({ project: e.target.value })}
+        className="bg-slate-900 border border-white/10 rounded px-3 py-2 text-sm"
+      >
+        <option value="">Todos os projectos</option>
+        {projects.map((p) => (
+          <option key={p} value={p}>
+            {p}
+          </option>
+        ))}
+      </select>
+
+      <select
+        value={f.tool}
+        onChange={(e) => update({ tool: e.target.value })}
+        className="bg-slate-900 border border-white/10 rounded px-3 py-2 text-sm"
+      >
+        <option value="">Qualquer tool</option>
+        {tools.map((t) => (
+          <option key={t} value={t}>
+            {t}
+          </option>
+        ))}
+      </select>
+
+      <select
+        value={f.skill}
+        onChange={(e) => update({ skill: e.target.value })}
+        className="bg-slate-900 border border-white/10 rounded px-3 py-2 text-sm"
+      >
+        <option value="">Qualquer skill</option>
+        {skills.map((s) => (
+          <option key={s} value={s}>
+            {s}
+          </option>
+        ))}
+      </select>
+
+      <input
+        type="search"
+        placeholder="Pesquisar no prompt inicial…"
+        value={f.q}
+        onChange={(e) => update({ q: e.target.value })}
+        className="flex-1 min-w-[200px] bg-slate-900 border border-white/10 rounded px-3 py-2 text-sm"
+      />
+    </div>
+  )
+}
@@ -0,0 +1,55 @@
+import { Link } from 'react-router-dom'
+import type { SessionMeta } from '../../../api/types/session'
+
+function formatDuration(sec: number | null): string {
+  if (!sec) return '—'
+  if (sec < 60) return `${sec}s`
+  if (sec < 3600) return `${Math.round(sec / 60)}min`
+  return `${Math.floor(sec / 3600)}h${Math.round((sec % 3600) / 60)}m`
+}
+
+function outcomeIcon(o: SessionMeta['outcome']): string {
+  switch (o) {
+    case 'completed':
+      return '✓'
+    case 'error':
+      return '✗'
+    case 'interrupted':
+      return '⚠'
+    default:
+      return '?'
+  }
+}
+
+interface Props {
+  session: SessionMeta
+}
+
+export function SessionRow({ session }: Props) {
+  const when = new Date(session.started_at).toLocaleString('pt-PT', { dateStyle: 'short', timeStyle: 'short' })
+  return (
+    <tr className="border-b border-white/5 hover:bg-white/5">
+      <td className="px-3 py-2 text-sm text-slate-300">{when}</td>
+      <td className="px-3 py-2 text-sm text-slate-400">{session.project_slug}</td>
+      <td className="px-3 py-2 text-sm text-slate-200">
+        <Link to={`/sessions/${session.session_id}`} className="hover:underline">
+          {session.first_prompt?.slice(0, 80) ?? '—'}
+          {(session.first_prompt?.length ?? 0) > 80 ? '…' : ''}
+        </Link>
+      </td>
+      <td className="px-3 py-2 text-sm text-slate-400">{formatDuration(session.duration_sec)}</td>
+      <td className="px-3 py-2 text-sm text-right text-slate-400">{session.event_count}</td>
+      <td className="px-3 py-2 text-sm text-right text-slate-400">{session.tool_calls}</td>
+      <td className="px-3 py-2 text-xs">
+        <div className="flex flex-wrap gap-1">
+          {session.skills_invoked.slice(0, 2).map((s) => (
+            <span key={s} className="px-2 py-0.5 bg-indigo-500/20 text-indigo-300 rounded">
+              {s}
+            </span>
+          ))}
+        </div>
+      </td>
+      <td className="px-3 py-2 text-center">{outcomeIcon(session.outcome)}</td>
+    </tr>
+  )
+}
@@ -0,0 +1,36 @@
+import type { SessionMeta, SessionEvent } from '../../../api/types/session'
+
+export interface ListParams {
+  days?: number
+  project?: string
+  tool?: string
+  skill?: string
+  q?: string
+  limit?: number
+  offset?: number
+}
+
+export interface ListResponse {
+  total: number
+  items: SessionMeta[]
+}
+
+const API_BASE = import.meta.env.VITE_API_BASE ?? ''
+
+function buildQuery(params: Record<string, unknown>): string {
+  const entries = Object.entries(params).filter(([, v]) => v !== undefined && v !== '' && v !== null)
+  if (entries.length === 0) return ''
+  return '?' + new URLSearchParams(entries as [string, string][]).toString()
+}
+
+export async function listSessions(params: ListParams): Promise<ListResponse> {
+  const res = await fetch(`${API_BASE}/api/sessions${buildQuery(params as Record<string, unknown>)}`)
+  if (!res.ok) throw new Error(`listSessions failed: ${res.status}`)
+  return res.json()
+}
+
+export async function getSession(id: string): Promise<{ meta: SessionMeta; events: SessionEvent[] }> {
+  const res = await fetch(`${API_BASE}/api/sessions/${encodeURIComponent(id)}`)
+  if (!res.ok) throw new Error(`getSession failed: ${res.status}`)
+  return res.json()
+}
@@ -11,6 +11,8 @@ import N8nMonitor from './pages/N8nMonitor.tsx'
 import Paperclip from './pages/Paperclip.tsx'
 import AiOverview from './pages/AiOverview.tsx'
 import Operations from './pages/Operations.tsx'
+import Sessions from './pages/Sessions.tsx'
+import SessionDetail from './pages/SessionDetail.tsx'
 import Layout from './components/Layout.tsx'
 import { oidcConfig } from './auth/config.ts'
 import { AuthWrapper } from './auth/AuthWrapper.tsx'
@@ -30,6 +32,8 @@ createRoot(document.getElementById('root')!).render(
              <Route path="/paperclip" element={<Paperclip />} />
              <Route path="/ai" element={<AiOverview />} />
              <Route path="/operations" element={<Operations />} />
+              <Route path="/sessions" element={<Sessions />} />
+              <Route path="/sessions/:id" element={<SessionDetail />} />
              <Route path="/callback" element={<App />} />
            </Route>
          </Routes>
@@ -0,0 +1,3 @@
+export default function SessionDetail() {
+  return <div className="p-6 text-slate-400">Em construção — Task 7.</div>
+}
@@ -0,0 +1,131 @@
+import { useEffect, useMemo, useState } from 'react'
+import { listSessions, type ListResponse } from '../lib/api/sessions'
+import { SessionRow } from '../components/sessions/SessionRow'
+import { FilterBar, type Filters } from '../components/sessions/FilterBar'
+
+const PAGE_SIZE = 50
+
+export default function Sessions() {
+  const [filters, setFilters] = useState<Filters>({ days: 7, project: '', tool: '', skill: '', q: '' })
+  const [data, setData] = useState<ListResponse | null>(null)
+  const [offset, setOffset] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    listSessions({
+      days: filters.days,
+      project: filters.project || undefined,
+      tool: filters.tool || undefined,
+      skill: filters.skill || undefined,
+      q: filters.q || undefined,
+      limit: PAGE_SIZE,
+      offset,
+    })
+      .then((r) => {
+        if (!cancelled) setData(r)
+      })
+      .catch((e: Error) => {
+        if (!cancelled) setError(e.message)
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [filters, offset])
+
+  const { projects, tools, skills } = useMemo(() => {
+    const p = new Set<string>()
+    const t = new Set<string>()
+    const s = new Set<string>()
+    data?.items.forEach((it) => {
+      p.add(it.project_slug)
+      it.tools_used.forEach((x) => t.add(x))
+      it.skills_invoked.forEach((x) => s.add(x))
+    })
+    return { projects: [...p].sort(), tools: [...t].sort(), skills: [...s].sort() }
+  }, [data])
+
+  return (
+    <div className="p-6 space-y-4">
+      <header>
+        <h1 className="text-2xl font-semibold text-white">Espelho — Sessões Claude</h1>
+        <p className="text-sm text-slate-400">Replay de sessões para observar comportamento real.</p>
+      </header>
+
+      <FilterBar
+        initial={filters}
+        projects={projects}
+        tools={tools}
+        skills={skills}
+        onChange={(f) => {
+          setFilters(f)
+          setOffset(0)
+        }}
+      />
+
+      {error && <div className="p-3 bg-red-500/10 border border-red-500/30 rounded text-red-300 text-sm">{error}</div>}
+
+      <div className="overflow-x-auto rounded-lg border border-white/10">
+        <table className="w-full">
+          <thead className="bg-white/5 text-xs uppercase text-slate-400">
+            <tr>
+              <th className="px-3 py-2 text-left">Início</th>
+              <th className="px-3 py-2 text-left">Projecto</th>
+              <th className="px-3 py-2 text-left">Prompt</th>
+              <th className="px-3 py-2 text-left">Duração</th>
+              <th className="px-3 py-2 text-right">Eventos</th>
+              <th className="px-3 py-2 text-right">Tools</th>
+              <th className="px-3 py-2 text-left">Skills</th>
+              <th className="px-3 py-2 text-center">OK</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading && (
+              <tr>
+                <td colSpan={8} className="px-3 py-8 text-center text-slate-500">
+                  A carregar…
+                </td>
+              </tr>
+            )}
+            {!loading && data?.items.length === 0 && (
+              <tr>
+                <td colSpan={8} className="px-3 py-8 text-center text-slate-500">
+                  Sem sessões para estes filtros.
+                </td>
+              </tr>
+            )}
+            {data?.items.map((s) => <SessionRow key={s.session_id} session={s} />)}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex items-center justify-between text-sm text-slate-400">
+        <span>
+          {data ? `${offset + 1}–${Math.min(offset + PAGE_SIZE, data.total)} de ${data.total}` : ''}
+        </span>
+        <div className="flex gap-2">
+          <button
+            disabled={offset === 0}
+            onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+            className="px-3 py-1 bg-white/5 rounded disabled:opacity-30"
+          >
+            Anterior
+          </button>
+          <button
+            disabled={!data || offset + PAGE_SIZE >= data.total}
+            onClick={() => setOffset(offset + PAGE_SIZE)}
+            className="px-3 py-1 bg-white/5 rounded disabled:opacity-30"
+          >
+            Seguinte
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}