show stream age as last update offset

ui-src/src/App.tsx

@@ -310,17 +310,16 @@ function durationSeconds(value?: number | null) {
   return typeof value === "number" && Number.isFinite(value) ? `${(value / 1000).toFixed(2)} s` : "-";
 }
 
-function secondsSince(value: string | null | undefined, nowMs: number, freezeAt?: string | null) {
-  if (!value) {
+function secondsSince(startedAt: string | null | undefined, updatedAt: string | null | undefined) {
+  if (!startedAt || !updatedAt) {
     return "-";
   }
-  const atMs = new Date(value).getTime();
-  if (Number.isNaN(atMs)) {
+  const startedMs = new Date(startedAt).getTime();
+  const updatedMs = new Date(updatedAt).getTime();
+  if (Number.isNaN(startedMs) || Number.isNaN(updatedMs)) {
     return "-";
   }
-  const freezeMs = freezeAt ? new Date(freezeAt).getTime() : Number.NaN;
-  const endMs = Number.isNaN(freezeMs) ? nowMs : freezeMs;
-  return `${Math.max(0, (endMs - atMs) / 1000).toFixed(1)} s`;
+  return `${Math.max(0, (updatedMs - startedMs) / 1000).toFixed(1)} s`;
 }
 
 function bytesFormat(value?: number | null) {
@@ -491,7 +490,6 @@ export default function App() {
   const [latestLogSeq, setLatestLogSeq] = useState(0);
   const [requestQuery, setRequestQuery] = useState("");
   const [requestFilter, setRequestFilter] = useState("all");
-  const [nowMs, setNowMs] = useState(() => Date.now());
   const [ruleForm, setRuleForm] = useState<RuleFormState>(ruleFormFromStatus(null));
   const [profileForm, setProfileForm] = useState<ProfileFormState>(defaultProfileForm);
   const [ruleMessage, setRuleMessage] = useState<MessageState>({ text: "", tone: "" });
@@ -682,7 +680,6 @@ export default function App() {
     if (page !== "requests") {
       return;
     }
-    setNowMs(Date.now());
     const timer = window.setTimeout(() => {
       loadRequests().catch((error) => {
         setRuleMessage({ text: error?.message || String(error), tone: "error" });
@@ -691,16 +688,6 @@ export default function App() {
     return () => window.clearTimeout(timer);
   }, [page, requestQuery, requestFilter]);
 
-  useEffect(() => {
-    if (page !== "requests") {
-      return;
-    }
-    const timer = window.setInterval(() => {
-      setNowMs(Date.now());
-    }, 1000);
-    return () => window.clearInterval(timer);
-  }, [page]);
-
   async function saveProfile(event: FormEvent) {
     event.preventDefault();
     setProfileMessage({ text: "正在保存 profile...", tone: "" });
@@ -1044,7 +1031,7 @@ export default function App() {
                                 <span className="meta-pill meta-stream">
                                   <span className="meta-key">流</span>
                                   {entry.response_stream
-                                    ? `${numberFormat(entry.stream_chunk_count)} chunk / ${bytesFormat(entry.response_bytes_received)} / ${secondsSince(entry.last_activity_at || entry.usage_last_updated_at, nowMs, entry.finished_at)}`
+                                    ? `${numberFormat(entry.stream_chunk_count)} chunk / ${bytesFormat(entry.response_bytes_received)} / ${secondsSince(entry.started_at, entry.last_activity_at || entry.usage_last_updated_at || entry.finished_at)}`
                                     : "-"}
                                 </span>
                                 <span className="meta-pill meta-received">