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
@@ -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>
+  )
+}