feat(image-web): support stateless continue edit history

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

@@ -23,8 +23,9 @@ type ImageComposerProps = {
   model: ImageModel;
   imageCount: string;
   availableQuota: string;
-  hasAnyGenerating: boolean;
-  generatingCount: number;
+  activeTaskCount: number;
+  selectedConversationTitle: string | null;
+  selectedConversationStats: { queued: number; running: number } | null;
   referenceImages: Array<{ name: string; dataUrl: string }>;
   textareaRef: RefObject<HTMLTextAreaElement | null>;
   fileInputRef: RefObject<HTMLInputElement | null>;
@@ -45,8 +46,9 @@ export function ImageComposer({
   model,
   imageCount,
   availableQuota,
-  hasAnyGenerating,
-  generatingCount,
+  activeTaskCount,
+  selectedConversationTitle,
+  selectedConversationStats,
   referenceImages,
   textareaRef,
   fileInputRef,
@@ -176,10 +178,10 @@ export function ImageComposer({
                     </Button>
                   )}
                   <div className="rounded-full bg-stone-100 px-3 py-2 text-xs font-medium text-stone-600">剩余额度 {availableQuota}</div>
-                  {hasAnyGenerating && (
+                  {activeTaskCount > 0 && (
                     <div className="flex items-center gap-1.5 rounded-full bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
                       <LoaderCircle className="size-3 animate-spin" />
-                      {generatingCount} 个任务进行中
+                      {activeTaskCount} 个任务处理中或排队中
                     </div>
                   )}
                   <Select value={model} onValueChange={(value) => onModelChange(value as ImageModel)}>
@@ -214,6 +216,17 @@ export function ImageComposer({
                       编辑图
                     </ModeButton>
                   </div>
+                  {selectedConversationTitle ? (
+                    <div className="rounded-full bg-stone-100 px-3 py-2 text-xs font-medium text-stone-600">
+                      当前对话：{selectedConversationTitle}
+                      {selectedConversationStats?.running ? ` · 处理中 ${selectedConversationStats.running}` : ""}
+                      {selectedConversationStats?.queued ? ` · 排队 ${selectedConversationStats.queued}` : ""}
+                    </div>
+                  ) : (
+                    <div className="rounded-full bg-stone-100 px-3 py-2 text-xs font-medium text-stone-600">
+                      当前对话：发送后自动创建
+                    </div>
+                  )}
                 </div>
 
                 <button

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

@@ -1,35 +1,28 @@
 "use client";
-import { LoaderCircle } from "lucide-react";
-import { useMemo, useState } from "react";
 
-import { ImageLightbox } from "@/components/image-lightbox";
-import type { ImageConversation, StoredImage } from "@/store/image-conversations";
+import { Clock3, LoaderCircle, Sparkles } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import type { ImageConversation, ImageTurnStatus, StoredImage } from "@/store/image-conversations";
+
+export type ImageLightboxItem = {
+  id: string;
+  src: string;
+};
 
 type ImageResultsProps = {
   selectedConversation: ImageConversation | null;
-  isSelectedGenerating: boolean;
-  openLightbox: (imageId: string) => void;
+  onOpenLightbox: (images: ImageLightboxItem[], index: number) => void;
+  onContinueEdit: (conversationId: string, image: StoredImage) => void;
   formatConversationTime: (value: string) => string;
 };
 
 export function ImageResults({
   selectedConversation,
-  isSelectedGenerating,
-  openLightbox,
+  onOpenLightbox,
+  onContinueEdit,
   formatConversationTime,
 }: ImageResultsProps) {
-  const [referenceLightboxOpen, setReferenceLightboxOpen] = useState(false);
-  const [referenceLightboxIndex, setReferenceLightboxIndex] = useState(0);
-
-  const referenceLightboxImages = useMemo(
-    () =>
-      (selectedConversation?.referenceImages ?? []).map((image, index) => ({
-        id: `${image.name}-${index}`,
-        src: image.dataUrl,
-      })),
-    [selectedConversation?.referenceImages],
-  );
-
   if (!selectedConversation) {
     return (
       <div className="flex h-full min-h-[420px] items-center justify-center text-center">
@@ -48,7 +41,7 @@ export function ImageResults({
               fontFamily: '"Palatino Linotype","Book Antiqua","URW Palladio L","Times New Roman",serif',
             }}
           >
-            Describe a scene, a mood, or a character, and let the next image start here.
+            在同一窗口里保留本地历史与任务状态，并从已有结果图继续发起新的无状态编辑。
           </p>
         </div>
       </div>
@@ -56,128 +49,166 @@ export function ImageResults({
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-[980px] flex-col gap-4">
-      <ImageLightbox
-        images={referenceLightboxImages}
-        currentIndex={referenceLightboxIndex}
-        open={referenceLightboxOpen}
-        onOpenChange={setReferenceLightboxOpen}
-        onIndexChange={setReferenceLightboxIndex}
-      />
+    <div className="mx-auto flex w-full max-w-[980px] flex-col gap-8">
+      {selectedConversation.turns.map((turn, turnIndex) => {
+        const referenceLightboxImages = turn.referenceImages.map((image, index) => ({
+          id: `${turn.id}-reference-${index}`,
+          src: image.dataUrl,
+        }));
+        const successfulTurnImages = turn.images.flatMap((image) =>
+          image.status === "success" && image.b64_json
+            ? [{ id: image.id, src: `data:image/png;base64,${image.b64_json}` }]
+            : [],
+        );
 
-      <div className="flex justify-end">
-        <div className="w-full max-w-[min(820px,92%)] px-1 pt-1">
-          <div className="ml-auto flex max-w-full flex-col items-end gap-2.5 text-right">
-            <div className="w-fit max-w-[min(32rem,100%)] whitespace-pre-wrap break-words text-[15px] leading-6 text-stone-700 sm:leading-7">
-              {selectedConversation.prompt}
-            </div>
-            {selectedConversation.referenceImages?.length ? (
-              <div
-                className="grid w-fit auto-rows-fr gap-3"
-                style={{
-                  gridTemplateColumns: `repeat(${Math.min(selectedConversation.referenceImages.length, 3)}, minmax(0, 1fr))`,
-                }}
-              >
-                {selectedConversation.referenceImages.map((image, index) => (
-                  <button
-                    key={`${image.name}-${index}`}
-                    type="button"
-                    onClick={() => {
-                      setReferenceLightboxIndex(index);
-                      setReferenceLightboxOpen(true);
-                    }}
-                    className="group relative aspect-square min-h-[112px] overflow-hidden rounded-[18px] border border-stone-200/80 bg-stone-100/60 text-left transition hover:border-stone-300 sm:min-h-[136px]"
-                    aria-label={`预览参考图 ${image.name || index + 1}`}
-                  >
-                    <img
-                      src={image.dataUrl}
-                      alt={image.name || `参考图 ${index + 1}`}
-                      className="absolute inset-0 h-full w-full object-cover transition duration-200 group-hover:scale-[1.02]"
-                    />
-                  </button>
-                ))}
+        return (
+          <div key={turn.id} className="flex flex-col gap-4">
+            <div className="flex justify-end">
+              <div className="max-w-[82%] rounded-[28px] bg-stone-950 px-5 py-4 text-[15px] leading-7 text-white shadow-sm">
+                <div className="mb-2 flex flex-wrap items-center gap-2 text-[11px] text-white/70">
+                  <span className="rounded-full bg-white/10 px-2.5 py-1">第 {turnIndex + 1} 轮</span>
+                  <span className="rounded-full bg-white/10 px-2.5 py-1">
+                    {turn.mode === "edit" ? "编辑图" : "文生图"}
+                  </span>
+                  <span className="rounded-full bg-white/10 px-2.5 py-1">{turn.model}</span>
+                  <span className="rounded-full bg-white/10 px-2.5 py-1">{getTurnStatusLabel(turn.status)}</span>
+                  <span className="rounded-full bg-white/10 px-2.5 py-1">{formatConversationTime(turn.createdAt)}</span>
+                </div>
+                <div>{turn.prompt}</div>
               </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
+            </div>
 
-      <div className="flex justify-start">
-        <div className="w-full p-1">
-          <div className="mb-4 flex flex-wrap items-center gap-2 text-xs text-stone-500">
-            <span className="rounded-full bg-stone-100 px-3 py-1">{selectedConversation.mode === "edit" ? "编辑图" : "文生图"}</span>
-            <span className="rounded-full bg-stone-100 px-3 py-1">{selectedConversation.model}</span>
-            <span className="rounded-full bg-stone-100 px-3 py-1">{selectedConversation.count} 张</span>
-            <span className="rounded-full bg-stone-100 px-3 py-1">
-              {formatConversationTime(selectedConversation.createdAt)}
-            </span>
-            {isSelectedGenerating && (
-              <span className="rounded-full bg-amber-50 px-3 py-1 text-amber-700">处理中</span>
-            )}
-          </div>
+            <div className="flex justify-start">
+              <div className="w-full rounded-[28px] border border-stone-200/80 bg-white/85 p-4 shadow-[0_14px_40px_rgba(28,25,23,0.05)]">
+                {turn.referenceImages.length > 0 ? (
+                  <div className="mb-5 rounded-[22px] border border-stone-200/80 bg-stone-50/80 p-3">
+                    <div className="mb-3 text-xs font-medium text-stone-500">本轮参考图</div>
+                    <div
+                      className="grid gap-3"
+                      style={{
+                        gridTemplateColumns: `repeat(${Math.min(turn.referenceImages.length, 3)}, minmax(0, 1fr))`,
+                      }}
+                    >
+                      {turn.referenceImages.map((image, index) => (
+                        <button
+                          key={`${turn.id}-${image.name}-${index}`}
+                          type="button"
+                          onClick={() => onOpenLightbox(referenceLightboxImages, index)}
+                          className="group relative aspect-square overflow-hidden rounded-[18px] border border-stone-200/80 bg-stone-100/60 text-left transition hover:border-stone-300"
+                          aria-label={`预览参考图 ${image.name || index + 1}`}
+                        >
+                          <img
+                            src={image.dataUrl}
+                            alt={image.name || `参考图 ${index + 1}`}
+                            className="absolute inset-0 h-full w-full object-cover transition duration-200 group-hover:scale-[1.02]"
+                          />
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
 
-          {selectedConversation.status === "error" && selectedConversation.images.length === 0 ? (
-            <div className="border-l-2 border-rose-300 bg-rose-50/70 px-4 py-4 text-sm leading-6 text-rose-600">
-              {selectedConversation.error || "生成失败"}
-            </div>
-          ) : null}
+                <div className="mb-4 flex flex-wrap items-center gap-2 text-xs text-stone-500">
+                  <span className="rounded-full bg-stone-100 px-3 py-1">{turn.count} 张</span>
+                  <span className="rounded-full bg-stone-100 px-3 py-1">{getTurnStatusLabel(turn.status)}</span>
+                  {turn.status === "queued" ? (
+                    <span className="rounded-full bg-amber-50 px-3 py-1 text-amber-700">等待当前对话中的前序任务完成</span>
+                  ) : null}
+                </div>
+
+                <div className="columns-1 gap-4 space-y-4 sm:columns-2 xl:columns-3">
+                  {turn.images.map((image, index) => {
+                    if (image.status === "success" && image.b64_json) {
+                      const currentIndex = successfulTurnImages.findIndex((item) => item.id === image.id);
+
+                      return (
+                        <div
+                          key={image.id}
+                          className="break-inside-avoid overflow-hidden rounded-[22px] border border-stone-200/80 bg-stone-50/60"
+                        >
+                          <button
+                            type="button"
+                            onClick={() => onOpenLightbox(successfulTurnImages, currentIndex)}
+                            className="group block w-full cursor-zoom-in"
+                          >
+                            <img
+                              src={`data:image/png;base64,${image.b64_json}`}
+                              alt={`Generated result ${index + 1}`}
+                              className="block h-auto w-full transition duration-200 group-hover:brightness-90"
+                            />
+                          </button>
+                          <div className="flex items-center justify-between gap-2 px-3 py-3">
+                            <div className="text-xs text-stone-500">结果 {index + 1}</div>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="rounded-full border-stone-200 bg-white text-stone-700 hover:bg-stone-50"
+                              onClick={() => onContinueEdit(selectedConversation.id, image)}
+                            >
+                              <Sparkles className="size-4" />
+                              继续编辑
+                            </Button>
+                          </div>
+                        </div>
+                      );
+                    }
+
+                    if (image.status === "error") {
+                      return (
+                        <div
+                          key={image.id}
+                          className="break-inside-avoid overflow-hidden rounded-[22px] border border-rose-200 bg-rose-50"
+                        >
+                          <div className="flex min-h-[320px] items-center justify-center px-6 py-8 text-center text-sm leading-6 text-rose-600">
+                            {image.error || "生成失败"}
+                          </div>
+                        </div>
+                      );
+                    }
 
-          {selectedConversation.images.length > 0 ? (
-            <div className="columns-1 gap-4 space-y-4 sm:columns-2 xl:columns-3">
-              {selectedConversation.images.map((image, index) => (
-                <div key={image.id} className="break-inside-avoid overflow-hidden rounded-[22px]">
-                  <ImageResultCard image={image} index={index} onOpen={openLightbox} />
+                    return (
+                      <div
+                        key={image.id}
+                        className="break-inside-avoid overflow-hidden rounded-[22px] border border-stone-200/80 bg-stone-100/80"
+                      >
+                        <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 px-6 py-8 text-center text-stone-500">
+                          <div className="rounded-full bg-white p-3 shadow-sm">
+                            {turn.status === "queued" ? (
+                              <Clock3 className="size-5" />
+                            ) : (
+                              <LoaderCircle className="size-5 animate-spin" />
+                            )}
+                          </div>
+                          <p className="text-sm">{turn.status === "queued" ? "已加入当前对话队列..." : "正在处理图片..."}</p>
+                        </div>
+                      </div>
+                    );
+                  })}
                 </div>
-              ))}
-            </div>
-          ) : null}
 
-          {selectedConversation.status === "error" && selectedConversation.images.length > 0 ? (
-            <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">
-              {selectedConversation.error}
+                {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>
+                ) : null}
+              </div>
             </div>
-          ) : null}
-        </div>
-      </div>
+          </div>
+        );
+      })}
     </div>
   );
 }
 
-function ImageResultCard({
-  image,
-  index,
-  onOpen,
-}: {
-  image: StoredImage;
-  index: number;
-  onOpen: (imageId: string) => void;
-}) {
-  if (image.status === "success" && image.b64_json) {
-    return (
-      <button type="button" onClick={() => onOpen(image.id)} className="group block w-full cursor-zoom-in">
-        <img
-          src={`data:image/png;base64,${image.b64_json}`}
-          alt={`Generated result ${index + 1}`}
-          className="block h-auto w-full transition duration-200 group-hover:brightness-90"
-        />
-      </button>
-    );
+function getTurnStatusLabel(status: ImageTurnStatus) {
+  if (status === "queued") {
+    return "排队中";
   }
-
-  if (image.status === "error") {
-    return (
-      <div className="flex min-h-[320px] items-center justify-center bg-rose-50 px-6 py-8 text-center text-sm leading-6 text-rose-600">
-        {image.error || "生成失败"}
-      </div>
-    );
+  if (status === "generating") {
+    return "处理中";
   }
-
-  return (
-    <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 bg-stone-100/80 px-6 py-8 text-center text-stone-500">
-      <div className="rounded-full bg-white p-3 shadow-sm">
-        <LoaderCircle className="size-5 animate-spin" />
-      </div>
-      <p className="text-sm">正在生成图片...</p>
-    </div>
-  );
+  if (status === "success") {
+    return "已完成";
+  }
+  return "失败";
 }

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

@@ -9,7 +9,6 @@ import type { ImageConversation } from "@/store/image-conversations";
 type ImageSidebarProps = {
   conversations: ImageConversation[];
   isLoadingHistory: boolean;
-  generatingIds: Set<string>;
   selectedConversationId: string | null;
   onCreateDraft: () => void;
   onClearHistory: () => void | Promise<void>;
@@ -21,7 +20,6 @@ type ImageSidebarProps = {
 export function ImageSidebar({
   conversations,
   isLoadingHistory,
-  generatingIds,
   selectedConversationId,
   onCreateDraft,
   onClearHistory,
@@ -58,7 +56,7 @@ export function ImageSidebar({
           ) : (
             conversations.map((conversation) => {
               const active = conversation.id === selectedConversationId;
-              const generating = generatingIds.has(conversation.id);
+              const stats = getConversationStats(conversation);
               return (
                 <div
                   key={conversation.id}
@@ -74,13 +72,22 @@ export function ImageSidebar({
                     onClick={() => onSelectConversation(conversation.id)}
                     className="block w-full pr-8 text-left"
                   >
-                    <div className="flex items-center gap-1.5 truncate text-sm font-semibold">
-                      {generating && <LoaderCircle className="size-3.5 shrink-0 animate-spin text-stone-400" />}
+                    <div className="truncate text-sm font-semibold">
                       <span className="truncate">{conversation.title}</span>
                     </div>
                     <div className={cn("mt-1 text-xs", active ? "text-stone-500" : "text-stone-400")}>
-                      {formatConversationTime(conversation.createdAt)}
+                      {conversation.turns.length} 轮 · {formatConversationTime(conversation.updatedAt)}
                     </div>
+                    {stats.running > 0 || stats.queued > 0 ? (
+                      <div className="mt-2 flex flex-wrap items-center gap-2 text-[11px]">
+                        {stats.running > 0 ? (
+                          <span className="rounded-full bg-blue-50 px-2 py-1 text-blue-600">处理中 {stats.running}</span>
+                        ) : null}
+                        {stats.queued > 0 ? (
+                          <span className="rounded-full bg-amber-50 px-2 py-1 text-amber-700">排队 {stats.queued}</span>
+                        ) : null}
+                      </div>
+                    ) : null}
                   </button>
                   <button
                     type="button"
@@ -99,3 +106,17 @@ export function ImageSidebar({
     </aside>
   );
 }
+
+function getConversationStats(conversation: ImageConversation) {
+  return conversation.turns.reduce(
+    (acc, turn) => {
+      if (turn.status === "queued") {
+        acc.queued += 1;
+      } else if (turn.status === "generating") {
+        acc.running += 1;
+      }
+      return acc;
+    },
+    { queued: 0, running: 0 },
+  );
+}

web/src/app/image/page.tsx

@@ -3,11 +3,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 
-import { ImageLightbox } from "@/components/image-lightbox";
-import { editImage, fetchAccounts, generateImage, type Account, type ImageModel } from "@/lib/api";
 import { ImageComposer } from "@/app/image/components/image-composer";
-import { ImageResults } from "@/app/image/components/image-results";
+import { ImageResults, type ImageLightboxItem } from "@/app/image/components/image-results";
 import { ImageSidebar } from "@/app/image/components/image-sidebar";
+import { ImageLightbox } from "@/components/image-lightbox";
+import { editImage, fetchAccounts, generateImage, type Account, type ImageModel } from "@/lib/api";
 import {
   clearImageConversations,
   deleteImageConversation,
@@ -15,10 +15,15 @@ import {
   saveImageConversation,
   type ImageConversation,
   type ImageConversationMode,
+  type ImageTurn,
+  type ImageTurnStatus,
   type StoredImage,
   type StoredReferenceImage,
 } from "@/store/image-conversations";
 
+const ACTIVE_CONVERSATION_STORAGE_KEY = "chatgpt2api:image_active_conversation_id";
+const activeConversationQueueIds = new Set<string>();
+
 const imageModelOptions: Array<{ label: string; value: ImageModel }> = [
   { label: "gpt-image-1", value: "gpt-image-1" },
   { label: "gpt-image-2", value: "gpt-image-2" },
@@ -26,10 +31,10 @@ const imageModelOptions: Array<{ label: string; value: ImageModel }> = [
 
 function buildConversationTitle(prompt: string) {
   const trimmed = prompt.trim();
-  if (trimmed.length <= 5) {
+  if (trimmed.length <= 12) {
     return trimmed;
   }
-  return `${trimmed.slice(0, 5)}...`;
+  return `${trimmed.slice(0, 12)}...`;
 }
 
 function formatConversationTime(value: string) {
@@ -50,41 +55,11 @@ function formatAvailableQuota(accounts: Account[]) {
   return String(availableAccounts.reduce((sum, account) => sum + Math.max(0, account.quota), 0));
 }
 
-async function normalizeConversationHistory(items: ImageConversation[]) {
-  const normalized = items.map((item) =>
-    item.status === "generating"
-      ? {
-          ...item,
-          status: "error" as const,
-          error: item.images.some((image) => image.status === "success")
-            ? item.error || "生成已中断"
-            : "页面已刷新，生成已中断",
-          images: item.images.map((image) =>
-            image.status === "loading"
-              ? {
-                  ...image,
-                  status: "error" as const,
-                  error: "页面已刷新，生成已中断",
-                }
-              : image,
-          ),
-        }
-      : item,
-  );
-
-  await Promise.all(
-    normalized
-      .filter((item, index) => item !== items[index])
-      .map((item) => saveImageConversation(item)),
-  );
-
-  return normalized;
-}
-
 function createId() {
-  return typeof crypto !== "undefined" && "randomUUID" in crypto
-    ? crypto.randomUUID()
-    : `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
 }
 
 function readFileAsDataUrl(file: File) {
@@ -96,8 +71,118 @@ function readFileAsDataUrl(file: File) {
   });
 }
 
+function dataUrlToFile(dataUrl: string, fileName: string, mimeType?: string) {
+  const [header, content] = dataUrl.split(",", 2);
+  const matchedMimeType = header.match(/data:(.*?);base64/)?.[1];
+  const binary = atob(content || "");
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return new File([bytes], fileName, { type: mimeType || matchedMimeType || "image/png" });
+}
+
+function buildReferenceImageFromResult(image: StoredImage, fileName: string): StoredReferenceImage | null {
+  if (!image.b64_json) {
+    return null;
+  }
+
+  return {
+    name: fileName,
+    type: "image/png",
+    dataUrl: `data:image/png;base64,${image.b64_json}`,
+  };
+}
+
+function getConversationStats(conversation: ImageConversation | null) {
+  if (!conversation) {
+    return { queued: 0, running: 0 };
+  }
+
+  return conversation.turns.reduce(
+    (acc, turn) => {
+      if (turn.status === "queued") {
+        acc.queued += 1;
+      } else if (turn.status === "generating") {
+        acc.running += 1;
+      }
+      return acc;
+    },
+    { queued: 0, running: 0 },
+  );
+}
+
+function pickFallbackConversationId(conversations: ImageConversation[]) {
+  const activeConversation = conversations.find((conversation) =>
+    conversation.turns.some((turn) => turn.status === "queued" || turn.status === "generating"),
+  );
+  return activeConversation?.id ?? conversations[0]?.id ?? null;
+}
+
+async function recoverConversationHistory(items: ImageConversation[]) {
+  const normalized = items.map((conversation) => {
+    let changed = false;
+
+    const turns = conversation.turns.map((turn) => {
+      if (turn.status !== "queued" && turn.status !== "generating") {
+        return turn;
+      }
+
+      const loadingCount = turn.images.filter((image) => image.status === "loading").length;
+      if (loadingCount > 0 && turn.status === "generating") {
+        changed = true;
+        return {
+          ...turn,
+          status: "queued" as const,
+          error: undefined,
+        };
+      }
+
+      if (loadingCount > 0) {
+        return turn;
+      }
+
+      const failedCount = turn.images.filter((image) => image.status === "error").length;
+      const successCount = turn.images.filter((image) => image.status === "success").length;
+      const nextStatus: ImageTurnStatus =
+        failedCount > 0 ? "error" : successCount > 0 ? "success" : "queued";
+      const nextError = failedCount > 0 ? turn.error || `其中 ${failedCount} 张未成功生成` : undefined;
+      if (nextStatus === turn.status && nextError === turn.error) {
+        return turn;
+      }
+
+      changed = true;
+      return {
+        ...turn,
+        status: nextStatus,
+        error: nextError,
+      };
+    });
+
+    if (!changed) {
+      return conversation;
+    }
+
+    const lastTurn = turns.length > 0 ? turns[turns.length - 1] : null;
+    return {
+      ...conversation,
+      turns,
+      updatedAt: lastTurn?.createdAt || conversation.updatedAt,
+    };
+  });
+
+  await Promise.all(
+    normalized
+      .filter((conversation, index) => conversation !== items[index])
+      .map((conversation) => saveImageConversation(conversation)),
+  );
+
+  return normalized;
+}
+
 export default function ImagePage() {
   const didLoadQuotaRef = useRef(false);
+  const conversationsRef = useRef<ImageConversation[]>([]);
   const resultsViewportRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -111,61 +196,52 @@ export default function ImagePage() {
   const [conversations, setConversations] = useState<ImageConversation[]>([]);
   const [selectedConversationId, setSelectedConversationId] = useState<string | null>(null);
   const [isLoadingHistory, setIsLoadingHistory] = useState(true);
-  const [generatingIds, setGeneratingIds] = useState<Set<string>>(new Set());
-  const [availableQuota, setAvailableQuota] = useState("加载中");
+  const [availableQuota, setAvailableQuota] = useState("加载中...");
+  const [lightboxImages, setLightboxImages] = useState<ImageLightboxItem[]>([]);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
 
+  const parsedCount = useMemo(() => Math.max(1, Math.min(10, Number(imageCount) || 1)), [imageCount]);
   const selectedConversation = useMemo(
     () => conversations.find((item) => item.id === selectedConversationId) ?? null,
     [conversations, selectedConversationId],
   );
-  const parsedCount = useMemo(() => Math.max(1, Math.min(10, Number(imageCount) || 1)), [imageCount]);
-  const isSelectedGenerating = selectedConversationId !== null && generatingIds.has(selectedConversationId);
-  const hasAnyGenerating = generatingIds.size > 0;
-
-  const addGeneratingId = useCallback((id: string) => {
-    setGeneratingIds((prev) => new Set(prev).add(id));
-  }, []);
-
-  const removeGeneratingId = useCallback((id: string) => {
-    setGeneratingIds((prev) => {
-      const next = new Set(prev);
-      next.delete(id);
-      return next;
-    });
-  }, []);
-
-  const lightboxImages = useMemo(
-    () =>
-      (selectedConversation?.images ?? [])
-        .filter((img): img is StoredImage & { b64_json: string } => img.status === "success" && !!img.b64_json)
-        .map((img) => ({ id: img.id, src: `data:image/png;base64,${img.b64_json}` })),
+  const selectedConversationStats = useMemo(
+    () => getConversationStats(selectedConversation),
     [selectedConversation],
   );
-
-  const openLightbox = useCallback(
-    (imageId: string) => {
-      const idx = lightboxImages.findIndex((img) => img.id === imageId);
-      if (idx >= 0) {
-        setLightboxIndex(idx);
-        setLightboxOpen(true);
-      }
-    },
-    [lightboxImages],
+  const activeTaskCount = useMemo(
+    () =>
+      conversations.reduce((sum, conversation) => {
+        const stats = getConversationStats(conversation);
+        return sum + stats.queued + stats.running;
+      }, 0),
+    [conversations],
   );
 
+  useEffect(() => {
+    conversationsRef.current = conversations;
+  }, [conversations]);
+
   useEffect(() => {
     let cancelled = false;
 
     const loadHistory = async () => {
       try {
         const items = await listImageConversations();
-        const normalizedItems = await normalizeConversationHistory(items);
+        const normalizedItems = await recoverConversationHistory(items);
         if (cancelled) {
           return;
         }
+
         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);
@@ -187,7 +263,7 @@ export default function ImagePage() {
       const data = await fetchAccounts();
       setAvailableQuota(formatAvailableQuota(data.items));
     } catch {
-      setAvailableQuota((prev) => (prev === "加载中" ? "—" : prev));
+      setAvailableQuota((prev) => (prev === "加载中..." ? "--" : prev));
     }
   }, []);
 
@@ -197,15 +273,11 @@ export default function ImagePage() {
     }
     didLoadQuotaRef.current = true;
 
-    const syncQuota = async () => {
-      await loadQuota();
-    };
-
     const handleFocus = () => {
-      void syncQuota();
+      void loadQuota();
     };
 
-    void syncQuota();
+    void loadQuota();
     window.addEventListener("focus", handleFocus);
     return () => {
       window.removeEventListener("focus", handleFocus);
@@ -213,7 +285,7 @@ export default function ImagePage() {
   }, [loadQuota]);
 
   useEffect(() => {
-    if (!selectedConversation && !isSelectedGenerating) {
+    if (!selectedConversation) {
       return;
     }
 
@@ -221,35 +293,53 @@ export default function ImagePage() {
       top: resultsViewportRef.current.scrollHeight,
       behavior: "smooth",
     });
-  }, [selectedConversation, isSelectedGenerating]);
+  }, [selectedConversation?.updatedAt, selectedConversation?.turns.length, selectedConversation]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (selectedConversationId) {
+      window.localStorage.setItem(ACTIVE_CONVERSATION_STORAGE_KEY, selectedConversationId);
+    } else {
+      window.localStorage.removeItem(ACTIVE_CONVERSATION_STORAGE_KEY);
+    }
+  }, [selectedConversationId]);
+
+  useEffect(() => {
+    if (selectedConversationId && !conversations.some((conversation) => conversation.id === selectedConversationId)) {
+      setSelectedConversationId(pickFallbackConversationId(conversations));
+    }
+  }, [conversations, selectedConversationId]);
 
   const persistConversation = async (conversation: ImageConversation) => {
     setConversations((prev) => {
       const next = [conversation, ...prev.filter((item) => item.id !== conversation.id)];
-      return next.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+      return next.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
     });
     await saveImageConversation(conversation);
   };
 
-  const updateConversation = async (
-    conversationId: string,
-    updater: (current: ImageConversation | null) => ImageConversation,
-  ) => {
-    let nextConversation: ImageConversation | null = null;
+  const updateConversation = useCallback(
+    async (conversationId: string, updater: (current: ImageConversation | null) => ImageConversation) => {
+      let nextConversation: ImageConversation | null = null;
 
-    setConversations((prev) => {
-      const current = prev.find((item) => item.id === conversationId) ?? null;
-      nextConversation = updater(current);
-      const next = [nextConversation, ...prev.filter((item) => item.id !== conversationId)];
-      return next.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
-    });
+      setConversations((prev) => {
+        const current = prev.find((item) => item.id === conversationId) ?? null;
+        nextConversation = updater(current);
+        const next = [nextConversation, ...prev.filter((item) => item.id !== conversationId)];
+        return next.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+      });
 
-    if (nextConversation) {
-      await saveImageConversation(nextConversation);
-    }
-  };
+      if (nextConversation) {
+        await saveImageConversation(nextConversation);
+      }
+    },
+    [],
+  );
 
-  const resetComposer = useCallback(() => {
+  const clearComposerInputs = useCallback(() => {
     setImagePrompt("");
     setImageCount("1");
     setReferenceImageFiles([]);
@@ -259,6 +349,11 @@ export default function ImagePage() {
     }
   }, []);
 
+  const resetComposer = useCallback(() => {
+    setImageMode("generate");
+    clearComposerInputs();
+  }, [clearComposerInputs]);
+
   const handleCreateDraft = () => {
     setSelectedConversationId(null);
     resetComposer();
@@ -268,7 +363,10 @@ export default function ImagePage() {
   const handleDeleteConversation = async (id: string) => {
     const nextConversations = conversations.filter((item) => item.id !== id);
     setConversations(nextConversations);
-    setSelectedConversationId((prev) => (prev === id ? null : prev));
+    if (selectedConversationId === id) {
+      setSelectedConversationId(pickFallbackConversationId(nextConversations));
+      resetComposer();
+    }
 
     try {
       await deleteImageConversation(id);
@@ -285,6 +383,7 @@ export default function ImagePage() {
       await clearImageConversations();
       setConversations([]);
       setSelectedConversationId(null);
+      resetComposer();
       toast.success("已清空历史记录");
     } catch (error) {
       const message = error instanceof Error ? error.message : "清空历史记录失败";
@@ -305,8 +404,10 @@ export default function ImagePage() {
           dataUrl: await readFileAsDataUrl(file),
         })),
       );
+
       setReferenceImageFiles((prev) => [...prev, ...files]);
       setReferenceImages((prev) => [...prev, ...previews]);
+      setImageMode("edit");
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
@@ -316,15 +417,16 @@ export default function ImagePage() {
     }
   }, []);
 
-  const handleReferenceImageChange = useCallback(async (files: File[]) => {
-    if (files.length === 0) {
-      setReferenceImageFiles([]);
-      setReferenceImages([]);
-      return;
-    }
+  const handleReferenceImageChange = useCallback(
+    async (files: File[]) => {
+      if (files.length === 0) {
+        return;
+      }
 
-    await appendReferenceImages(files);
-  }, [appendReferenceImages]);
+      await appendReferenceImages(files);
+    },
+    [appendReferenceImages],
+  );
 
   const handleRemoveReferenceImage = useCallback((index: number) => {
     setReferenceImageFiles((prev) => {
@@ -337,7 +439,240 @@ export default function ImagePage() {
     setReferenceImages((prev) => prev.filter((_, currentIndex) => currentIndex !== index));
   }, []);
 
-  const handleGenerateImage = async () => {
+  const handleContinueEdit = useCallback(
+    (conversationId: string, image: StoredImage) => {
+      const nextReferenceImage = buildReferenceImageFromResult(
+        image,
+        `conversation-${conversationId}-${Date.now()}.png`,
+      );
+      if (!nextReferenceImage) {
+        return;
+      }
+
+      setSelectedConversationId(conversationId);
+      setImageMode("edit");
+      setReferenceImages([nextReferenceImage]);
+      setReferenceImageFiles([
+        dataUrlToFile(nextReferenceImage.dataUrl, nextReferenceImage.name, nextReferenceImage.type),
+      ]);
+      setImagePrompt("");
+      textareaRef.current?.focus();
+      toast.success("已把这张结果图设为当前参考图");
+    },
+    [],
+  );
+
+  const openLightbox = useCallback((images: ImageLightboxItem[], index: number) => {
+    if (images.length === 0) {
+      return;
+    }
+
+    setLightboxImages(images);
+    setLightboxIndex(Math.max(0, Math.min(index, images.length - 1)));
+    setLightboxOpen(true);
+  }, []);
+
+  const runConversationQueue = useCallback(
+    async (conversationId: string) => {
+      if (activeConversationQueueIds.has(conversationId)) {
+        return;
+      }
+
+      const snapshot = conversationsRef.current.find((conversation) => conversation.id === conversationId);
+      const queuedTurn = snapshot?.turns.find((turn) => turn.status === "queued");
+      if (!snapshot || !queuedTurn) {
+        return;
+      }
+
+      activeConversationQueueIds.add(conversationId);
+      await updateConversation(conversationId, (current) => {
+        const conversation = current ?? snapshot;
+        return {
+          ...conversation,
+          updatedAt: new Date().toISOString(),
+          turns: conversation.turns.map((turn) =>
+            turn.id === queuedTurn.id
+              ? {
+                  ...turn,
+                  status: "generating",
+                  error: undefined,
+                }
+              : turn,
+          ),
+        };
+      });
+
+      try {
+        const referenceFiles = queuedTurn.referenceImages.map((image, index) =>
+          dataUrlToFile(image.dataUrl, image.name || `${queuedTurn.id}-${index + 1}.png`, image.type),
+        );
+        const pendingImages = queuedTurn.images.filter((image) => image.status === "loading");
+
+        if (queuedTurn.mode === "edit" && referenceFiles.length === 0) {
+          throw new Error("未找到可用于继续编辑的参考图");
+        }
+
+        if (pendingImages.length === 0) {
+          const existingFailedCount = queuedTurn.images.filter((image) => image.status === "error").length;
+          const existingSuccessCount = queuedTurn.images.filter((image) => image.status === "success").length;
+          await updateConversation(conversationId, (current) => {
+            const conversation = current ?? snapshot;
+            return {
+              ...conversation,
+              updatedAt: new Date().toISOString(),
+              turns: conversation.turns.map((turn) =>
+                turn.id === queuedTurn.id
+                  ? {
+                      ...turn,
+                      status: existingFailedCount > 0 ? "error" : existingSuccessCount > 0 ? "success" : "queued",
+                      error: existingFailedCount > 0 ? `其中 ${existingFailedCount} 张未成功生成` : undefined,
+                    }
+                  : turn,
+              ),
+            };
+          });
+          return;
+        }
+
+        const tasks = pendingImages.map(async (pendingImage) => {
+          try {
+            const data =
+              queuedTurn.mode === "edit"
+                ? await editImage(referenceFiles, queuedTurn.prompt, queuedTurn.model)
+                : await generateImage(queuedTurn.prompt, queuedTurn.model);
+            const first = data.data?.[0];
+            if (!first?.b64_json) {
+              throw new Error("未返回图片数据");
+            }
+
+            const nextImage: StoredImage = {
+              id: pendingImage.id,
+              status: "success",
+              b64_json: first.b64_json,
+            };
+
+            await updateConversation(conversationId, (current) => {
+              const conversation = current ?? snapshot;
+              return {
+                ...conversation,
+                updatedAt: new Date().toISOString(),
+                turns: conversation.turns.map((turn) =>
+                  turn.id === queuedTurn.id
+                    ? {
+                        ...turn,
+                        images: turn.images.map((image) => (image.id === nextImage.id ? nextImage : image)),
+                      }
+                    : turn,
+                ),
+              };
+            });
+
+            return nextImage;
+          } catch (error) {
+            const message = error instanceof Error ? error.message : "生成失败";
+            const failedImage: StoredImage = {
+              id: pendingImage.id,
+              status: "error",
+              error: message,
+            };
+
+            await updateConversation(conversationId, (current) => {
+              const conversation = current ?? snapshot;
+              return {
+                ...conversation,
+                updatedAt: new Date().toISOString(),
+                turns: conversation.turns.map((turn) =>
+                  turn.id === queuedTurn.id
+                    ? {
+                        ...turn,
+                        images: turn.images.map((image) => (image.id === failedImage.id ? failedImage : image)),
+                      }
+                    : turn,
+                ),
+              };
+            });
+
+            throw error;
+          }
+        });
+
+        const settled = await Promise.allSettled(tasks);
+        const resumedSuccessCount = settled.filter(
+          (item): item is PromiseFulfilledResult<StoredImage> => item.status === "fulfilled",
+        ).length;
+        const resumedFailedCount = settled.length - resumedSuccessCount;
+        const existingSuccessCount = queuedTurn.images.filter((image) => image.status === "success").length;
+        const existingFailedCount = queuedTurn.images.filter((image) => image.status === "error").length;
+        const successCount = existingSuccessCount + resumedSuccessCount;
+        const failedCount = existingFailedCount + resumedFailedCount;
+
+        await updateConversation(conversationId, (current) => {
+          const conversation = current ?? snapshot;
+          return {
+            ...conversation,
+            updatedAt: new Date().toISOString(),
+            turns: conversation.turns.map((turn) =>
+              turn.id === queuedTurn.id
+                ? {
+                    ...turn,
+                    status: failedCount > 0 ? "error" : "success",
+                    error: failedCount > 0 ? `其中 ${failedCount} 张未成功生成` : undefined,
+                  }
+                : turn,
+            ),
+          };
+        });
+
+        await loadQuota();
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "生成图片失败";
+        await updateConversation(conversationId, (current) => {
+          const conversation = current ?? snapshot;
+          return {
+            ...conversation,
+            updatedAt: new Date().toISOString(),
+            turns: conversation.turns.map((turn) =>
+              turn.id === queuedTurn.id
+                ? {
+                    ...turn,
+                    status: "error",
+                    error: message,
+                    images: turn.images.map((image) =>
+                      image.status === "loading" ? { ...image, status: "error", error: message } : image,
+                    ),
+                  }
+                : turn,
+            ),
+          };
+        });
+        toast.error(message);
+      } finally {
+        activeConversationQueueIds.delete(conversationId);
+        for (const conversation of conversationsRef.current) {
+          if (
+            !activeConversationQueueIds.has(conversation.id) &&
+            conversation.turns.some((turn) => turn.status === "queued")
+          ) {
+            void runConversationQueue(conversation.id);
+          }
+        }
+      }
+    },
+    [loadQuota, updateConversation],
+  );
+
+  useEffect(() => {
+    for (const conversation of conversations) {
+      if (
+        !activeConversationQueueIds.has(conversation.id) &&
+        conversation.turns.some((turn) => turn.status === "queued")
+      ) {
+        void runConversationQueue(conversation.id);
+      }
+    }
+  }, [conversations, runConversationQueue]);
+
+  const handleSubmit = async () => {
     const prompt = imagePrompt.trim();
     if (!prompt) {
       toast.error("请输入提示词");
@@ -349,118 +684,54 @@ export default function ImagePage() {
       return;
     }
 
+    const targetConversation = selectedConversationId
+      ? conversationsRef.current.find((conversation) => conversation.id === selectedConversationId) ?? null
+      : null;
     const now = new Date().toISOString();
-    const conversationId = createId();
-    const draftReferenceImages = imageMode === "edit" ? referenceImages : [];
-
-    const draftConversation: ImageConversation = {
-      id: conversationId,
-      title: buildConversationTitle(prompt),
+    const conversationId = targetConversation?.id ?? createId();
+    const turnId = createId();
+    const draftTurn: ImageTurn = {
+      id: turnId,
       prompt,
       model: imageModel,
       mode: imageMode,
-      referenceImages: draftReferenceImages,
+      referenceImages: imageMode === "edit" ? referenceImages : [],
       count: parsedCount,
       images: Array.from({ length: parsedCount }, (_, index) => ({
-        id: `${conversationId}-${index}`,
-        status: "loading",
+        id: `${turnId}-${index}`,
+        status: "loading" as const,
       })),
       createdAt: now,
-      status: "generating",
+      status: "queued",
     };
 
-    addGeneratingId(conversationId);
-    setSelectedConversationId(conversationId);
-    resetComposer();
-
-    try {
-      await persistConversation(draftConversation);
-
-      const tasks = Array.from({ length: parsedCount }, async (_, index) => {
-        try {
-          const data =
-            imageMode === "edit" && referenceImageFiles.length > 0
-              ? await editImage(referenceImageFiles, prompt, imageModel)
-              : await generateImage(prompt, imageModel);
-          const first = data.data?.[0];
-          if (!first?.b64_json) {
-            throw new Error(`第 ${index + 1} 张没有返回图片数据`);
-          }
-
-          const nextImage: StoredImage = {
-            id: `${conversationId}-${index}`,
-            status: "success",
-            b64_json: first.b64_json,
-          };
-
-          await updateConversation(conversationId, (current) => ({
-            ...(current ?? draftConversation),
-            images: (current?.images ?? draftConversation.images).map((image) =>
-              image.id === nextImage.id ? nextImage : image,
-            ),
-          }));
-
-          return nextImage;
-        } catch (error) {
-          const message = error instanceof Error ? error.message : `第 ${index + 1} 张生成失败`;
-          const failedImage: StoredImage = {
-            id: `${conversationId}-${index}`,
-            status: "error",
-            error: message,
-          };
-
-          await updateConversation(conversationId, (current) => ({
-            ...(current ?? draftConversation),
-            images: (current?.images ?? draftConversation.images).map((image) =>
-              image.id === failedImage.id ? failedImage : image,
-            ),
-          }));
-
-          throw error;
+    const baseConversation: ImageConversation = targetConversation
+      ? {
+          ...targetConversation,
+          updatedAt: now,
+          turns: [...targetConversation.turns, draftTurn],
         }
-      });
-
-      const settled = await Promise.allSettled(tasks);
-      const successCount = settled.filter((item): item is PromiseFulfilledResult<StoredImage> => item.status === "fulfilled")
-        .length;
-      const failedCount = settled.length - successCount;
-
-      if (successCount === 0) {
-        const firstError = settled.find((item) => item.status === "rejected");
-        throw new Error(firstError?.status === "rejected" ? String(firstError.reason) : "生成图片失败");
-      }
+      : {
+          id: conversationId,
+          title: buildConversationTitle(prompt),
+          createdAt: now,
+          updatedAt: now,
+          turns: [draftTurn],
+        };
 
-      await updateConversation(conversationId, (current) => ({
-        ...(current ?? draftConversation),
-        status: failedCount > 0 ? "error" : "success",
-        error: failedCount > 0 ? `其中 ${failedCount} 张生成失败` : undefined,
-      }));
-      await loadQuota();
-
-      if (failedCount > 0) {
-        toast.error(`已完成 ${successCount} 张，另有 ${failedCount} 张未生成成功`);
-      } else {
-        toast.success(imageMode === "edit" ? `已完成 ${successCount} 张图片编辑` : `已生成 ${successCount} 张图片`);
-      }
-    } catch (error) {
-      const message = error instanceof Error ? error.message : imageMode === "edit" ? "编辑图片失败" : "生成图片失败";
-      await persistConversation({
-        ...draftConversation,
-        status: "error",
-        error: message,
-        images: draftConversation.images.map((image) =>
-          image.status === "loading"
-            ? {
-                ...image,
-                status: "error",
-                error: message,
-              }
-            : image,
-        ),
-      });
-      toast.error(message);
-    } finally {
-      removeGeneratingId(conversationId);
+    setSelectedConversationId(conversationId);
+    clearComposerInputs();
+
+    await persistConversation(baseConversation);
+    void runConversationQueue(conversationId);
+
+    const targetStats = getConversationStats(baseConversation);
+    if (targetStats.running > 0 || targetStats.queued > 1) {
+      toast.success("已加入当前对话队列");
+    } else if (!targetConversation) {
+      toast.success("已创建新对话并开始处理");
+    } else {
+      toast.success("已发送到当前对话");
     }
   };
 
@@ -470,7 +741,6 @@ export default function ImagePage() {
         <ImageSidebar
           conversations={conversations}
           isLoadingHistory={isLoadingHistory}
-          generatingIds={generatingIds}
           selectedConversationId={selectedConversationId}
           onCreateDraft={handleCreateDraft}
           onClearHistory={handleClearHistory}
@@ -486,8 +756,8 @@ export default function ImagePage() {
           >
             <ImageResults
               selectedConversation={selectedConversation}
-              isSelectedGenerating={isSelectedGenerating}
-              openLightbox={openLightbox}
+              onOpenLightbox={openLightbox}
+              onContinueEdit={handleContinueEdit}
               formatConversationTime={formatConversationTime}
             />
           </div>
@@ -498,8 +768,9 @@ export default function ImagePage() {
             model={imageModel}
             imageCount={imageCount}
             availableQuota={availableQuota}
-            hasAnyGenerating={hasAnyGenerating}
-            generatingCount={generatingIds.size}
+            activeTaskCount={activeTaskCount}
+            selectedConversationTitle={selectedConversation?.title ?? null}
+            selectedConversationStats={selectedConversation ? selectedConversationStats : null}
             referenceImages={referenceImages}
             textareaRef={textareaRef}
             fileInputRef={fileInputRef}
@@ -508,7 +779,7 @@ export default function ImagePage() {
             onPromptChange={setImagePrompt}
             onModelChange={setImageModel}
             onImageCountChange={setImageCount}
-            onSubmit={handleGenerateImage}
+            onSubmit={handleSubmit}
             onPickReferenceImage={() => fileInputRef.current?.click()}
             onReferenceImageChange={handleReferenceImageChange}
             onRemoveReferenceImage={handleRemoveReferenceImage}

web/src/store/image-conversations.ts

@@ -19,22 +19,29 @@ export type StoredImage = {
   error?: string;
 };
 
-export type ImageConversationStatus = "generating" | "success" | "error";
+export type ImageTurnStatus = "queued" | "generating" | "success" | "error";
 
-export type ImageConversation = {
+export type ImageTurn = {
   id: string;
-  title: string;
   prompt: string;
   model: ImageModel;
-  mode?: ImageConversationMode;
-  referenceImages?: StoredReferenceImage[];
+  mode: ImageConversationMode;
+  referenceImages: StoredReferenceImage[];
   count: number;
   images: StoredImage[];
   createdAt: string;
-  status: ImageConversationStatus;
+  status: ImageTurnStatus;
   error?: string;
 };
 
+export type ImageConversation = {
+  id: string;
+  title: string;
+  createdAt: string;
+  updatedAt: string;
+  turns: ImageTurn[];
+};
+
 const imageConversationStorage = localforage.createInstance({
   name: "chatgpt2api",
   storeName: "image_conversations",
@@ -52,23 +59,119 @@ function normalizeStoredImage(image: StoredImage): StoredImage {
   };
 }
 
-function normalizeConversation(conversation: ImageConversation): ImageConversation {
+function normalizeReferenceImage(image: StoredReferenceImage): StoredReferenceImage {
+  return {
+    name: image.name || "reference.png",
+    type: image.type || "image/png",
+    dataUrl: image.dataUrl,
+  };
+}
+
+function dataUrlMimeType(dataUrl: string) {
+  const match = dataUrl.match(/^data:(.*?);base64,/);
+  return match?.[1] || "image/png";
+}
+
+function getLegacyReferenceImages(source: Record<string, unknown>): StoredReferenceImage[] {
+  if (Array.isArray(source.referenceImages)) {
+    return source.referenceImages
+      .filter((image): image is StoredReferenceImage => {
+        if (!image || typeof image !== "object") {
+          return false;
+        }
+        const candidate = image as StoredReferenceImage;
+        return typeof candidate.dataUrl === "string" && candidate.dataUrl.length > 0;
+      })
+      .map(normalizeReferenceImage);
+  }
+
+  if (source.sourceImage && typeof source.sourceImage === "object") {
+    const image = source.sourceImage as { dataUrl?: unknown; fileName?: unknown };
+    if (typeof image.dataUrl === "string" && image.dataUrl) {
+      return [
+        {
+          name: typeof image.fileName === "string" && image.fileName ? image.fileName : "reference.png",
+          type: dataUrlMimeType(image.dataUrl),
+          dataUrl: image.dataUrl,
+        },
+      ];
+    }
+  }
+
+  return [];
+}
+
+function normalizeTurn(turn: ImageTurn & Record<string, unknown>): ImageTurn {
+  const normalizedImages = Array.isArray(turn.images) ? turn.images.map(normalizeStoredImage) : [];
+  const derivedStatus: ImageTurnStatus =
+    normalizedImages.some((image) => image.status === "loading")
+      ? "generating"
+      : normalizedImages.some((image) => image.status === "error")
+        ? "error"
+        : "success";
+
+  return {
+    id: String(turn.id || `${Date.now()}`),
+    prompt: String(turn.prompt || ""),
+    model: (turn.model as ImageModel) || "gpt-image-1",
+    mode: turn.mode === "edit" ? "edit" : "generate",
+    referenceImages: getLegacyReferenceImages(turn),
+    count: Math.max(1, Number(turn.count || normalizedImages.length || 1)),
+    images: normalizedImages,
+    createdAt: String(turn.createdAt || new Date().toISOString()),
+    status:
+      turn.status === "queued" ||
+      turn.status === "generating" ||
+      turn.status === "success" ||
+      turn.status === "error"
+        ? turn.status
+        : derivedStatus,
+    error: typeof turn.error === "string" ? turn.error : undefined,
+  };
+}
+
+function normalizeConversation(conversation: ImageConversation & Record<string, unknown>): ImageConversation {
+  const turns = Array.isArray(conversation.turns)
+    ? conversation.turns.map((turn) => normalizeTurn(turn as ImageTurn & Record<string, unknown>))
+    : [
+        normalizeTurn({
+          id: String(conversation.id || `${Date.now()}`),
+          prompt: String(conversation.prompt || ""),
+          model: (conversation.model as ImageModel) || "gpt-image-1",
+          mode: conversation.mode === "edit" ? "edit" : "generate",
+          referenceImages: getLegacyReferenceImages(conversation),
+          count: Number(conversation.count || 1),
+          images: Array.isArray(conversation.images) ? (conversation.images as StoredImage[]) : [],
+          createdAt: String(conversation.createdAt || new Date().toISOString()),
+          status:
+            conversation.status === "generating" || conversation.status === "success" || conversation.status === "error"
+              ? conversation.status
+              : "success",
+          error: typeof conversation.error === "string" ? conversation.error : undefined,
+        }),
+      ];
+  const lastTurn = turns.length > 0 ? turns[turns.length - 1] : null;
+
   return {
-    ...conversation,
-    mode: conversation.mode === "edit" ? "edit" : "generate",
-    images: (conversation.images || []).map(normalizeStoredImage),
+    id: String(conversation.id || `${Date.now()}`),
+    title: String(conversation.title || ""),
+    createdAt: String(conversation.createdAt || lastTurn?.createdAt || new Date().toISOString()),
+    updatedAt: String(conversation.updatedAt || lastTurn?.createdAt || new Date().toISOString()),
+    turns,
   };
 }
 
 export async function listImageConversations(): Promise<ImageConversation[]> {
-  const items = (await imageConversationStorage.getItem<ImageConversation[]>(IMAGE_CONVERSATIONS_KEY)) || [];
-  return items.map(normalizeConversation).sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+  const items =
+    (await imageConversationStorage.getItem<Array<ImageConversation & Record<string, unknown>>>(IMAGE_CONVERSATIONS_KEY)) ||
+    [];
+  return items.map(normalizeConversation).sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
 }
 
 export async function saveImageConversation(conversation: ImageConversation): Promise<void> {
   const items = await listImageConversations();
   const nextItems = [normalizeConversation(conversation), ...items.filter((item) => item.id !== conversation.id)];
-  nextItems.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+  nextItems.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
   await imageConversationStorage.setItem(IMAGE_CONVERSATIONS_KEY, nextItems);
 }