feat(observabilidade): UI timeline por sessão com filtros

2026-04-23 01:14:59 +01:00
parent eb781a87ce
commit 8ca6b7e166
2 changed files with 168 additions and 1 deletions
@@ -0,0 +1,87 @@
+import { useState } from 'react'
+import type { SessionEvent } from '../../../api/types/session'
+
+function truncate(s: string, n: number): string {
+  return s.length > n ? s.slice(0, n) + '…' : s
+}
+
+interface Props {
+  event: SessionEvent
+  defaultCollapsed: boolean
+}
+
+export function EventBlock({ event, defaultCollapsed }: Props) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed)
+
+  const base = 'rounded border px-3 py-2 my-1 text-sm'
+  switch (event.type) {
+    case 'user':
+      if (event.tool_result !== null && event.tool_result !== undefined) {
+        return (
+          <div id={`evt-${event.index}`} className={`${base} bg-slate-900/40 border-slate-700`}>
+            <button onClick={() => setCollapsed(!collapsed)} className="text-xs text-slate-500 uppercase">
+              tool_result {collapsed ? '▸' : '▾'}
+            </button>
+            {!collapsed && (
+              <pre className="mt-2 text-xs overflow-x-auto whitespace-pre-wrap text-slate-300">
+                {typeof event.tool_result === 'string' ? event.tool_result : JSON.stringify(event.tool_result, null, 2)}
+              </pre>
+            )}
+          </div>
+        )
+      }
+      return (
+        <div id={`evt-${event.index}`} className={`${base} bg-blue-500/10 border-blue-500/30`}>
+          <div className="text-xs text-blue-300 uppercase mb-1">user</div>
+          <div className="whitespace-pre-wrap text-slate-100">{event.text ?? '—'}</div>
+        </div>
+      )
+    case 'assistant':
+      if (event.tool_name) {
+        return (
+          <div id={`evt-${event.index}`} className={`${base} bg-amber-500/10 border-amber-500/30`}>
+            <button onClick={() => setCollapsed(!collapsed)} className="text-xs text-amber-300 uppercase">
+              tool_use: {event.tool_name} {collapsed ? '▸' : '▾'}
+            </button>
+            {!collapsed && event.tool_input && (
+              <pre className="mt-2 text-xs overflow-x-auto whitespace-pre-wrap text-slate-300">
+                {JSON.stringify(event.tool_input, null, 2)}
+              </pre>
+            )}
+          </div>
+        )
+      }
+      return (
+        <div id={`evt-${event.index}`} className={`${base} bg-slate-800/40 border-slate-700`}>
+          <div className="text-xs text-slate-500 uppercase mb-1">assistant</div>
+          <div className="whitespace-pre-wrap text-slate-200">{truncate(event.text ?? '—', collapsed ? 300 : Number.MAX_SAFE_INTEGER)}</div>
+          {(event.text?.length ?? 0) > 300 && (
+            <button onClick={() => setCollapsed(!collapsed)} className="text-xs text-slate-500 mt-1">
+              {collapsed ? 'Expandir' : 'Colapsar'}
+            </button>
+          )}
+        </div>
+      )
+    case 'system':
+      return (
+        <div id={`evt-${event.index}`} className={`${base} bg-slate-900/30 border-slate-800 text-xs text-slate-500`}>
+          <button onClick={() => setCollapsed(!collapsed)} className="uppercase">
+            system {event.skill_invoked ? `· skill: ${event.skill_invoked}` : ''} {event.hook_name ? `· hook: ${event.hook_name}` : ''} {collapsed ? '▸' : '▾'}
+          </button>
+          {!collapsed && <div className="mt-2 whitespace-pre-wrap">{event.text ?? JSON.stringify(event.raw)}</div>}
+        </div>
+      )
+    case 'attachment':
+      return (
+        <div id={`evt-${event.index}`} className={`${base} bg-purple-500/10 border-purple-500/30 text-xs text-purple-300`}>
+          📎 attachment
+        </div>
+      )
+    default:
+      return (
+        <div id={`evt-${event.index}`} className={`${base} bg-slate-900/20 border-slate-800 text-xs text-slate-500`}>
+          {event.type}
+        </div>
+      )
+  }
+}