31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
export interface AgentTimelineItem {
|
|
id: string;
|
|
actor: string;
|
|
action: string;
|
|
timestamp: string;
|
|
status: "draft" | "proposed" | "approved" | "rejected" | "applied";
|
|
summary: string;
|
|
}
|
|
|
|
export function AgentTimeline({ items }: { items: AgentTimelineItem[] }) {
|
|
return (
|
|
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
|
|
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
|
|
<div style={{ fontWeight: 700 }}>Agent activity timeline</div>
|
|
<span className="badge">review UX</span>
|
|
</div>
|
|
{items.map((item) => (
|
|
<div key={item.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
|
|
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
|
|
<strong>{item.actor}</strong>
|
|
<span style={{ color: "var(--ml-text-secondary)" }}>{item.timestamp}</span>
|
|
</div>
|
|
<div>{item.action}</div>
|
|
<div style={{ color: "var(--ml-text-secondary)" }}>{item.summary}</div>
|
|
<div className="badge" style={{ width: "fit-content" }}>{item.status}</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
);
|
|
}
|