feat: add manual refresh button with timestamp to account list

- Separate `refreshing` state from initial `loading` so the list stays
visible while re-fetching (no blank flash on refresh)
- Track `lastUpdated` timestamp, shown as "Updated at HH:MM:SS" next to
the button (hidden on mobile, visible sm+)
- Refresh button spins during fetch and is disabled to prevent double-tap
- i18n: add `refresh` / `updatedAt` keys in both en and zh

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/App.tsx

@@ -29,6 +29,9 @@ function Dashboard() {
             accounts={accounts.list}
             loading={accounts.loading}
             onDelete={accounts.deleteAccount}
+            onRefresh={accounts.refresh}
+            refreshing={accounts.refreshing}
+            lastUpdated={accounts.lastUpdated}
           />
           <ApiConfig
             baseUrl={status.baseUrl}

web/src/components/AccountList.tsx

@@ -1,4 +1,4 @@
-import { useT } from "../i18n/context";
+import { useI18n, useT } from "../i18n/context";
 import { AccountCard } from "./AccountCard";
 import type { Account } from "../hooks/use-accounts";
 
@@ -6,18 +6,49 @@ interface AccountListProps {
   accounts: Account[];
   loading: boolean;
   onDelete: (id: string) => Promise<string | null>;
+  onRefresh: () => void;
+  refreshing: boolean;
+  lastUpdated: Date | null;
 }
 
-export function AccountList({ accounts, loading, onDelete }: AccountListProps) {
+export function AccountList({ accounts, loading, onDelete, onRefresh, refreshing, lastUpdated }: AccountListProps) {
   const t = useT();
+  const { lang } = useI18n();
+
+  const updatedAtText = lastUpdated
+    ? lastUpdated.toLocaleTimeString(lang === "zh" ? "zh-CN" : "en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" })
+    : null;
 
   return (
     <section class="flex flex-col gap-4">
-      <div class="flex items-end justify-between">
+      <div class="flex items-center justify-between">
         <div class="flex flex-col gap-1">
           <h2 class="text-[0.95rem] font-bold tracking-tight">{t("connectedAccounts")}</h2>
           <p class="text-slate-500 dark:text-text-dim text-[0.8rem]">{t("connectedAccountsDesc")}</p>
         </div>
+        <div class="flex items-center gap-2 shrink-0">
+          {updatedAtText && (
+            <span class="text-[0.75rem] text-slate-400 dark:text-text-dim hidden sm:inline">
+              {t("updatedAt")} {updatedAtText}
+            </span>
+          )}
+          <button
+            onClick={onRefresh}
+            disabled={refreshing}
+            title={t("refresh")}
+            class="p-1.5 text-slate-400 dark:text-text-dim hover:text-primary transition-colors rounded-md hover:bg-primary/10 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            <svg
+              class={`size-[18px] ${refreshing ? "animate-spin" : ""}`}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+            </svg>
+          </button>
+        </div>
       </div>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         {loading ? (

web/src/hooks/use-accounts.ts

@@ -24,19 +24,24 @@ export interface Account {
 export function useAccounts() {
   const [list, setList] = useState<Account[]>([]);
   const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const [addVisible, setAddVisible] = useState(false);
   const [addInfo, setAddInfo] = useState("");
   const [addError, setAddError] = useState("");
 
   const loadAccounts = useCallback(async () => {
+    setRefreshing(true);
     try {
       const resp = await fetch("/auth/accounts?quota=true");
       const data = await resp.json();
       setList(data.accounts || []);
-    } catch (err) {
+      setLastUpdated(new Date());
+    } catch {
       setList([]);
     } finally {
       setLoading(false);
+      setRefreshing(false);
     }
   }, []);
 
@@ -146,9 +151,12 @@ export function useAccounts() {
   return {
     list,
     loading,
+    refreshing,
+    lastUpdated,
     addVisible,
     addInfo,
     addError,
+    refresh: loadAccounts,
     startAdd,
     submitRelay,
     deleteAccount,

web/src/i18n/translations.ts

@@ -52,6 +52,8 @@ export const translations = {
     networkError: "Network error: ",
     copied: "Copied!",
     copyFailed: "Failed",
+    refresh: "Refresh",
+    updatedAt: "Updated at",
     footer: "\u00a9 2025 Codex Proxy. All rights reserved.",
   },
   zh: {
@@ -109,6 +111,8 @@ export const translations = {
     networkError: "\u7f51\u7edc\u9519\u8bef\uff1a",
     copied: "\u5df2\u590d\u5236\uff01",
     copyFailed: "\u5931\u8d25",
+    refresh: "\u5237\u65b0",
+    updatedAt: "\u66f4\u65b0\u4e8e",
     footer:
       "\u00a9 2025 Codex Proxy\u3002\u4fdd\u7559\u6240\u6709\u6743\u5229\u3002",
   },