feat: LangChain auto-instrumentation + dashboard UI

- LangChain: AgentLensCallbackHandler with auto-span creation for
  LLM calls, tool calls, chains, and agent decision logging
- Dashboard: trace list with search, status filters, pagination
- Dashboard: trace detail with Decision/Span/Event tabs
- Dashboard: sidebar layout, responsive design, dark theme
This commit is contained in:
Vectry
2026-02-09 23:36:28 +00:00
parent 3fe9013838
commit 21b4f9f316
7 changed files with 1677 additions and 23 deletions

24
apps/web/src/lib/utils.ts Normal file
View File

@@ -0,0 +1,24 @@
export function formatDuration(ms: number | null | undefined): string {
if (ms === null || ms === undefined) return "—";
if (ms < 1000) return `${ms}ms`;
if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
return `${(ms / 60000).toFixed(1)}m`;
}
export function formatRelativeTime(date: string | Date): string {
const now = new Date();
const then = typeof date === "string" ? new Date(date) : date;
const diffMs = now.getTime() - then.getTime();
const diffSec = Math.floor(diffMs / 1000);
if (diffSec < 60) return "just now";
const diffMin = Math.floor(diffSec / 60);
if (diffMin < 60) return `${diffMin}m ago`;
const diffHour = Math.floor(diffMin / 60);
if (diffHour < 24) return `${diffHour}h ago`;
const diffDay = Math.floor(diffHour / 24);
return `${diffDay}d ago`;
}
export function cn(...classes: (string | boolean | undefined | null)[]): string {
return classes.filter(Boolean).join(" ");
}