import { useCollection } from '@feltdb/core/react';
import { auditEvents } from '../feltdb';

export function Activity() {
  const state = useCollection(auditEvents);
  return <section className="page"><div className="page-heading"><div><span className="eyebrow">Durable history</span><h1>Activity</h1><p>Workflow and agent actions land in the same application state.</p></div><span className="count">{state.data.length}</span></div><article className="panel records">{state.data.length ? state.data.slice().reverse().map(event => <div className="record" key={event.id}><span className="record-mark">↗</span><div><strong>{event.action}</strong><small>{event.details} · {new Date(event.created_at).toLocaleString()}</small></div></div>) : <div className="empty"><strong>No activity yet</strong><span>Create a project or run an assistant.</span></div>}</article></section>;
}