feat: 图片任务进度追踪与超时续轮询

- 图片任务新增 progress/duration_ms/elapsed_secs/conversation_id 字段
- 新增 resume-poll API 支持超时任务继续等待
- 前端超时图片显示继续等待/忽略错误按钮
- 图片结果页 LazyImage 懒加载优化
- 优化大量图片场景滚动加载性能
- 会话切换滚动位置保存与恢复
- bfcache 页面恢复时重新同步任务状态
- 轮询连续错误容错(10次)

api/image_tasks.py

@@ -19,6 +19,10 @@ class ImageGenerationTaskRequest(BaseModel):
     quality: str = "auto"
 
 
+class ResumePollRequest(BaseModel):
+    extra_timeout_secs: float = Field(default=30.0, ge=5.0, le=120.0)
+
+
 def _parse_task_ids(value: str) -> list[str]:
     return [item.strip() for item in value.split(",") if item.strip()]
 
@@ -93,4 +97,22 @@ def create_router() -> APIRouter:
         except ValueError as exc:
             raise HTTPException(status_code=400, detail={"error": str(exc)}) from exc
 
+    @router.post("/api/image-tasks/{task_id}/resume-poll")
+    async def resume_image_poll(
+        task_id: str,
+        body: ResumePollRequest,
+        request: Request,
+        authorization: str | None = Header(default=None),
+    ):
+        identity = require_identity(authorization)
+        try:
+            return await run_in_threadpool(
+                image_task_service.resume_poll,
+                identity,
+                task_id,
+                body.extra_timeout_secs,
+            )
+        except ValueError as exc:
+            raise HTTPException(status_code=400, detail={"error": str(exc)}) from exc
+
     return router

services/image_task_service.py

@@ -72,12 +72,27 @@ def _public_task(task: dict[str, Any]) -> dict[str, Any]:
         "created_at": task.get("created_at"),
         "updated_at": task.get("updated_at"),
     }
+    if task.get("conversation_id"):
+        item["conversation_id"] = task.get("conversation_id")
     if task.get("data") is not None:
         item["data"] = task.get("data")
     if task.get("usage") is not None:
         item["usage"] = task.get("usage")
     if task.get("error"):
         item["error"] = task.get("error")
+    if task.get("progress"):
+        item["progress"] = task.get("progress")
+    if task.get("duration_ms") is not None:
+        item["duration_ms"] = task.get("duration_ms")
+    if task.get("status") in (TASK_STATUS_RUNNING, TASK_STATUS_QUEUED):
+        if task.get("status") == TASK_STATUS_RUNNING:
+            # RUNNING 状态仅在 started_ts 被设置后（image_stream_resolve_start）才计时
+            base_ts = task.get("started_ts")
+        else:
+            # QUEUED 状态从 created_ts 开始计时（排队等待中）
+            base_ts = task.get("created_ts") or task.get("updated_ts")
+        if base_ts:
+            item["elapsed_secs"] = round(time.time() - base_ts, 1)
     return item
 
 
@@ -206,6 +221,7 @@ class ImageTaskService:
                 "quality": _clean(payload.get("quality"), "auto"),
                 "created_at": now,
                 "updated_at": now,
+                "created_ts": time.time(),
             }
             self._tasks[key] = task
             self._save_locked()
@@ -231,9 +247,16 @@ class ImageTaskService:
     ) -> None:
         started = time.time()
         self._update_task(key, status=TASK_STATUS_RUNNING, error="")
+        # 创建进度回调，每个步骤完成后更新任务状态
+        def progress_callback(step: str) -> None:
+            if step == "image_stream_resolve_start":
+                self._update_task(key, started_ts=time.time())
+            self._update_task(key, progress=step)
+        # 将进度回调添加到 payload 中（handler 会提取并传递给 ConversationRequest）
+        payload_with_progress = {**payload, "progress_callback": progress_callback}
         try:
             handler = self.edit_handler if mode == "edit" else self.generation_handler
-            result = handler(payload)
+            result = handler(payload_with_progress)
             if not isinstance(result, dict):
                 raise RuntimeError("image task returned streaming result unexpectedly")
             data = result.get("data")
@@ -249,7 +272,8 @@ class ImageTaskService:
                     setattr(error, "account_email", account_email)
                 raise error
             usage = result.get("usage")
-            self._update_task(key, status=TASK_STATUS_SUCCESS, data=data, usage=usage, error="")
+            duration_ms = int((time.time() - started) * 1000)
+            self._update_task(key, status=TASK_STATUS_SUCCESS, data=data, usage=usage, error="", duration_ms=duration_ms)
             self._log_call(
                 identity,
                 mode,
@@ -263,7 +287,11 @@ class ImageTaskService:
         except Exception as exc:
             error_message = str(exc) or "image task failed"
             account_email = _clean(getattr(exc, "account_email", ""))
-            self._update_task(key, status=TASK_STATUS_ERROR, error=error_message, data=[])
+            conversation_id = _clean(getattr(exc, "conversation_id", ""))
+            duration_ms = int((time.time() - started) * 1000)
+            self._update_task(key, status=TASK_STATUS_ERROR, error=error_message, data=[],
+                              duration_ms=duration_ms,
+                              **({"conversation_id": conversation_id} if conversation_id else {}))
             self._log_call(
                 identity,
                 mode,
@@ -323,6 +351,7 @@ class ImageTaskService:
                 return
             task.update(updates)
             task["updated_at"] = _now_iso()
+            task["updated_ts"] = time.time()
             self._save_locked()
 
     def _load_locked(self) -> dict[str, dict[str, Any]]:
@@ -356,6 +385,10 @@ class ImageTaskService:
                 "quality": _clean(item.get("quality"), "auto"),
                 "created_at": _clean(item.get("created_at"), _now_iso()),
                 "updated_at": _clean(item.get("updated_at"), _clean(item.get("created_at"), _now_iso())),
+                "created_ts": item.get("created_ts"),
+                "updated_ts": item.get("updated_ts"),
+                "started_ts": item.get("started_ts"),
+                "duration_ms": item.get("duration_ms"),
             }
             data = item.get("data")
             if isinstance(data, list):
@@ -400,5 +433,112 @@ class ImageTaskService:
             self._tasks.pop(key, None)
         return bool(removed_keys)
 
+    def resume_poll(
+        self,
+        identity: dict[str, object],
+        task_id: str,
+        extra_timeout_secs: float = 30.0,
+    ) -> dict[str, Any]:
+        """恢复对已超时任务的轮询，额外等待 extra_timeout_secs 秒。"""
+        owner = _owner_id(identity)
+        key = _task_key(owner, _clean(task_id))
+        with self._lock:
+            task = self._tasks.get(key)
+            if task is None:
+                raise ValueError("task not found")
+            if task.get("status") != TASK_STATUS_ERROR:
+                raise ValueError("task is not in error state")
+            error_msg = _clean(task.get("error"))
+            if "超时" not in error_msg:
+                raise ValueError("task error is not a timeout error")
+            conversation_id = _clean(task.get("conversation_id"))
+            if not conversation_id:
+                raise ValueError("task has no conversation_id")
+            mode = task.get("mode", "generate")
+            model = task.get("model", "gpt-image-2")
+            # 将任务状态重置为 running
+            self._update_task(key, status=TASK_STATUS_RUNNING, error="")
+
+        # 启动新线程继续轮询
+        thread = threading.Thread(
+            target=self._run_resume_poll,
+            args=(key, conversation_id, extra_timeout_secs, dict(identity), mode, model),
+            name=f"image-resume-{_clean(task_id)[:16]}",
+            daemon=True,
+        )
+        thread.start()
+        return _public_task(task)
+
+    def _run_resume_poll(
+        self,
+        key: str,
+        conversation_id: str,
+        extra_timeout_secs: float,
+        identity: dict[str, object],
+        mode: str,
+        model: str,
+    ) -> None:
+        """后台线程：继续轮询已有 conversation_id 的图片结果。"""
+        started = time.time()
+        try:
+            from services.openai_backend_api import OpenAIBackendAPI
+            from services.protocol.conversation import format_image_result
+
+            backend = OpenAIBackendAPI(proxy_url=config.proxy_url or None)
+            file_ids, sediment_ids = backend._poll_image_results(
+                conversation_id,
+                extra_timeout_secs,
+            )
+            if not file_ids and not sediment_ids:
+                raise RuntimeError(
+                    f"继续等待 {extra_timeout_secs} 秒后仍未找到图片结果。"
+                )
+
+            image_urls = backend.resolve_conversation_image_urls(
+                conversation_id, file_ids, sediment_ids, poll=False,
+            )
+            if not image_urls:
+                raise RuntimeError("图片 URL 解析失败")
+
+            image_items = [
+                {"b64_json": __import__("base64").b64encode(image_data).decode("ascii")}
+                for image_data in backend.download_image_bytes(image_urls)
+            ]
+            # 获取 task 的原始 prompt（从 _public_task 的 mode 判断）
+            with self._lock:
+                task = self._tasks.get(key)
+                quality = _clean(task.get("quality"), "auto") if task else "auto"
+                size = _clean(task.get("size")) if task else None
+            data = format_image_result(
+                image_items,
+                "",  # prompt 已不重要，结果已经拿到了
+                "b64_json",
+                "",
+                int(time.time()),
+            )["data"]
+            self._update_task(key, status=TASK_STATUS_SUCCESS, data=data, error="", duration_ms=int((time.time() - started) * 1000))
+            self._log_call(
+                identity,
+                mode,
+                model,
+                started,
+                "调用完成（续轮询）",
+                status="success",
+                urls=_collect_image_urls(data),
+            )
+        except Exception as exc:
+            error_message = str(exc) or "resume poll failed"
+            duration_ms = int((time.time() - started) * 1000)
+            self._update_task(key, status=TASK_STATUS_ERROR, error=error_message, data=[], duration_ms=duration_ms)
+            self._log_call(
+                identity,
+                mode,
+                model,
+                started,
+                "调用失败（续轮询）",
+                status="failed",
+                error=error_message,
+            )
+
 
 image_task_service = ImageTaskService(DATA_DIR / "image_tasks.json")

web/src/app/image/components/image-results.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState } from "react";
-import { Clock3, Download, LoaderCircle, RotateCcw, Sparkles, Trash2 } from "lucide-react";
+import { memo, useEffect, useRef, useState } from "react";
+import { Clock3, Download, EyeOff, LoaderCircle, RotateCcw, Sparkles, Trash2 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -23,12 +23,26 @@ type ImageResultsProps = {
   onReuseTurnConfig: (conversationId: string, turnId: string) => void | Promise<void>;
   onRegenerateTurn: (conversationId: string, turnId: string) => void | Promise<void>;
   onRetryImage: (conversationId: string, turnId: string, imageId: string) => void | Promise<void>;
+  onTimeoutRetryContinue: (taskId: string) => void | Promise<void>;
+  onDismissErrors: (conversationId: string, turnId: string) => void | Promise<void>;
   formatConversationTime: (value: string) => string;
 };
 
+// Blob URL 缓存：避免 base64 超长字符串在 DOM 中，改用短小的 blob: URL
+const b64BlobUrlCache = new Map<string, string>();
+
 function getStoredImageSrc(image: StoredImage) {
   if (image.b64_json) {
-    return `data:image/png;base64,${image.b64_json}`;
+    let url = b64BlobUrlCache.get(image.b64_json);
+    if (!url) {
+      const binary = atob(image.b64_json);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+      const blob = new Blob([bytes], { type: "image/png" });
+      url = URL.createObjectURL(blob);
+      b64BlobUrlCache.set(image.b64_json, url);
+    }
+    return url;
   }
   return image.url || "";
 }
@@ -79,18 +93,31 @@ export function ImageResults({
   onReuseTurnConfig,
   onRegenerateTurn,
   onRetryImage,
+  onTimeoutRetryContinue,
+  onDismissErrors,
   formatConversationTime,
 }: ImageResultsProps) {
-  const [imageDimensions, setImageDimensions] = useState<Record<string, string>>({});
+  const imageDimensionsRef = useRef<Record<string, string>>({});
+  const [currentTime, setCurrentTime] = useState(Date.now());
+  
+  // 仅在存在 loading 图片时启动定时器，避免空闲时无谓重渲染
+  const hasLoadingImages = selectedConversation?.turns.some(
+    (turn) => !turn.resultsDeleted && turn.images.some((image) => image.status === "loading"),
+  );
+  useEffect(() => {
+    if (!hasLoadingImages) return;
+    const timer = setInterval(() => {
+      setCurrentTime(Date.now());
+    }, 500);
+    return () => clearInterval(timer);
+  }, [hasLoadingImages]);
 
   const updateImageDimensions = (id: string, width: number, height: number) => {
     const dimensions = formatImageDimensions(width, height);
-    setImageDimensions((current) => {
-      if (current[id] === dimensions) {
-        return current;
-      }
-      return { ...current, [id]: dimensions };
-    });
+    // 使用 ref 存储，不触发 React 重渲染，消除级联重渲染
+    if (imageDimensionsRef.current[id] !== dimensions) {
+      imageDimensionsRef.current[id] = dimensions;
+    }
   };
 
   if (!selectedConversation) {
@@ -133,7 +160,7 @@ export function ImageResults({
                   id: image.id,
                   src,
                   sizeLabel: image.b64_json ? formatBase64ImageSize(image.b64_json) : undefined,
-                  dimensions: imageDimensions[image.id],
+                  dimensions: imageDimensionsRef.current[image.id],
                 },
               ]
             : [];
@@ -224,7 +251,7 @@ export function ImageResults({
                       if (image.status === "success" && imageSrc) {
                         const currentIndex = successfulTurnImages.findIndex((item) => item.id === image.id);
                         const sizeLabel = image.b64_json ? formatBase64ImageSize(image.b64_json) : "";
-                        const dimensions = imageDimensions[image.id];
+                        const dimensions = imageDimensionsRef.current[image.id];
                         const imageMeta = [sizeLabel, dimensions].filter(Boolean).join(" · ");
 
                         return (
@@ -232,28 +259,24 @@ export function ImageResults({
                             key={image.id}
                             className="break-inside-avoid"
                           >
-                            <button
-                              type="button"
-                              onClick={() => onOpenLightbox(successfulTurnImages, currentIndex)}
+                            <LazyImage
+                              src={imageSrc}
+                              alt={`Generated result ${index + 1}`}
                               className="group block aspect-square w-full cursor-zoom-in overflow-hidden rounded-xl sm:aspect-auto"
-                            >
-                              <img
-                                src={imageSrc}
-                                alt={`Generated result ${index + 1}`}
-                                className="block h-full w-full object-cover transition duration-200 group-hover:brightness-90 sm:h-auto sm:object-contain"
-                                onLoad={(event) => {
-                                  updateImageDimensions(
-                                    image.id,
-                                    event.currentTarget.naturalWidth,
-                                    event.currentTarget.naturalHeight,
-                                  );
-                                }}
-                              />
-                            </button>
+                              onLoad={(event) => {
+                                updateImageDimensions(
+                                  image.id,
+                                  event.currentTarget.naturalWidth,
+                                  event.currentTarget.naturalHeight,
+                                );
+                              }}
+                              onOpen={() => onOpenLightbox(successfulTurnImages, currentIndex)}
+                            />
                             <div className="flex flex-col gap-1 px-0.5 py-1 text-[10px] sm:flex-row sm:items-center sm:justify-between sm:gap-2 sm:px-3 sm:py-3 sm:text-xs">
                               <div className="min-w-0 text-stone-500">
                                 <span>结果 {index + 1}</span>
-                                {imageMeta ? <span className="block text-stone-400 sm:ml-2 sm:inline">{imageMeta}</span> : null}
+                                {image.durationMs != null ? <span className="text-stone-400 sm:ml-2">{formatDuration(image.durationMs)}</span> : null}
+                                {imageMeta ? <span className="block text-stone-400">{imageMeta}</span> : null}
                               </div>
                               <div className="flex items-center gap-1.5">
                                 <Button
@@ -283,63 +306,111 @@ export function ImageResults({
                       }
 
                       if (image.status === "error") {
+                        const isTimeoutError = image.error?.includes("超时") && image.taskId;
                         return (
-                          <div
-                            key={image.id}
-                            className={cn(
-                              "break-inside-avoid overflow-hidden rounded-xl border border-rose-200 bg-rose-50 sm:rounded-none",
-                              "aspect-square",
-                              turn.ratio === "1:1" && "sm:aspect-square",
-                              turn.ratio === "16:9" && "sm:aspect-video",
-                              turn.ratio === "9:16" && "sm:aspect-[9/16]",
-                              turn.ratio === "4:3" && "sm:aspect-[4/3]",
-                              turn.ratio === "3:4" && "sm:aspect-[3/4]",
-                            )}
-                          >
+                          <div key={image.id} className="break-inside-avoid">
+                            <div
+                              className={cn(
+                                "overflow-hidden rounded-xl border border-rose-200 bg-rose-50",
+                                "aspect-square",
+                                turn.ratio === "1:1" && "sm:aspect-square",
+                                turn.ratio === "16:9" && "sm:aspect-video",
+                                turn.ratio === "9:16" && "sm:aspect-[9/16]",
+                                turn.ratio === "4:3" && "sm:aspect-[4/3]",
+                                turn.ratio === "3:4" && "sm:aspect-[3/4]",
+                              )}
+                            >
                             <div className="flex h-full min-h-16 flex-col items-center justify-center gap-1.5 px-2 py-2 text-center text-[11px] leading-4 text-rose-600 sm:gap-3 sm:px-6 sm:py-8 sm:text-sm sm:leading-6">
+                              <p className="font-medium">图片 {index + 1}/{turn.images.length}</p>
                               <span className="line-clamp-2 sm:line-clamp-none">{image.error || "生成失败"}</span>
-                              <button
-                                type="button"
-                                onClick={() => void onRetryImage(selectedConversation.id, turn.id, image.id)}
-                                className="rounded-full bg-white px-2 py-1 text-[10px] font-medium text-rose-600 shadow-sm transition hover:bg-rose-100 sm:px-3 sm:text-xs"
-                              >
-                                重新生成这一张
-                              </button>
+                              <div className="flex items-center gap-2">
+                                {isTimeoutError && (
+                                  <button
+                                    type="button"
+                                    onClick={() => void onTimeoutRetryContinue(image.taskId!)}
+                                    className="rounded-full bg-emerald-100 px-2 py-1 text-[10px] font-medium text-emerald-600 shadow-sm transition hover:bg-emerald-200 sm:px-3 sm:text-xs"
+                                  >
+                                    继续等待
+                                  </button>
+                                )}
+                                <button
+                                  type="button"
+                                  onClick={() => void onRetryImage(selectedConversation.id, turn.id, image.id)}
+                                  className="rounded-full bg-white px-2 py-1 text-[10px] font-medium text-rose-600 shadow-sm transition hover:bg-rose-100 sm:px-3 sm:text-xs"
+                                >
+                                  重新生成这一张
+                                </button>
+                              </div>
+                            </div>
+                            </div>
+                            <div className="flex flex-col gap-1 px-0.5 py-1 text-[10px] sm:flex-row sm:items-center sm:justify-between sm:gap-2 sm:px-3 sm:py-3 sm:text-xs">
+                              <div className="min-w-0 text-stone-500">
+                                <span>结果 {index + 1}</span>
+                                {image.durationMs != null ? <span className="text-stone-400 sm:ml-2">{formatDuration(image.durationMs)}</span> : null}
+                                <span className="block text-transparent">-</span>
+                              </div>
                             </div>
                           </div>
                         );
                       }
 
+                      const imageTaskStatus = image.taskStatus || (turn.status === "queued" ? "queued" : "running");
+                      const imageStatusLabel = imageTaskStatus === "queued" ? "排队中" : getProgressLabel(image.progress);
+                      const showElapsed = imageTaskStatus === "running" && image.elapsedSecs != null;
+                      const elapsedDisplay = showElapsed
+                        ? formatElapsed(
+                            image.elapsedUpdatedAt != null
+                              ? image.elapsedSecs! + (currentTime - image.elapsedUpdatedAt!) / 1000
+                              : image.elapsedSecs!,
+                          )
+                        : null;
                       return (
-                        <div
-                          key={image.id}
-                          className={cn(
-                            "break-inside-avoid overflow-hidden rounded-xl border border-stone-200/80 bg-stone-100/80 sm:rounded-none",
-                            turn.ratio === "1:1" && "aspect-square",
-                            turn.ratio === "16:9" && "aspect-video",
-                            turn.ratio === "9:16" && "aspect-[9/16]",
-                            turn.ratio === "4:3" && "aspect-[4/3]",
-                            turn.ratio === "3:4" && "aspect-[3/4]",
-                          )}
-                        >
+                        <div key={image.id} className="break-inside-avoid">
+                          <div
+                            className={cn(
+                              "overflow-hidden rounded-xl border border-stone-200/80 bg-stone-100/80 relative",
+                              turn.ratio === "1:1" && "aspect-square",
+                              turn.ratio === "16:9" && "aspect-video",
+                              turn.ratio === "9:16" && "aspect-[9/16]",
+                              turn.ratio === "4:3" && "aspect-[4/3]",
+                              turn.ratio === "3:4" && "aspect-[3/4]",
+                            )}
+                          >
                           <div className="flex h-full flex-col items-center justify-center gap-1.5 px-2 py-3 text-center text-stone-500 sm:gap-3 sm:px-6 sm:py-8">
                             <div className="rounded-full bg-white p-2 shadow-sm sm:p-3">
-                              {turn.status === "queued" ? (
+                              {imageTaskStatus === "queued" ? (
                                 <Clock3 className="size-4 sm:size-5" />
                               ) : (
                                 <LoaderCircle className="size-4 animate-spin sm:size-5" />
                               )}
                             </div>
-                            <p className="text-[10px] leading-4 sm:text-sm">{turn.status === "queued" ? "排队中" : "处理中"}</p>
+                            <p className="text-[11px] font-medium leading-4 sm:text-sm">
+                              图片 {index + 1}/{turn.images.length}
+                            </p>
+                            <p className="text-[10px] leading-4 text-stone-400 sm:text-xs">
+                              {imageStatusLabel}
+                            </p>
+                          </div>
                           </div>
+                          {elapsedDisplay != null && (
+                            <div className="px-0.5 py-1 text-[10px] text-stone-400 sm:px-3 sm:py-3 sm:text-xs">{elapsedDisplay}</div>
+                          )}
                         </div>
                       );
                     })}
                   </div>
 
                   {turn.status === "error" && turn.error ? (
-                    <div className="mt-4 border-l-2 border-amber-300 bg-amber-50/70 px-4 py-3 text-sm leading-6 text-amber-700">
-                      {turn.error}
+                    <div className="mt-4 flex items-center justify-between border-l-2 border-amber-300 bg-amber-50/70 px-4 py-3 text-sm leading-6 text-amber-700">
+                      <span>{turn.error}</span>
+                      <button
+                        type="button"
+                        onClick={() => void onDismissErrors(selectedConversation.id, turn.id)}
+                        className="ml-3 inline-flex shrink-0 items-center gap-1 rounded-full bg-amber-100 px-2.5 py-1 text-[11px] font-medium text-amber-700 transition hover:bg-amber-200 hover:text-amber-900"
+                      >
+                        <EyeOff className="size-3" />
+                        忽略错误
+                      </button>
                     </div>
                   ) : null}
 
@@ -384,20 +455,100 @@ function getTurnStatusLabel(status: ImageTurnStatus) {
   return "失败";
 }
 
+const PROGRESS_LABELS: Record<string, string> = {
+  getting_account: "确认可用账号",
+  uploading: "上传图片",
+  bootstrapping: "预热首页",
+  getting_token: "获取 token",
+  preparing_conversation: "准备会话",
+  starting_generation: "启动生成",
+  generating: "生成中",
+  receiving_image: "接收图片中",
+};
+
+function getProgressLabel(progress?: string) {
+  if (!progress) {
+    return "生成中";
+  }
+  return PROGRESS_LABELS[progress] || "生成中";
+}
+
+function formatElapsed(seconds: number): string {
+  return `${seconds.toFixed(1)}s`;
+}
+
+function formatDuration(ms: number): string {
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+const base64SizeCache = new Map<string, string>();
 function formatBase64ImageSize(base64: string) {
+  let cached = base64SizeCache.get(base64);
+  if (cached !== undefined) return cached;
   const normalized = base64.replace(/\s/g, "");
   const padding = normalized.endsWith("==") ? 2 : normalized.endsWith("=") ? 1 : 0;
   const bytes = Math.max(0, Math.floor((normalized.length * 3) / 4) - padding);
 
   if (bytes >= 1024 * 1024) {
-    return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
-  }
-  if (bytes >= 1024) {
-    return `${(bytes / 1024).toFixed(1)} KB`;
+    cached = `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+  } else if (bytes >= 1024) {
+    cached = `${(bytes / 1024).toFixed(1)} KB`;
+  } else {
+    cached = `${bytes} B`;
   }
-  return `${bytes} B`;
+  base64SizeCache.set(base64, cached);
+  return cached;
 }
 
 function formatImageDimensions(width: number, height: number) {
   return `${width} x ${height}`;
 }
+
+const LazyImage = memo(function LazyImage({ src, alt, className, onLoad, onOpen }: {
+  src: string;
+  alt: string;
+  className: string;
+  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onOpen?: () => void;
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const imgRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = imgRef.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "400px" },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={imgRef} className="relative">
+      {isVisible ? (
+        <button
+          type="button"
+          onClick={onOpen}
+          className={className}
+        >
+          <img
+            src={src}
+            alt={alt}
+            className="block h-full w-full object-cover transition duration-200 group-hover:brightness-90 sm:h-auto sm:object-contain"
+            onLoad={onLoad}
+          />
+        </button>
+      ) : (
+        <div className={`animate-pulse rounded-xl bg-stone-100 min-h-[200px] sm:min-h-[280px] ${className}`} />
+      )}
+    </div>
+  );
+});

web/src/app/image/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { ArrowDown, History, LoaderCircle, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
@@ -23,12 +23,14 @@ import {
   fetchAccounts,
   fetchModels,
   fetchImageTasks,
+  resumeImagePoll,
   type Account,
   type ImageModel,
   type Model,
   type ImageTask,
 } from "@/lib/api";
 import { useAuthGuard } from "@/lib/use-auth-guard";
+import { useSettingsStore } from "@/app/settings/store";
 import {
   clearImageConversations,
   deleteImageConversation,
@@ -51,8 +53,32 @@ const IMAGE_TIER_STORAGE_KEY = "chatgpt2api:image_last_tier";
 const IMAGE_QUALITY_STORAGE_KEY = "chatgpt2api:image_last_quality";
 const IMAGE_MODEL_STORAGE_KEY = "chatgpt2api:image_last_model";
 const IMAGE_COUNT_STORAGE_KEY = "chatgpt2api:image_last_count";
+const SCROLL_POSITIONS_STORAGE_KEY = "chatgpt2api:image_scroll_positions";
 const SCROLL_TO_LATEST_THRESHOLD = 160;
 
+function loadScrollPositions(): Map<string, number> {
+  if (typeof window === "undefined") return new Map();
+  try {
+    const raw = window.sessionStorage.getItem(SCROLL_POSITIONS_STORAGE_KEY);
+    if (!raw) return new Map();
+    const parsed = JSON.parse(raw) as Record<string, number>;
+    return new Map(Object.entries(parsed));
+  } catch {
+    return new Map();
+  }
+}
+
+function saveScrollPositions(positions: Map<string, number>) {
+  if (typeof window === "undefined") return;
+  try {
+    const obj: Record<string, number> = {};
+    positions.forEach((value, key) => { obj[key] = value; });
+    window.sessionStorage.setItem(SCROLL_POSITIONS_STORAGE_KEY, JSON.stringify(obj));
+  } catch {
+    // sessionStorage may be full or unavailable
+  }
+}
+
 function clampImageCount(value: string) {
   return String(Math.min(100, Math.max(1, Math.floor(Number(value) || 1))));
 }
@@ -62,6 +88,7 @@ function parseImageSize(size: string) {
 }
 
 const activeConversationQueueIds = new Set<string>();
+let pollAbortController: AbortController | null = null;
 
 function getResultsDistanceFromBottom(element: HTMLElement) {
   return element.scrollHeight - element.scrollTop - element.clientHeight;
@@ -186,6 +213,8 @@ function taskDataToStoredImage(image: StoredImage, task: ImageTask): StoredImage
         ...image,
         taskId: task.id,
         status: "error",
+        taskStatus: undefined,
+        progress: undefined,
         error: "未返回图片数据",
       };
     }
@@ -193,10 +222,13 @@ function taskDataToStoredImage(image: StoredImage, task: ImageTask): StoredImage
       ...image,
       taskId: task.id,
       status: "success",
+      taskStatus: undefined,
+      progress: undefined,
       b64_json: first.b64_json,
       url: first.url,
       revised_prompt: first.revised_prompt,
       error: undefined,
+      durationMs: task.duration_ms,
     };
   }
 
@@ -205,15 +237,32 @@ function taskDataToStoredImage(image: StoredImage, task: ImageTask): StoredImage
       ...image,
       taskId: task.id,
       status: "error",
+      taskStatus: undefined,
+      progress: undefined,
       error: task.error || "生成失败",
+      durationMs: task.duration_ms,
     };
   }
 
+  const newTaskStatus = task.status === "queued" ? "queued" : task.status === "running" ? "running" : image.taskStatus;
+  const shouldSetStartTime = newTaskStatus === "running" && !image.startTime;
+  const startTime = shouldSetStartTime ? Date.now() : image.startTime;
+  // elapsedSecs 仅使用后端返回的值，确保计时从 image_stream_resolve_start 开始
+  const elapsedSecs =
+    newTaskStatus === "running" && typeof task.elapsed_secs === "number"
+      ? task.elapsed_secs
+      : undefined;
+
   return {
     ...image,
     taskId: task.id,
     status: "loading",
+    taskStatus: newTaskStatus,
+    progress: task.progress || image.progress,
     error: undefined,
+    startTime,
+    elapsedSecs,
+    elapsedUpdatedAt: elapsedSecs != null ? Date.now() : undefined,
   };
 }
 
@@ -237,6 +286,11 @@ function deriveTurnStatus(turn: ImageTurn): Pick<ImageTurn, "status" | "error">
   const failedCount = turn.images.filter((image) => image.status === "error").length;
   const successCount = turn.images.filter((image) => image.status === "success").length;
   if (loadingCount > 0) {
+    // 如果任何图片的 taskStatus 为 running，则状态为 generating
+    const hasRunning = turn.images.some((image) => image.taskStatus === "running");
+    if (hasRunning) {
+      return { status: "generating", error: undefined };
+    }
     return { status: turn.status === "queued" ? "queued" : "generating", error: undefined };
   }
   if (failedCount > 0) {
@@ -245,7 +299,8 @@ function deriveTurnStatus(turn: ImageTurn): Pick<ImageTurn, "status" | "error">
   if (successCount > 0) {
     return { status: "success", error: undefined };
   }
-  return { status: "queued", error: undefined };
+  // 所有图片都被忽略（images 为空），视为完成
+  return { status: "success", error: undefined };
 }
 
 async function syncConversationImageTasks(items: ImageConversation[]) {
@@ -255,7 +310,11 @@ async function syncConversationImageTasks(items: ImageConversation[]) {
         conversation.turns.flatMap((turn) =>
           turn.resultsDeleted
             ? []
-            : turn.images.flatMap((image) => (image.status === "loading" && image.taskId ? [image.taskId] : [])),
+            : turn.images.flatMap((image) =>
+                (image.status === "loading" || (image.status === "error" && image.taskId))
+                  ? [image.taskId!]
+                  : [],
+              ),
         ),
       ),
     ),
@@ -276,7 +335,10 @@ async function syncConversationImageTasks(items: ImageConversation[]) {
     const turns = conversation.turns.map((turn) => {
       let turnChanged = false;
       const images = turn.images.map((image) => {
-        if (image.status !== "loading" || !image.taskId) {
+        if (!image.taskId) {
+          return image;
+        }
+        if (image.status !== "loading" && image.status !== "error") {
           return image;
         }
         const task = taskMap.get(image.taskId);
@@ -320,7 +382,7 @@ async function recoverConversationHistory(items: ImageConversation[]) {
   let changed = false;
   const normalized = items.map((conversation) => {
     const turns = conversation.turns.map((turn) => {
-      if (turn.status !== "queued" && turn.status !== "generating") {
+      if (turn.status !== "queued" && turn.status !== "generating" && turn.status !== "error") {
         return turn;
       }
 
@@ -370,12 +432,20 @@ async function recoverConversationHistory(items: ImageConversation[]) {
 function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
   const didLoadQuotaRef = useRef(false);
   const conversationsRef = useRef<ImageConversation[]>([]);
+  const loadCancelledRef = useRef(false);
   const resultsViewportRef = useRef<HTMLDivElement>(null);
   const lastConversationIdRef = useRef<string | null>(null);
   const shouldStickToBottomRef = useRef(true);
   const scrollRafRef = useRef<number | null>(null);
+  const scrollSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const scrollPositionsRef = useRef<Map<string, number>>(loadScrollPositions());
+  const isRestoringScrollRef = useRef(false);
+  const scrollRestoreGenerationRef = useRef(0);
+
+  const config = useSettingsStore((state) => state.config);
+  const imageTimeoutRetrySecs = Number(config?.image_timeout_retry_secs || 30);
 
   const [imagePrompt, setImagePrompt] = useState("");
   const [imageCount, setImageCount] = useState("3");
@@ -396,7 +466,7 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
   const [lightboxImages, setLightboxImages] = useState<ImageLightboxItem[]>([]);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
-  const [showScrollToLatest, setShowScrollToLatest] = useState(false);
+  const scrollToLatestBtnRef = useRef<HTMLButtonElement>(null);
   const [deleteConfirm, setDeleteConfirm] = useState<
     | { type: "one"; id: string }
     | { type: "prompt"; conversationId: string; turnId: string }
@@ -404,6 +474,11 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
     | { type: "all" }
     | null
   >(null);
+  const [timeoutRetry, setTimeoutRetry] = useState<{
+    conversationId: string;
+    taskId: string;
+    taskError: string;
+  } | null>(null);
 
   const parsedCount = useMemo(() => Number(clampImageCount(imageCount)), [imageCount]);
   const selectedConversation = useMemo(
@@ -450,7 +525,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
     }
 
     shouldStickToBottomRef.current = true;
-    setShowScrollToLatest(false);
+    const btn = scrollToLatestBtnRef.current;
+    if (btn) btn.style.display = "none";
     element.scrollTo({
       top: element.scrollHeight,
       behavior,
@@ -469,9 +545,33 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
         return;
       }
 
+      // 恢复滚动位置期间不处理滚动事件
+      if (isRestoringScrollRef.current) {
+        return;
+      }
+
+      // 保存当前会话的滚动位置（debounce 300ms 写入 sessionStorage）
+      const convId = lastConversationIdRef.current;
+      if (convId) {
+        scrollPositionsRef.current.set(convId, element.scrollTop);
+        if (scrollSaveTimerRef.current) clearTimeout(scrollSaveTimerRef.current);
+        scrollSaveTimerRef.current = setTimeout(() => {
+          scrollSaveTimerRef.current = null;
+          saveScrollPositions(scrollPositionsRef.current);
+        }, 300);
+      }
+
       const isAwayFromLatest = getResultsDistanceFromBottom(element) > SCROLL_TO_LATEST_THRESHOLD;
       shouldStickToBottomRef.current = !isAwayFromLatest;
-      setShowScrollToLatest(isAwayFromLatest);
+      // 直接操作 DOM 控制按钮显隐，避免 setState 触发全组件重渲染
+      const btn = scrollToLatestBtnRef.current;
+      if (btn) {
+        if (isAwayFromLatest) {
+          btn.style.display = "";
+        } else {
+          btn.style.display = "none";
+        }
+      }
     });
   }, []);
 
@@ -480,55 +580,95 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
       if (scrollRafRef.current !== null) {
         window.cancelAnimationFrame(scrollRafRef.current);
       }
+      if (scrollSaveTimerRef.current !== null) {
+        clearTimeout(scrollSaveTimerRef.current);
+        saveScrollPositions(scrollPositionsRef.current);
+      }
     };
   }, []);
 
-  useEffect(() => {
-    let cancelled = false;
+  const loadHistory = useCallback(async () => {
+    try {
+      const storedRatio =
+        typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_RATIO_STORAGE_KEY) : null;
+      const storedTier =
+        typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_TIER_STORAGE_KEY) : null;
+      const storedQuality =
+        typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_QUALITY_STORAGE_KEY) : null;
+      const storedCount =
+        typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_COUNT_STORAGE_KEY) : null;
+      setImageRatio(storedRatio || "1:1");
+      setImageTier(storedTier || "1k");
+      setImageWidth("1024");
+      setImageHeight("1024");
+      setImageQuality(storedQuality || "auto");
+      setImageCount(storedCount ? clampImageCount(storedCount) : "1");
 
-    const loadHistory = async () => {
-      try {
-        const storedRatio = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_RATIO_STORAGE_KEY) : null;
-        const storedTier = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_TIER_STORAGE_KEY) : null;
-        const storedQuality = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_QUALITY_STORAGE_KEY) : null;
-        const storedCount = typeof window !== "undefined" ? window.localStorage.getItem(IMAGE_COUNT_STORAGE_KEY) : null;
-        setImageRatio(storedRatio || "1:1");
-        setImageTier(storedTier || "1k");
-        setImageWidth("1024");
-        setImageHeight("1024");
-        setImageQuality(storedQuality || "auto");
-        setImageCount(storedCount ? clampImageCount(storedCount) : "1");
-
-        const items = await listImageConversations();
-        const normalizedItems = await recoverConversationHistory(items);
-        if (cancelled) {
-          return;
-        }
+      const items = await listImageConversations();
+      const normalizedItems = await recoverConversationHistory(items);
+      if (loadCancelledRef.current) {
+        return;
+      }
 
-        conversationsRef.current = normalizedItems;
-        setConversations(normalizedItems);
-        const storedConversationId =
-          typeof window !== "undefined" ? window.localStorage.getItem(ACTIVE_CONVERSATION_STORAGE_KEY) : null;
-        const nextSelectedConversationId =
-          (storedConversationId && normalizedItems.some((conversation) => conversation.id === storedConversationId)
-            ? storedConversationId
-            : null) ?? pickFallbackConversationId(normalizedItems);
-        setSelectedConversationId(nextSelectedConversationId);
-      } catch (error) {
-        const message = error instanceof Error ? error.message : "读取会话记录失败";
-        toast.error(message);
-      } finally {
-        if (!cancelled) {
-          setIsLoadingHistory(false);
-        }
+      conversationsRef.current = normalizedItems;
+      setConversations(normalizedItems);
+      const storedConversationId =
+        typeof window !== "undefined" ? window.localStorage.getItem(ACTIVE_CONVERSATION_STORAGE_KEY) : null;
+      const nextSelectedConversationId =
+        (storedConversationId && normalizedItems.some((conversation) => conversation.id === storedConversationId)
+          ? storedConversationId
+          : null) ?? pickFallbackConversationId(normalizedItems);
+      setSelectedConversationId(nextSelectedConversationId);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "读取会话记录失败";
+      toast.error(message);
+    } finally {
+      if (!loadCancelledRef.current) {
+        setIsLoadingHistory(false);
+      }
+    }
+  }, [
+    setImageRatio,
+    setImageTier,
+    setImageWidth,
+    setImageHeight,
+    setImageQuality,
+    setImageCount,
+    setConversations,
+    setSelectedConversationId,
+    setIsLoadingHistory,
+  ]);
+
+  // Handle bfcache (back/forward cache) — re-sync task status on page restore
+  useEffect(() => {
+    const handlePageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) {
+        void loadHistory();
       }
     };
+    window.addEventListener("pageshow", handlePageShow);
+    return () => window.removeEventListener("pageshow", handlePageShow);
+  }, [loadHistory]);
 
+  useEffect(() => {
+    loadCancelledRef.current = false;
     void loadHistory();
     return () => {
-      cancelled = true;
+      loadCancelledRef.current = true;
+      // 组件卸载时保存当前滚动位置到 sessionStorage
+      const element = resultsViewportRef.current;
+      const convId = lastConversationIdRef.current;
+      if (element && convId) {
+        scrollPositionsRef.current.set(convId, element.scrollTop);
+        saveScrollPositions(scrollPositionsRef.current);
+      }
+      activeConversationQueueIds.clear();
+      if (pollAbortController) {
+        pollAbortController.abort();
+        pollAbortController = null;
+      }
     };
-  }, []);
+  }, [loadHistory]);
 
   useEffect(() => {
     let cancelled = false;
@@ -591,11 +731,13 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
     };
   }, [isAdmin, loadQuota]);
 
-  useEffect(() => {
+  // 切换会话时保存旧会话滚动位置，并隐藏容器防止闪烁
+  useLayoutEffect(() => {
     if (!selectedConversation) {
       lastConversationIdRef.current = null;
       shouldStickToBottomRef.current = true;
-      setShowScrollToLatest(false);
+      const btn = scrollToLatestBtnRef.current;
+      if (btn) btn.style.display = "none";
       return;
     }
 
@@ -605,13 +747,69 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
     }
 
     const didSwitchConversation = lastConversationIdRef.current !== selectedConversation.id;
-    lastConversationIdRef.current = selectedConversation.id;
 
     if (didSwitchConversation) {
-      requestAnimationFrame(() => scrollResultsToLatest("auto"));
+      // 递增 generation，使之前未完成的 rAF 回调失效
+      scrollRestoreGenerationRef.current += 1;
+
+      // 先保存旧会话的滚动位置（lastConversationIdRef 还是旧值）
+      const oldConvId = lastConversationIdRef.current;
+      if (oldConvId) {
+        scrollPositionsRef.current.set(oldConvId, element.scrollTop);
+        saveScrollPositions(scrollPositionsRef.current);
+      }
+      // 更新为新会话 ID
+      lastConversationIdRef.current = selectedConversation.id;
+
+      // 如果有保存的滚动位置，隐藏容器防止用户看到 scrollTop=0 的内容
+      const savedScrollTop = scrollPositionsRef.current.get(selectedConversation.id);
+      if (savedScrollTop != null && savedScrollTop > 0) {
+        element.style.visibility = "hidden";
+        isRestoringScrollRef.current = true;
+      }
+    }
+  }, [selectedConversation?.id]);
+
+  // 恢复滚动位置或跟随最新内容
+  useEffect(() => {
+    if (!selectedConversation) {
+      return;
+    }
+
+    const element = resultsViewportRef.current;
+    if (!element) {
+      return;
+    }
+
+    const savedScrollTop = scrollPositionsRef.current.get(selectedConversation.id);
+
+    if (savedScrollTop != null && savedScrollTop > 0) {
+      // 捕获当前 generation，用于检测是否已被新的切换取代
+      const generation = scrollRestoreGenerationRef.current;
+      // 容器已在 useLayoutEffect 中设为 visibility:hidden，用户看不到滚动过程
+      requestAnimationFrame(() => {
+        // 如果 generation 已变，说明用户又切换了，放弃本次恢复
+        if (scrollRestoreGenerationRef.current !== generation) return;
+        element.scrollTop = savedScrollTop;
+        // 再等一帧确保 scrollTop 生效后再显示容器
+        requestAnimationFrame(() => {
+          // 再次检查 generation
+          if (scrollRestoreGenerationRef.current !== generation) return;
+          const isAwayFromLatest = getResultsDistanceFromBottom(element) > SCROLL_TO_LATEST_THRESHOLD;
+          shouldStickToBottomRef.current = !isAwayFromLatest;
+          const btn = scrollToLatestBtnRef.current;
+          if (btn) btn.style.display = isAwayFromLatest ? "" : "none";
+          // 显示容器 — 用户直接看到正确位置的内容
+          element.style.visibility = "";
+          isRestoringScrollRef.current = false;
+        });
+      });
+      // 恢复后清除保存的位置，下次内容更新时走正常的 shouldFollowLatest 逻辑
+      scrollPositionsRef.current.delete(selectedConversation.id);
       return;
     }
 
+    // 无保存位置，按正常逻辑处理
     const shouldFollowLatest =
       shouldStickToBottomRef.current ||
       getResultsDistanceFromBottom(element) <= SCROLL_TO_LATEST_THRESHOLD;
@@ -621,7 +819,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
       return;
     }
 
-    setShowScrollToLatest(true);
+    const btn = scrollToLatestBtnRef.current;
+    if (btn) btn.style.display = "";
   }, [selectedConversation?.id, selectedConversation?.updatedAt, selectedConversation?.turns.length, scrollResultsToLatest]);
 
   useEffect(() => {
@@ -705,7 +904,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
 
   const handleCreateDraft = () => {
     shouldStickToBottomRef.current = true;
-    setShowScrollToLatest(false);
+    const btn = scrollToLatestBtnRef.current;
+    if (btn) btn.style.display = "none";
     setSelectedConversationId(null);
     resetComposer();
     textareaRef.current?.focus();
@@ -988,7 +1188,7 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
               const task = taskMap.get(taskId);
               return task ? taskDataToStoredImage({ ...image, taskId }, task) : image;
             });
-            const derived = deriveTurnStatus({ ...turn, status: "generating", images });
+            const derived = deriveTurnStatus({ ...turn, images });
             return {
               ...turn,
               ...derived,
@@ -1004,25 +1204,6 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
       };
 
       try {
-        await updateConversation(conversationId, (current) => {
-          const conversation = current ?? snapshot;
-          return {
-            ...conversation,
-            updatedAt: new Date().toISOString(),
-            turns: conversation.turns.map((turn) =>
-              turn.id === activeTurn.id
-                ? {
-                    ...turn,
-                    status: "generating",
-                    error: undefined,
-                    images: turn.images.map((image) =>
-                      image.status === "loading" ? { ...image, taskId: image.taskId || image.id } : image,
-                    ),
-                  }
-                : turn,
-            ),
-          };
-        });
 
         const referenceFiles = activeTurn.referenceImages.map((image, index) =>
           dataUrlToFile(image.dataUrl, image.name || `${activeTurn.id}-${index + 1}.png`, image.type),
@@ -1042,6 +1223,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
         );
         await applyTasks(submitted);
 
+        let consecutiveErrors = 0;
+        const retryingTaskIdsRef = new Set<string>();
         while (true) {
           const latestConversation = conversationsRef.current.find((conversation) => conversation.id === conversationId);
           const latestTurn = latestConversation?.turns.find((turn) => turn.id === activeTurn.id);
@@ -1054,23 +1237,50 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
           }
 
           await sleep(2000);
-          const taskList = await fetchImageTasks(loadingTaskIds);
-          if (taskList.items.length > 0) {
-            await applyTasks(taskList.items);
-          }
-          if (taskList.missing_ids.length > 0 && latestTurn) {
-            const missingImages = latestTurn.images.filter(
-              (image) => image.status === "loading" && image.taskId && taskList.missing_ids.includes(image.taskId),
-            );
-            const resubmitted = await Promise.all(
-              missingImages.map((image) =>
-                activeTurn.mode === "edit"
-                  ? createImageEditTask(image.taskId || image.id, referenceFiles, activeTurn.prompt, activeTurn.model, activeTurn.size, activeTurn.quality)
-                  : createImageGenerationTask(image.taskId || image.id, activeTurn.prompt, activeTurn.model, activeTurn.size, activeTurn.quality),
-              ),
-            );
-            if (resubmitted.length > 0) {
-              await applyTasks(resubmitted);
+          try {
+            const taskList = await fetchImageTasks(loadingTaskIds);
+            consecutiveErrors = 0;
+            if (taskList.items.length > 0) {
+              // 检测是否有超时错误且需要显示重试按钮
+              const timeoutTask = taskList.items.find(
+                (task) =>
+                  task.status === "error" &&
+                  task.error?.includes("超时") &&
+                  task.conversation_id &&
+                  !retryingTaskIdsRef.has(task.id),
+              );
+              if (timeoutTask && timeoutTask.conversation_id) {
+                retryingTaskIdsRef.add(timeoutTask.id);
+                setTimeoutRetry({
+                  conversationId: timeoutTask.conversation_id,
+                  taskId: timeoutTask.id,
+                  taskError: timeoutTask.error || "生图超时",
+                });
+                // 应用超时错误到对应图片，显示继续等待按钮
+                await applyTasks([timeoutTask]);
+              } else {
+                await applyTasks(taskList.items);
+              }
+            }
+            if (taskList.missing_ids.length > 0 && latestTurn) {
+              const missingImages = latestTurn.images.filter(
+                (image) => image.status === "loading" && image.taskId && taskList.missing_ids.includes(image.taskId),
+              );
+              const resubmitted = await Promise.all(
+                missingImages.map((image) =>
+                  activeTurn.mode === "edit"
+                    ? createImageEditTask(image.taskId || image.id, referenceFiles, activeTurn.prompt, activeTurn.model, activeTurn.size, activeTurn.quality)
+                    : createImageGenerationTask(image.taskId || image.id, activeTurn.prompt, activeTurn.model, activeTurn.size, activeTurn.quality),
+                ),
+              );
+              if (resubmitted.length > 0) {
+                await applyTasks(resubmitted);
+              }
+            }
+          } catch (pollError) {
+            consecutiveErrors += 1;
+            if (consecutiveErrors >= 10) {
+              throw pollError;
             }
           }
         }
@@ -1203,6 +1413,97 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
     [runConversationQueue],
   );
 
+  const handleTimeoutRetryContinue = useCallback(async () => {
+    if (!timeoutRetry) return;
+    const { conversationId, taskId } = timeoutRetry;
+    try {
+      await resumeImagePoll(taskId, imageTimeoutRetrySecs);
+      // 将对应图片的状态重置为 loading，并清除错误
+      void updateConversation(conversationId, (current) => {
+        const conversation = current ?? conversationsRef.current.find((c) => c.id === conversationId);
+        if (!conversation) return current!;
+        return {
+          ...conversation,
+          updatedAt: new Date().toISOString(),
+          turns: conversation.turns.map((turn) => {
+            const hasLoading = turn.images.some((image) => image.taskId === taskId);
+            if (!hasLoading) return turn;
+            return {
+              ...turn,
+              status: "generating" as const,
+              error: undefined,
+              images: turn.images.map((image) =>
+                image.taskId === taskId
+                  ? { ...image, status: "loading" as const, error: undefined, taskStatus: "running" as const, startTime: image.startTime || Date.now() }
+                  : image
+              ),
+            };
+          }),
+        };
+      });
+      // 清除重试状态
+      setTimeoutRetry(null);
+      toast.info(`已继续等待 ${imageTimeoutRetrySecs} 秒`);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "续轮询失败";
+      toast.error(msg);
+      setTimeoutRetry(null);
+    }
+  }, [timeoutRetry, updateConversation, imageTimeoutRetrySecs]);
+
+  const handleTimeoutRetryCancel = useCallback(() => {
+    if (!timeoutRetry) return;
+    const { conversationId: convId, taskId, taskError } = timeoutRetry;
+    // 将超时错误应用到对应图片
+    void updateConversation(convId, (current) => {
+      const conversation = current ?? conversationsRef.current.find((c) => c.id === convId);
+      if (!conversation) return current!;
+      return {
+        ...conversation,
+        updatedAt: new Date().toISOString(),
+        turns: conversation.turns.map((turn) => {
+          const hasLoading = turn.images.some((image) => image.status === "loading" && image.taskId === taskId);
+          if (!hasLoading) return turn;
+          return {
+            ...turn,
+            status: "error" as const,
+            error: taskError,
+            images: turn.images.map((image) =>
+              image.taskId === taskId ? { ...image, status: "error" as const, error: taskError } : image,
+            ),
+          };
+        }),
+      };
+    });
+    setTimeoutRetry(null);
+    toast.error(taskError);
+  }, [timeoutRetry, updateConversation]);
+
+  const handleDismissErrors = useCallback(
+    async (conversationId: string, turnId: string) => {
+      await updateConversation(conversationId, (current) => {
+        const conversation = current ?? conversationsRef.current.find((c) => c.id === conversationId);
+        if (!conversation) return current!;
+        return {
+          ...conversation,
+          updatedAt: new Date().toISOString(),
+          turns: conversation.turns.map((turn) => {
+            if (turn.id !== turnId) return turn;
+            const successImages = turn.images.filter((image) => image.status !== "error");
+            const derived = deriveTurnStatus({ ...turn, images: successImages });
+            return {
+              ...turn,
+              ...derived,
+              count: successImages.length,
+              images: successImages,
+            };
+          }),
+        };
+      });
+    },
+    [updateConversation],
+  );
+
   useEffect(() => {
     for (const conversation of conversations) {
       if (
@@ -1266,7 +1567,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
       };
 
     shouldStickToBottomRef.current = true;
-    setShowScrollToLatest(false);
+    const btn = scrollToLatestBtnRef.current;
+    if (btn) btn.style.display = "none";
     setSelectedConversationId(conversationId);
     clearComposerInputs();
 
@@ -1362,7 +1664,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
             <div
               ref={resultsViewportRef}
               onScroll={handleResultsScroll}
-              className="hide-scrollbar h-full overscroll-contain scroll-smooth overflow-y-auto px-1 py-2 sm:px-4 sm:py-4"
+              className="hide-scrollbar h-full overscroll-contain overflow-y-auto px-1 py-2 sm:px-4 sm:py-4"
+              style={{ contain: "layout style paint" }}
             >
               <ImageResults
                 selectedConversation={selectedConversation}
@@ -1373,21 +1676,23 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
                 onReuseTurnConfig={handleReuseTurnConfig}
                 onRegenerateTurn={handleRegenerateTurn}
                 onRetryImage={handleRetryImage}
+                onTimeoutRetryContinue={handleTimeoutRetryContinue}
+                onDismissErrors={handleDismissErrors}
                 formatConversationTime={formatConversationTime}
               />
             </div>
 
-            {showScrollToLatest ? (
-              <button
-                type="button"
-                aria-label="滚动到最新消息"
-                title="滚动到最新消息"
-                onClick={() => scrollResultsToLatest("smooth")}
-                className="absolute bottom-4 left-1/2 z-20 inline-flex size-11 -translate-x-1/2 items-center justify-center rounded-full border border-stone-200 bg-white/95 text-stone-700 shadow-lg shadow-stone-200/60 backdrop-blur transition hover:-translate-y-0.5 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 dark:border-white/10 dark:bg-stone-800/95 dark:text-stone-100 dark:shadow-black/40 dark:hover:bg-stone-700"
-              >
-                <ArrowDown className="size-5" />
-              </button>
-            ) : null}
+            <button
+              ref={scrollToLatestBtnRef}
+              type="button"
+              aria-label="滚动到最新消息"
+              title="滚动到最新消息"
+              onClick={() => scrollResultsToLatest("smooth")}
+              className="absolute bottom-4 left-1/2 z-20 inline-flex size-11 -translate-x-1/2 items-center justify-center rounded-full border border-stone-200 bg-white/95 text-stone-700 shadow-lg shadow-stone-200/60 backdrop-blur transition hover:-translate-y-0.5 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 dark:border-white/10 dark:bg-stone-800/95 dark:text-stone-100 dark:shadow-black/40 dark:hover:bg-stone-700"
+              style={{ display: "none" }}
+            >
+              <ArrowDown className="size-5" />
+            </button>
           </div>
 
           <ImageComposer
@@ -1449,6 +1754,8 @@ function ImagePageContent({ isAdmin }: { isAdmin: boolean }) {
           </DialogContent>
         </Dialog>
       ) : null}
+
+
     </>
   );
 }

web/src/store/image-conversations.ts

@@ -16,10 +16,16 @@ export type StoredImage = {
   id: string;
   taskId?: string;
   status?: "loading" | "success" | "error";
+  taskStatus?: "queued" | "running";
+  progress?: string;
   b64_json?: string;
   url?: string;
   revised_prompt?: string;
   error?: string;
+  startTime?: number;
+  elapsedSecs?: number;
+  elapsedUpdatedAt?: number;
+  durationMs?: number;
 };
 
 export type ImageTurnStatus = "queued" | "generating" | "success" | "error";
@@ -68,8 +74,13 @@ function normalizeStoredImage(image: StoredImage): StoredImage {
   const normalized = {
     ...image,
     taskId: typeof image.taskId === "string" && image.taskId ? image.taskId : undefined,
+    taskStatus: image.taskStatus === "queued" || image.taskStatus === "running" ? image.taskStatus : undefined,
     url: typeof image.url === "string" && image.url ? image.url : undefined,
     revised_prompt: typeof image.revised_prompt === "string" ? image.revised_prompt : undefined,
+    startTime: typeof image.startTime === "number" ? image.startTime : undefined,
+    elapsedSecs: typeof image.elapsedSecs === "number" ? image.elapsedSecs : undefined,
+    elapsedUpdatedAt: typeof image.elapsedUpdatedAt === "number" ? image.elapsedUpdatedAt : undefined,
+    durationMs: typeof image.durationMs === "number" ? image.durationMs : undefined,
   };
   if (image.status === "loading" || image.status === "error" || image.status === "success") {
     return normalized;