make profile startup state-driven

ui-src/src/App.tsx

@@ -310,6 +310,17 @@ 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) {
+  if (!value) {
+    return "-";
+  }
+  const atMs = new Date(value).getTime();
+  if (Number.isNaN(atMs)) {
+    return "-";
+  }
+  return `${Math.max(0, (nowMs - atMs) / 1000).toFixed(1)} s`;
+}
+
 function bytesFormat(value?: number | null) {
   if (typeof value !== "number" || !Number.isFinite(value)) {
     return "-";
@@ -478,6 +489,7 @@ 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: "" });
@@ -668,6 +680,7 @@ 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" });
@@ -676,6 +689,16 @@ 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: "" });
@@ -1019,7 +1042,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)}`
+                                    ? `${numberFormat(entry.stream_chunk_count)} chunk / ${bytesFormat(entry.response_bytes_received)} / ${secondsSince(entry.last_activity_at || entry.usage_last_updated_at, nowMs)}`
                                     : "-"}
                                 </span>
                                 <span className="meta-pill meta-received">