From 9192084c09837325f9f7bb127892e60168d79dcb Mon Sep 17 00:00:00 2001
From: RuoJi6 <79234113+RuoJi6@users.noreply.github.com>
Date: Thu, 29 Oct 2026 09:06:23 -0700
Subject: [PATCH] feat: show captured time in packet summary

---
 .../components/finding-reproduction-panel.tsx | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/src/components/finding-reproduction-panel.tsx b/web/src/components/finding-reproduction-panel.tsx
index bbb3d30..e388037 100644
--- a/web/src/components/finding-reproduction-panel.tsx
+++ b/web/src/components/finding-reproduction-panel.tsx
@@ -82,6 +82,24 @@ function packetText(detail: FindingTrafficDetail, side: "request" | "response")
   return [head, body].filter(Boolean).join("\n\n").trim();
 }
 
+function formatCapturedAt(value: number | string | null | undefined) {
+  if (value === null || value === undefined || value === "") return "";
+  const numeric = typeof value === "number" ? value : Number(value);
+  const date = Number.isFinite(numeric)
+    ? new Date(numeric < 10_000_000_000 ? numeric * 1000 : numeric)
+    : new Date(String(value));
+  if (Number.isNaN(date.getTime())) return "";
+  return new Intl.DateTimeFormat("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  }).format(date);
+}
+
 function PacketDisclosure({
   findingId,
   bindingId,
@@ -181,10 +199,13 @@ function PacketDisclosure({
           ) : null}
           {detail ? (
             <div className="space-y-3">
-              <div className="flex flex-wrap items-center gap-2 text-xs">
+              <div className="flex min-w-0 items-center gap-2 text-xs">
                 <Badge variant="secondary">{detail.binding.snapshot.method}</Badge>
                 <Badge variant="outline">{detail.binding.snapshot.status}</Badge>
-                <span className="break-all text-muted-foreground">{detail.binding.snapshot.url}</span>
+                <span className="min-w-0 flex-1 break-all text-muted-foreground">{detail.binding.snapshot.url}</span>
+                <span className="shrink-0 whitespace-nowrap text-muted-foreground">
+                  {formatCapturedAt(detail.binding.snapshot.captured_at) || "时间未知"}
+                </span>
               </div>
               <div>
                 <p className="mb-1 text-[11px] text-muted-foreground">请求 Request</p>