failproofai 0.0.1-beta.1

package/.next/standalone/app/components/error-fallback.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect } from "react";
+import { captureClientEvent } from "@/lib/client-telemetry";
+
+export default function ErrorFallback({
+  error,
+  reset,
+  heading,
+  defaultMessage,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+  heading: string;
+  defaultMessage: string;
+}) {
+  useEffect(() => {
+    captureClientEvent("client_error", {
+      error_message: error.message,
+      error_name: error.name,
+      error_digest: error.digest,
+    });
+  }, [error]);
+  return (
+    <main className="min-h-screen bg-background">
+      <div className="container mx-auto p-8">
+        <div className="bg-card text-card-foreground rounded-lg border border-destructive/50 p-6 shadow-sm text-center">
+          <h2 className="text-xl font-semibold text-destructive mb-2">{heading}</h2>
+          <p className="text-muted-foreground mb-4">
+            {error.message || defaultMessage}
+          </p>
+          <button
+            onClick={reset}
+            className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+          >
+            Try again
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+}

package/.next/standalone/app/components/global-error-listeners.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect } from "react";
+import { captureClientEvent } from "@/lib/client-telemetry";
+
+export function GlobalErrorListeners() {
+  useEffect(() => {
+    const handleError = (event: ErrorEvent) => {
+      captureClientEvent("unhandled_exception", {
+        error_message: event.message,
+        error_name: event.error?.name,
+        error_filename: event.filename,
+        error_lineno: event.lineno,
+        error_colno: event.colno,
+      });
+    };
+
+    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason;
+      captureClientEvent("unhandled_rejection", {
+        error_message: reason instanceof Error ? reason.message : String(reason),
+        error_name: reason instanceof Error ? reason.name : undefined,
+      });
+    };
+
+    window.addEventListener("error", handleError);
+    window.addEventListener("unhandledrejection", handleUnhandledRejection);
+
+    return () => {
+      window.removeEventListener("error", handleError);
+      window.removeEventListener("unhandledrejection", handleUnhandledRejection);
+    };
+  }, []);
+
+  return null;
+}

package/.next/standalone/app/components/lazy-log-viewer.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { LogEntry } from "@/lib/log-entries";
+
+const RawLogViewer = dynamic(
+  () => import("@/app/components/log-viewer"),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="bg-card border border-border rounded-lg p-4 shadow-sm">
+        <div className="flex items-center justify-center py-16">
+          <div className="animate-pulse text-muted-foreground">Loading log viewer...</div>
+        </div>
+      </div>
+    ),
+  }
+);
+
+interface LazyLogViewerProps {
+  entries: LogEntry[];
+  projectName: string;
+  sessionId: string;
+}
+
+export default function LazyLogViewer({ entries, projectName, sessionId }: LazyLogViewerProps) {
+  return <RawLogViewer entries={entries} projectName={projectName} sessionId={sessionId} />;
+}

package/.next/standalone/app/components/log-viewer/constants.ts

@@ -0,0 +1,33 @@
+import type { LogEntryType } from "@/lib/log-entries";
+
+export const TYPE_LABELS: Record<LogEntryType, string> = {
+  user: "User",
+  assistant: "Assistant",
+  "file-history-snapshot": "Snapshot",
+  progress: "Progress",
+  system: "System",
+  "queue-operation": "Queue",
+};
+
+export const TYPE_COLORS: Record<LogEntryType, string> = {
+  user: "bg-[color:var(--chart-1)]/20 text-[color:var(--chart-1)] border-[color:var(--chart-1)]/30",
+  assistant:
+    "bg-[color:var(--chart-2)]/20 text-[color:var(--chart-2)] border-[color:var(--chart-2)]/30",
+  "file-history-snapshot":
+    "bg-[color:var(--chart-3)]/20 text-[color:var(--chart-3)] border-[color:var(--chart-3)]/30",
+  progress:
+    "bg-[color:var(--chart-5)]/20 text-[color:var(--chart-5)] border-[color:var(--chart-5)]/30",
+  system:
+    "bg-[color:var(--chart-4)]/20 text-[color:var(--chart-4)] border-[color:var(--chart-4)]/30",
+  "queue-operation":
+    "bg-primary/20 text-primary border-primary/30",
+};
+
+export const ENTRY_BORDER_COLORS: Record<LogEntryType, string> = {
+  user: "border-l-[color:var(--chart-1)]",
+  assistant: "border-l-[color:var(--chart-2)]",
+  "file-history-snapshot": "border-l-[color:var(--chart-3)]",
+  progress: "border-l-[color:var(--chart-5)]",
+  system: "border-l-[color:var(--chart-4)]",
+  "queue-operation": "border-l-primary",
+};

package/.next/standalone/app/components/log-viewer/content-block-view.tsx

@@ -0,0 +1,142 @@
+import React, { useMemo } from "react";
+import { Brain, Wrench } from "lucide-react";
+import type {
+  ContentBlock,
+  LogEntry,
+  UserEntry,
+  AssistantEntry,
+  GenericEntry,
+} from "@/lib/log-entries";
+import { formatRaw } from "@/lib/log-format";
+import { ToolInputOutput } from "./tool-input-output";
+
+// Forward declaration — SubagentToolCard is in entry-row.tsx to keep the
+// recursive EntryRow <-> SubagentToolCard pair co-located.
+import { SubagentToolCard } from "./entry-row";
+
+interface ContentBlockViewProps {
+  block: ContentBlock;
+  entriesBySource?: Map<string, LogEntry[]>;
+  projectName: string;
+  sessionId: string;
+  highlightedUuid?: string | null;
+  autoExpandForUuid?: string | null;
+}
+
+export const ContentBlockView = React.memo(function ContentBlockView({ block, entriesBySource, projectName, sessionId, highlightedUuid, autoExpandForUuid }: ContentBlockViewProps) {
+  switch (block.type) {
+    case "text":
+      return <p className="whitespace-pre-wrap text-sm">{block.text}</p>;
+    case "tool_use":
+      if (block.name === "Task" && (block.subagentType || block.subagentId)) {
+        const subagentEntries = block.subagentId && entriesBySource
+          ? entriesBySource.get(`agent-${block.subagentId}`)
+          : undefined;
+        return (
+          <SubagentToolCard
+            block={block}
+            subagentEntries={subagentEntries}
+            projectName={projectName}
+            sessionId={sessionId}
+            highlightedUuid={highlightedUuid}
+            autoExpandForUuid={autoExpandForUuid}
+          />
+        );
+      }
+      return (
+        <div className="border border-border/50 rounded-lg p-3 bg-muted/10">
+          <div className="flex items-center gap-2 mb-2">
+            <Wrench className="w-4 h-4 text-primary flex-shrink-0" />
+            <span className="font-mono text-sm text-primary truncate min-w-0">
+              {block.name}
+            </span>
+            {block.result && (
+              <span className="text-xs text-muted-foreground ml-auto flex-shrink-0">
+                {block.result.durationFormatted}
+              </span>
+            )}
+          </div>
+          <ToolInputOutput block={block} />
+        </div>
+      );
+    case "thinking":
+      return (
+        <div className="border border-[color:var(--chart-5)]/30 rounded-lg p-3 bg-[color:var(--chart-5)]/5">
+          <details>
+            <summary className="flex items-center gap-2 text-xs cursor-pointer hover:text-foreground transition-colors text-[color:var(--chart-5)]">
+              <Brain className="w-4 h-4" />
+              <span>Thinking</span>
+              <span className="text-muted-foreground ml-1">
+                ({block.thinking.length.toLocaleString()} chars)
+              </span>
+            </summary>
+            <p className="mt-2 whitespace-pre-wrap text-xs text-muted-foreground p-2 bg-muted/30 rounded max-h-64 overflow-y-auto">
+              {block.thinking}
+            </p>
+          </details>
+        </div>
+      );
+  }
+});
+
+export function UserContent({ entry }: { entry: UserEntry }) {
+  return (
+    <div>
+      {entry.message.content && (
+        <p className="whitespace-pre-wrap text-sm">{entry.message.content}</p>
+      )}
+    </div>
+  );
+}
+
+interface AssistantContentProps {
+  entry: AssistantEntry;
+  entriesBySource?: Map<string, LogEntry[]>;
+  projectName: string;
+  sessionId: string;
+  highlightedUuid?: string | null;
+  autoExpandForUuid?: string | null;
+}
+
+export const AssistantContent = React.memo(function AssistantContent({ entry, entriesBySource, projectName, sessionId, highlightedUuid, autoExpandForUuid }: AssistantContentProps) {
+  const { content } = entry.message;
+
+  return (
+    <div className="space-y-3">
+      {content.map((block, i) => (
+        <ContentBlockView key={i} block={block} entriesBySource={entriesBySource} projectName={projectName} sessionId={sessionId} highlightedUuid={highlightedUuid} autoExpandForUuid={autoExpandForUuid} />
+      ))}
+    </div>
+  );
+});
+
+export const GenericContent = React.memo(function GenericContent({ entry }: { entry: GenericEntry }) {
+  const summary = useMemo(() => {
+    if (entry.type === "progress") {
+      const data = entry.raw.data as Record<string, unknown> | undefined;
+      const agentId = data?.agentId as string | undefined;
+      const msgType = data?.type as string | undefined;
+      return [msgType, agentId && `agent:${agentId}`]
+        .filter(Boolean)
+        .join(" | ");
+    }
+    if (entry.type === "file-history-snapshot") {
+      return "File history snapshot";
+    }
+    return entry.type;
+  }, [entry.type, entry.raw]);
+
+  return (
+    <div className="text-sm">
+      <span className="text-muted-foreground">{summary}</span>
+      <details className="mt-1">
+        <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground transition-colors">
+          Show raw JSON
+        </summary>
+        <pre className="mt-1 p-2 bg-muted/50 rounded text-xs whitespace-pre-wrap break-words max-h-64 overflow-y-auto">
+          {formatRaw(entry)}
+        </pre>
+      </details>
+    </div>
+  );
+});

package/.next/standalone/app/components/log-viewer/entry-icon.tsx

@@ -0,0 +1,27 @@
+import {
+  User,
+  Bot,
+  FileText,
+  Activity,
+  Settings,
+  Play,
+} from "lucide-react";
+import type { LogEntryType } from "@/lib/log-entries";
+
+export function EntryIcon({ type }: { type: LogEntryType }) {
+  const className = "w-4 h-4";
+  switch (type) {
+    case "user":
+      return <User className={className} />;
+    case "assistant":
+      return <Bot className={className} />;
+    case "file-history-snapshot":
+      return <FileText className={className} />;
+    case "progress":
+      return <Activity className={className} />;
+    case "system":
+      return <Settings className={className} />;
+    case "queue-operation":
+      return <Play className={className} />;
+  }
+}

package/.next/standalone/app/components/log-viewer/entry-link-button.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useCallback } from "react";
+import { Link2 } from "lucide-react";
+import { toast } from "@/app/components/toast";
+
+interface EntryLinkButtonProps {
+  uuid: string;
+}
+
+export function EntryLinkButton({ uuid }: EntryLinkButtonProps) {
+  const handleClick = useCallback(async () => {
+    window.history.replaceState(null, "", `#entry-${uuid}`);
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+    } catch {
+      // Fallback for non-secure contexts
+      const textarea = document.createElement("textarea");
+      textarea.value = window.location.href;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    }
+    toast("Link copied");
+  }, [uuid]);
+
+  return (
+    <button
+      onClick={handleClick}
+      title="Copy link to entry"
+      className="inline-flex items-center justify-center rounded p-1 text-muted-foreground hover:text-foreground hover:bg-muted/80 transition-colors opacity-0 group-hover:opacity-100 transition-opacity"
+    >
+      <Link2 className="w-3.5 h-3.5" />
+    </button>
+  );
+}

package/.next/standalone/app/components/log-viewer/entry-row.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { Workflow, ChevronRight } from "lucide-react";
+import type { LogEntry, ToolUseBlock } from "@/lib/log-entries";
+import { cn } from "@/lib/utils";
+import { ENTRY_BORDER_COLORS } from "./constants";
+import { TypeBadge } from "./type-badge";
+import { ToolInputOutput } from "./tool-input-output";
+import { StatsBar } from "./stats-bar";
+import { QueueDivider } from "./queue-divider";
+import { UserContent, AssistantContent, GenericContent } from "./content-block-view";
+import { formatLocalTimestamp, getEntryTextContent } from "@/lib/log-format";
+import { CopyButton } from "@/app/components/copy-button";
+import { EntryLinkButton } from "./entry-link-button";
+
+// ── Subagent Tool Card ──
+
+interface SubagentToolCardProps {
+  block: ToolUseBlock;
+  subagentEntries?: LogEntry[];
+  projectName: string;
+  sessionId: string;
+  highlightedUuid?: string | null;
+  autoExpandForUuid?: string | null;
+}
+
+export function SubagentToolCard({ block, subagentEntries, projectName, sessionId, highlightedUuid, autoExpandForUuid }: SubagentToolCardProps) {
+  const shouldAutoExpand = !!(autoExpandForUuid && subagentEntries?.some(e => e.uuid === autoExpandForUuid));
+  const [expanded, setExpanded] = useState(shouldAutoExpand);
+
+  useEffect(() => {
+    if (!shouldAutoExpand) return;
+    const raf = requestAnimationFrame(() => setExpanded(true));
+    return () => cancelAnimationFrame(raf);
+  }, [shouldAutoExpand]);
+
+  const handleToggle = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  const hasEntries = subagentEntries && subagentEntries.length > 0;
+
+  return (
+    <div className="border border-border/50 rounded-lg p-3 bg-muted/10">
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-2">
+        <Workflow className="w-4 h-4 text-[color:var(--chart-5)]" />
+        <span className="font-mono text-sm text-[color:var(--chart-5)]">Subagent</span>
+        {block.subagentType && (
+          <span className="inline-flex items-center px-2 py-0.5 text-xs font-mono rounded border bg-[color:var(--chart-5)]/20 text-[color:var(--chart-5)] border-[color:var(--chart-5)]/30">
+            {block.subagentType}
+          </span>
+        )}
+        {block.result && (
+          <span className="text-xs text-muted-foreground ml-auto">
+            {block.result.durationFormatted}
+          </span>
+        )}
+      </div>
+
+      {/* Description */}
+      {block.subagentDescription && (
+        <p className="text-sm text-muted-foreground mb-2">
+          {block.subagentDescription}
+        </p>
+      )}
+
+      {/* Expand button */}
+      {block.subagentId && subagentEntries && (
+        <button
+          onClick={handleToggle}
+          className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded border border-primary/30 bg-primary/10 text-primary hover:bg-primary/20 transition-colors mb-2"
+        >
+          <ChevronRight
+            className={cn("w-3 h-3 transition-transform", expanded && "rotate-90")}
+          />
+          <span>agent-{block.subagentId}</span>
+          <span className="text-muted-foreground">
+            {expanded ? "Collapse" : "View subagent log"}
+          </span>
+        </button>
+      )}
+
+      {/* Nested subagent log */}
+      {expanded && (
+        <div className="ml-4 pl-3 border-l-2 border-primary/30 mt-2 space-y-2">
+          {subagentEntries && subagentEntries.length === 0 && (
+            <div className="text-xs text-muted-foreground py-2">No entries found in subagent log.</div>
+          )}
+          {hasEntries && (
+            <>
+              <StatsBar entries={subagentEntries} compact />
+            </>
+          )}
+          {subagentEntries && subagentEntries.map((entry) =>
+            entry.type === "queue-operation" ? (
+              <QueueDivider
+                key={entry.uuid || entry.timestamp}
+                entry={entry}
+              />
+            ) : (
+              <EntryRow
+                key={entry.uuid || entry.timestamp}
+                entry={entry}
+                projectName={projectName}
+                sessionId={sessionId}
+                isHighlighted={!!highlightedUuid && entry.uuid === highlightedUuid}
+              />
+            )
+          )}
+        </div>
+      )}
+
+      {/* Raw input/output */}
+      <ToolInputOutput block={block} />
+    </div>
+  );
+}
+
+// ── Entry Row ──
+
+interface EntryRowProps {
+  entry: LogEntry;
+  entriesBySource?: Map<string, LogEntry[]>;
+  projectName: string;
+  sessionId: string;
+  isHighlighted?: boolean;
+  highlightedUuid?: string | null;
+  autoExpandForUuid?: string | null;
+}
+
+function EntryContent({ entry, entriesBySource, projectName, sessionId, highlightedUuid, autoExpandForUuid }: EntryRowProps): React.ReactNode {
+  switch (entry.type) {
+    case "user":
+      return <UserContent entry={entry} />;
+    case "assistant":
+      return <AssistantContent entry={entry} entriesBySource={entriesBySource} projectName={projectName} sessionId={sessionId} highlightedUuid={highlightedUuid} autoExpandForUuid={autoExpandForUuid} />;
+    case "file-history-snapshot":
+    case "progress":
+    case "system":
+      return <GenericContent entry={entry} />;
+  }
+}
+
+export const EntryRow = React.memo(function EntryRow({ entry, entriesBySource, projectName, sessionId, isHighlighted, highlightedUuid, autoExpandForUuid }: EntryRowProps) {
+  return (
+    <div
+      id={entry.uuid ? `entry-${entry.uuid}` : undefined}
+      className={cn(
+        `group border-l-4 ${ENTRY_BORDER_COLORS[entry.type]} bg-card/50 rounded-r-lg mb-2 hover:bg-muted/30 transition-colors`,
+        isHighlighted && "entry-highlighted"
+      )}
+    >
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-border/30">
+        <TypeBadge type={entry.type} />
+        <div className="flex items-center gap-1 ml-auto">
+          {entry.uuid && <EntryLinkButton uuid={entry.uuid} />}
+          <CopyButton text={getEntryTextContent(entry)} />
+          <span className="text-xs font-mono text-muted-foreground whitespace-nowrap">
+            {formatLocalTimestamp(entry.timestampMs)}
+          </span>
+        </div>
+      </div>
+      <div className="px-4 py-3">
+        <EntryContent entry={entry} entriesBySource={entriesBySource} projectName={projectName} sessionId={sessionId} highlightedUuid={highlightedUuid} autoExpandForUuid={autoExpandForUuid} />
+      </div>
+    </div>
+  );
+}, (prev, next) =>
+  prev.entry === next.entry &&
+  prev.entriesBySource === next.entriesBySource &&
+  prev.projectName === next.projectName &&
+  prev.sessionId === next.sessionId &&
+  prev.isHighlighted === next.isHighlighted &&
+  prev.highlightedUuid === next.highlightedUuid &&
+  prev.autoExpandForUuid === next.autoExpandForUuid
+);

package/.next/standalone/app/components/log-viewer/index.tsx

@@ -0,0 +1 @@
+export { default } from "@/app/components/raw-log-viewer";

package/.next/standalone/app/components/log-viewer/queue-divider.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Play, ChevronRight } from "lucide-react";
+import type { QueueOperationEntry } from "@/lib/log-entries";
+import { formatLocalTimestamp } from "@/lib/log-format";
+
+interface QueueDividerProps {
+  entry: QueueOperationEntry;
+  isCollapsed?: boolean;
+  entryCount?: number;
+  onToggle?: () => void;
+}
+
+export const QueueDivider = React.memo(function QueueDivider({
+  entry,
+  isCollapsed,
+  entryCount,
+  onToggle,
+}: QueueDividerProps) {
+  const interactive = typeof onToggle === "function";
+
+  const pill = (
+    <div className={`flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-medium${interactive ? " group-hover:bg-primary/20 transition-colors" : ""}`}>
+      {interactive ? (
+        <ChevronRight
+          className={`w-3 h-3 transition-transform ${isCollapsed ? "" : "rotate-90"}`}
+        />
+      ) : (
+        <Play className="w-3 h-3" />
+      )}
+      <span>{entry.label}</span>
+      <span className="text-muted-foreground">{formatLocalTimestamp(entry.timestampMs)}</span>
+      {interactive && isCollapsed && typeof entryCount === "number" && (
+        <span className="ml-1 px-1.5 py-0.5 rounded bg-primary/20 text-[10px] leading-none">
+          {entryCount} {entryCount === 1 ? "entry" : "entries"}
+        </span>
+      )}
+    </div>
+  );
+
+  if (interactive) {
+    return (
+      <button
+        type="button"
+        onClick={onToggle}
+        className="group flex items-center gap-3 py-3 px-4 w-full cursor-pointer"
+      >
+        <div className="flex-1 h-px bg-primary/30" />
+        {pill}
+        <div className="flex-1 h-px bg-primary/30" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3 py-3 px-4">
+      <div className="flex-1 h-px bg-primary/30" />
+      {pill}
+      <div className="flex-1 h-px bg-primary/30" />
+    </div>
+  );
+});

package/.next/standalone/app/components/log-viewer/stats-bar.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from "react";
+import {
+  User,
+  Bot,
+  Cpu,
+  Clock,
+  MessageSquare,
+  Workflow,
+  Wrench,
+} from "lucide-react";
+import type { LogEntry } from "@/lib/log-entries";
+import { calculateLogStats } from "@/lib/log-stats";
+
+interface StatsBarProps {
+  entries: LogEntry[];
+  compact?: boolean;
+}
+
+export const StatsBar = React.memo(function StatsBar({ entries, compact = false }: StatsBarProps) {
+  const stats = useMemo(() => calculateLogStats(entries), [entries]);
+  const icon = compact ? "w-3.5 h-3.5" : "w-4 h-4";
+  const value = compact ? "text-xs font-medium" : "text-sm font-medium";
+  const label = compact ? "text-[10px] text-muted-foreground" : "text-xs text-muted-foreground";
+
+  const items = [
+    ...(!compact ? [{ Icon: MessageSquare, color: "text-primary", v: stats.turnCount, l: "Turns" }] : []),
+    { Icon: User, color: "text-[color:var(--chart-1)]", v: stats.userCount, l: "User" },
+    { Icon: Bot, color: "text-[color:var(--chart-2)]", v: stats.assistantCount, l: "Assistant" },
+    { Icon: Wrench, color: "text-[color:var(--chart-3)]", v: stats.toolCallCount, l: compact ? "Tools" : "Tool Calls" },
+    { Icon: Workflow, color: "text-[color:var(--chart-5)]", v: stats.subagentCount, l: "Subagents" },
+    { Icon: Clock, color: "text-[color:var(--chart-4)]", v: stats.duration || "\u2014", l: "Duration" },
+    { Icon: Cpu, color: "text-[color:var(--chart-5)]", v: stats.models.length > 0 ? stats.models.join(", ") : "\u2014", l: compact ? "Model" : "Model(s)" },
+  ];
+
+  return (
+    <div className={compact ? "bg-muted/30 border border-border/50 rounded-lg p-3 mb-3" : "bg-card border border-border rounded-lg p-4"}>
+      <div className={`grid grid-cols-2 ${compact ? `sm:grid-cols-6 gap-3` : `sm:grid-cols-4 lg:grid-cols-7 gap-4`}`}>
+        {items.map(({ Icon, color, v, l }) => (
+          <div key={l} className="flex items-center gap-2">
+            <Icon className={`${icon} ${color}`} />
+            <div>
+              <div className={`${value} truncate max-w-[120px]`}>{v}</div>
+              <div className={label}>{l}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});