dsh-plugin-image-workbench 0.0.0-stage → 1.1.6

package/vendor/chatgpt2api/source/web/src/app/debug/components/chat-panel.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { useState } from "react";
+import { ImagePlus, LoaderCircle, Send, X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { httpRequest } from "@/lib/request";
+
+import { pretty, type ChatCompletionResponse, type ChatContentPart, type ChatMessage } from "./types";
+
+type SelectedImage = {
+  id: string;
+  name: string;
+  size: number;
+  url: string;
+};
+
+const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
+
+function readImage(file: File): Promise<SelectedImage> {
+  return new Promise((resolve, reject) => {
+    if (!file.type.startsWith("image/")) {
+      reject(new Error(`${file.name} 不是图片文件`));
+      return;
+    }
+    if (file.size > MAX_IMAGE_BYTES) {
+      reject(new Error(`${file.name} 超过 10MB`));
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const url = String(reader.result || "");
+      if (!url.startsWith("data:image/")) {
+        reject(new Error(`${file.name} 读取失败`));
+        return;
+      }
+      resolve({
+        id: `${file.name}-${file.size}-${file.lastModified}-${Math.random().toString(16).slice(2)}`,
+        name: file.name,
+        size: file.size,
+        url,
+      });
+    };
+    reader.onerror = () => reject(reader.error || new Error(`${file.name} 读取失败`));
+    reader.readAsDataURL(file);
+  });
+}
+
+function messageText(message: ChatMessage): string {
+  if (typeof message.content === "string") {
+    return message.content;
+  }
+  return message.content
+    .filter((part): part is { type: "text"; text: string } => part.type === "text")
+    .map((part) => part.text)
+    .join("");
+}
+
+function messageImages(message: ChatMessage): string[] {
+  if (!Array.isArray(message.content)) {
+    return [];
+  }
+  return message.content
+    .filter((part): part is { type: "image_url"; image_url: { url: string } } => part.type === "image_url")
+    .map((part) => part.image_url.url);
+}
+
+export function ChatPanel() {
+  const [model, setModel] = useState("auto");
+  const [reasoningEffort, setReasoningEffort] = useState("");
+  const [input, setInput] = useState("你好，先记住我的项目叫 chatgpt2api。");
+  const [selectedImages, setSelectedImages] = useState<SelectedImage[]>([]);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [raw, setRaw] = useState<ChatCompletionResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleImagesChange = async (files: FileList | null) => {
+    if (!files?.length) return;
+    setError("");
+    try {
+      const images = await Promise.all(Array.from(files).map(readImage));
+      setSelectedImages((current) => [...current, ...images].slice(0, 4));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const sendChat = async () => {
+    const text = input.trim();
+    if (!text && !selectedImages.length) return;
+    const content: string | ChatContentPart[] = selectedImages.length
+      ? [
+          ...(text ? [{ type: "text" as const, text }] : []),
+          ...selectedImages.map((image) => ({ type: "image_url" as const, image_url: { url: image.url } })),
+        ]
+      : text;
+    const nextMessages: ChatMessage[] = [...messages, { role: "user", content }];
+    setMessages(nextMessages);
+    setInput("");
+    setSelectedImages([]);
+    setLoading(true);
+    setError("");
+    try {
+      const body = {
+        model: model.trim() || "auto",
+        messages: nextMessages,
+        ...(reasoningEffort ? { reasoning_effort: reasoningEffort } : {}),
+      };
+      const result = await httpRequest<ChatCompletionResponse>("/v1/chat/completions", { method: "POST", body });
+      setRaw(result);
+      setMessages([...nextMessages, { role: "assistant", content: String(result.choices?.[0]?.message?.content || "") }]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearChat = () => {
+    setMessages([]);
+    setSelectedImages([]);
+    setRaw(null);
+    setError("");
+  };
+
+  return (
+    <div className="grid h-full min-h-0 gap-8 lg:grid-cols-[360px_minmax(0,1fr)]">
+      <section className="flex min-h-0 flex-col lg:border-r lg:border-stone-200/70 lg:pr-8 dark:lg:border-white/10">
+        <div className="border-b border-stone-200/70 pb-3 dark:border-white/10">
+          <h2 className="text-sm font-medium text-stone-500 dark:text-stone-400">请求</h2>
+        </div>
+        <div className="min-h-0 flex-1 space-y-4 overflow-auto pt-4">
+          <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_160px]">
+            <div className="space-y-2">
+              <Label htmlFor="chat-model">Model</Label>
+              <Input id="chat-model" value={model} onChange={(event) => setModel(event.target.value)} className="rounded-md border-stone-200/70 bg-transparent shadow-none dark:border-white/10" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="chat-reasoning-effort">思考强度</Label>
+              <Select value={reasoningEffort || "default"} onValueChange={(value) => setReasoningEffort(value === "default" ? "" : value)}>
+                <SelectTrigger id="chat-reasoning-effort" className="h-10 rounded-md border-stone-200/70 bg-transparent shadow-none dark:border-white/10">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">默认</SelectItem>
+                  <SelectItem value="low">低</SelectItem>
+                  <SelectItem value="medium">中</SelectItem>
+                  <SelectItem value="high">高</SelectItem>
+                  <SelectItem value="xhigh">超高</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="chat-input">Message</Label>
+            <Textarea id="chat-input" value={input} onChange={(event) => setInput(event.target.value)} className="min-h-32 rounded-md border-stone-200/70 bg-transparent shadow-none dark:border-white/10" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="chat-images">图片</Label>
+            <label htmlFor="chat-images" className="flex cursor-pointer items-center justify-center gap-2 rounded-md border border-dashed border-stone-300 bg-stone-50/70 px-3 py-3 text-sm text-stone-600 transition hover:border-stone-400 hover:bg-stone-100 dark:border-white/10 dark:bg-white/[0.03] dark:text-stone-300 dark:hover:bg-white/[0.06]">
+              <ImagePlus className="size-4" />
+              选择图片
+            </label>
+            <input id="chat-images" type="file" accept="image/png,image/jpeg,image/webp,image/gif" multiple className="sr-only" onChange={(event) => {
+              void handleImagesChange(event.target.files);
+              event.currentTarget.value = "";
+            }} />
+            {selectedImages.length ? (
+              <div className="grid grid-cols-2 gap-2">
+                {selectedImages.map((image) => (
+                  <div key={image.id} className="group relative overflow-hidden rounded-md border border-stone-200 bg-white dark:border-white/10 dark:bg-white/[0.04]">
+                    <img src={image.url} alt={image.name} className="aspect-square w-full object-cover" />
+                    <button type="button" aria-label={`移除 ${image.name}`} onClick={() => setSelectedImages((current) => current.filter((item) => item.id !== image.id))} className="absolute top-1 right-1 flex size-7 items-center justify-center rounded-md bg-white/90 text-stone-700 shadow-sm transition hover:bg-white dark:bg-stone-950/90 dark:text-stone-100">
+                      <X className="size-4" />
+                    </button>
+                    <div className="absolute inset-x-0 bottom-0 truncate bg-white/90 px-2 py-1 text-xs text-stone-600 dark:bg-stone-950/90 dark:text-stone-300">{image.name}</div>
+                  </div>
+                ))}
+              </div>
+            ) : null}
+          </div>
+          <div className="flex gap-2">
+            <Button size="sm" onClick={() => void sendChat()} disabled={loading || (!input.trim() && !selectedImages.length)}>
+              {loading ? <LoaderCircle className="animate-spin" /> : <Send />}
+              发送
+            </Button>
+            <Button size="sm" variant="outline" onClick={clearChat}>
+              清空
+            </Button>
+          </div>
+          {error ? <div className="rounded-md border border-rose-200 bg-rose-50/60 px-3 py-2 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/20 dark:text-rose-300">{error}</div> : null}
+          <Textarea value={raw ? pretty(raw) : "{\n  \"messages\": []\n}"} readOnly className="min-h-72 resize-none rounded-md border-stone-200/70 bg-stone-50/50 p-4 font-mono text-xs leading-5 text-stone-600 shadow-none dark:border-white/10 dark:bg-white/[0.03] dark:text-stone-300" />
+        </div>
+      </section>
+      <section className="flex min-h-0 flex-col">
+        <div className="border-b border-stone-200/70 pb-3 dark:border-white/10">
+          <h2 className="text-sm font-medium text-stone-500 dark:text-stone-400">对话</h2>
+        </div>
+        <div className="min-h-0 flex-1 space-y-4 overflow-auto pt-4">
+          {messages.length ? messages.map((message, index) => (
+            <div key={`${message.role}-${index}`} className="space-y-1.5 text-sm">
+              <div className="text-xs font-medium uppercase tracking-wide text-stone-400 dark:text-stone-500">{message.role}</div>
+              {messageImages(message).length ? (
+                <div className="flex flex-wrap gap-2">
+                  {messageImages(message).map((url, imageIndex) => (
+                    <img key={`${index}-${imageIndex}`} src={url} alt="" className="h-28 w-28 rounded-md border border-stone-200 object-cover dark:border-white/10" />
+                  ))}
+                </div>
+              ) : null}
+              {messageText(message) ? <div className="whitespace-pre-wrap leading-7 text-stone-700 dark:text-stone-300">{messageText(message)}</div> : null}
+            </div>
+          )) : (
+            <div className="flex h-full items-center justify-center text-sm text-stone-400 dark:text-stone-500">暂无对话消息</div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}

package/vendor/chatgpt2api/source/web/src/app/debug/components/editable-file-panel.tsx

@@ -0,0 +1,444 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { AlertCircle, CheckCircle2, Clock3, FileArchive, FileText, History, ImagePlus, LoaderCircle, Pencil, Play, Plus, RefreshCw, Trash2, XCircle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { httpRequest } from "@/lib/request";
+import { cn } from "@/lib/utils";
+import {
+  listDeletedEditableFileIds,
+  listEditableFileDrafts,
+  saveDeletedEditableFileIds,
+  saveEditableFileDrafts,
+  type EditableFileDraft,
+} from "@/store/editable-file-history";
+
+import type { EditableFileTask } from "./types";
+
+type Props = {
+  title: string;
+  kind: "ppt" | "psd";
+  endpoint: string;
+  defaultPrompt: string;
+  imageRequired?: boolean;
+};
+
+const MAX_HISTORY = 20;
+const DRAFT_ID = "__draft__";
+const taskIdOf = (task: EditableFileTask | null | undefined) => task?.taskId || task?.id || "";
+const isRunning = (task: EditableFileTask | null | undefined) => task?.status === "queued" || task?.status === "running";
+const statusText = (status: string) => ({ queued: "排队中", running: "生成中", success: "已完成", error: "失败" }[status] || status);
+const statusClass = (status: string) => status === "success" ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/20 dark:text-emerald-300" : status === "error" ? "border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/20 dark:text-rose-300" : "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-300";
+const formatElapsed = (seconds: number) => `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, "0")}s`;
+const titleOfPrompt = (prompt: string, fallback: string) => prompt.trim().replace(/\s+/g, " ").slice(0, 24) || fallback;
+const createClientTaskId = () => `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+
+const readFile = (file: File) => new Promise<string>((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(String(reader.result || ""));
+  reader.onerror = () => reject(reader.error);
+  reader.readAsDataURL(file);
+});
+
+const mergeTasks = (current: EditableFileTask[], updates: EditableFileTask[]) => {
+  const next = [...current];
+  for (const update of updates) {
+    const id = taskIdOf(update);
+    if (!id) continue;
+    const index = next.findIndex((item) => taskIdOf(item) === id);
+    const merged = { ...(index >= 0 ? next[index] : {}), ...update, polled_at: Date.now() };
+    if (index >= 0) next[index] = merged;
+    else next.unshift(merged);
+  }
+  return next.slice(0, MAX_HISTORY);
+};
+
+const removeTasks = (current: EditableFileTask[], ids: string[]) => {
+  const missing = new Set(ids);
+  return missing.size ? current.filter((task) => !missing.has(taskIdOf(task))) : current;
+};
+
+const fileNameOf = (url: string) => {
+  try {
+    return decodeURIComponent(new URL(url).pathname.split("/").pop() || "");
+  } catch {
+    return decodeURIComponent(url.split("/").pop() || "");
+  }
+};
+
+function ResultFile({ href, icon, label }: { href?: string; icon: ReactNode; label: string }) {
+  if (!href) return null;
+  return (
+    <div className="flex items-center gap-3 rounded-md border border-stone-200 bg-stone-50/80 px-3 py-3 dark:border-white/10 dark:bg-white/[0.04]">
+      <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-white text-stone-700 shadow-sm dark:bg-white/10 dark:text-stone-200">
+        {icon}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="text-sm font-semibold text-stone-950 dark:text-stone-50">{label}</div>
+        <div className="truncate text-xs text-stone-500 dark:text-stone-400">{fileNameOf(href)}</div>
+      </div>
+      <Button size="sm" asChild>
+        <a href={href} target="_blank" rel="noreferrer">下载</a>
+      </Button>
+    </div>
+  );
+}
+
+export function EditableFilePanel({ title, kind, endpoint, defaultPrompt, imageRequired }: Props) {
+  const [prompt, setPrompt] = useState(defaultPrompt);
+  const [images, setImages] = useState<string[]>([]);
+  const [tasks, setTasks] = useState<EditableFileTask[]>([]);
+  const [selectedId, setSelectedId] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [polling, setPolling] = useState(false);
+  const [error, setError] = useState("");
+  const [now, setNow] = useState(Date.now());
+  const [drafts, setDrafts] = useState<Record<string, EditableFileDraft>>({});
+  const [deletedIds, setDeletedIds] = useState<Set<string>>(new Set());
+  const [renamingId, setRenamingId] = useState("");
+  const [renamingTitle, setRenamingTitle] = useState("");
+  const [deleteConfirm, setDeleteConfirm] = useState<{ type: "one"; id: string } | { type: "all"; ids: string[] } | null>(null);
+  const visibleTasks = useMemo(() => tasks.filter((task) => task.kind === kind && !deletedIds.has(taskIdOf(task))).slice(0, MAX_HISTORY), [deletedIds, kind, tasks]);
+  const selectedTask = selectedId === DRAFT_ID ? null : visibleTasks.find((task) => taskIdOf(task) === selectedId) || visibleTasks[0] || null;
+  const running = visibleTasks.some(isRunning);
+  const runningIds = visibleTasks.filter(isRunning).map(taskIdOf).join(",");
+
+  const elapsedOf = (task: EditableFileTask | null | undefined) => {
+    if (!task) return 0;
+    const base = Math.max(0, Number(task.elapsed_seconds || 0));
+    return Math.max(0, isRunning(task) && task.polled_at ? base + Math.floor((now - task.polled_at) / 1000) : base);
+  };
+
+  const fetchTasks = useCallback(async (ids: string[] = []) => {
+    const taskIds = Array.from(new Set(ids.filter(Boolean))).slice(0, MAX_HISTORY);
+    setPolling(true);
+    try {
+      const path = taskIds.length ? `/v1/editable-file-tasks?ids=${taskIds.map(encodeURIComponent).join(",")}` : "/v1/editable-file-tasks";
+      const result = await httpRequest<{ items: EditableFileTask[]; missing_ids?: string[] }>(path);
+      const missingIds = result.missing_ids || [];
+      const hidden = await listDeletedEditableFileIds(kind);
+      setTasks((current) => (taskIds.length ? mergeTasks(removeTasks(current, missingIds), result.items || []) : (result.items || [])).filter((task) => !hidden.has(taskIdOf(task))));
+      setSelectedId((current) => missingIds.includes(current) ? "" : current);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setPolling(false);
+    }
+  }, [kind]);
+
+  useEffect(() => {
+    void listEditableFileDrafts(kind).then(setDrafts);
+    void listDeletedEditableFileIds(kind).then(setDeletedIds);
+    void fetchTasks();
+  }, [fetchTasks, kind]);
+
+  useEffect(() => {
+    if (selectedId === DRAFT_ID) return;
+    const draft = drafts[selectedId];
+    const task = visibleTasks.find((item) => taskIdOf(item) === selectedId);
+    setPrompt(draft?.prompt || task?.prompt_preview || defaultPrompt);
+    setImages(Array.isArray(draft?.images) ? draft.images : []);
+  }, [defaultPrompt, drafts, selectedId, visibleTasks]);
+
+  useEffect(() => {
+    if (selectedId === DRAFT_ID) return;
+    if (visibleTasks.length && (!selectedId || !visibleTasks.some((task) => taskIdOf(task) === selectedId))) setSelectedId(taskIdOf(visibleTasks[0]));
+    if (!visibleTasks.length && selectedId) setSelectedId("");
+  }, [selectedId, visibleTasks]);
+
+  useEffect(() => {
+    if (!running) return;
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, [running]);
+
+  useEffect(() => {
+    const ids = runningIds.split(",").filter(Boolean);
+    if (!ids.length) return;
+    const timer = window.setInterval(() => void fetchTasks(ids), 5000);
+    return () => window.clearInterval(timer);
+  }, [fetchTasks, runningIds]);
+
+  const appendFiles = async (files: FileList | null) => {
+    if (!files?.length) return;
+    const values = await Promise.all(Array.from(files).map(readFile));
+    setImages((current) => [...current, ...values]);
+  };
+
+  const persistDrafts = (updater: (current: Record<string, EditableFileDraft>) => Record<string, EditableFileDraft>) => {
+    setDrafts((current) => {
+      const next = updater(current);
+      void saveEditableFileDrafts(kind, next);
+      return next;
+    });
+  };
+
+  const createDraft = () => {
+    setError("");
+    setSelectedId(DRAFT_ID);
+    setPrompt(defaultPrompt);
+    setImages([]);
+  };
+
+  const renameTask = (id: string, title: string) => {
+    const trimmed = title.trim();
+    if (!id || !trimmed) return;
+    persistDrafts((current) => ({ ...current, [id]: { ...(current[id] || {}), title: trimmed } }));
+  };
+
+  const deleteTask = (id: string) => {
+    if (!id) return;
+    const nextDeleted = new Set(deletedIds);
+    nextDeleted.add(id);
+    void saveDeletedEditableFileIds(kind, nextDeleted);
+    setDeletedIds(nextDeleted);
+    setTasks((current) => current.filter((task) => taskIdOf(task) !== id));
+    persistDrafts((current) => {
+      const next = { ...current };
+      delete next[id];
+      return next;
+    });
+    if (selectedId === id) setSelectedId("");
+  };
+
+  const clearHistory = () => {
+    const ids = deleteConfirm?.type === "all" ? deleteConfirm.ids : tasks.filter((task) => task.kind === kind).map(taskIdOf).filter(Boolean);
+    if (!ids.length) return;
+    const nextDeleted = new Set([...deletedIds, ...ids]);
+    void saveDeletedEditableFileIds(kind, nextDeleted);
+    setDeletedIds(nextDeleted);
+    setTasks((current) => current.filter((task) => task.kind !== kind || !ids.includes(taskIdOf(task))));
+    persistDrafts((current) => {
+      const next = { ...current };
+      ids.forEach((id) => delete next[id]);
+      return next;
+    });
+    setSelectedId("");
+  };
+
+  const confirmDelete = () => {
+    if (!deleteConfirm) return;
+    if (deleteConfirm.type === "one") deleteTask(deleteConfirm.id);
+    else clearHistory();
+    setDeleteConfirm(null);
+  };
+
+  const submit = async () => {
+    setError("");
+    setSubmitting(true);
+    try {
+      const base64_images = images;
+      if (imageRequired && !base64_images.length) throw new Error("base64_images is empty");
+      const task = await httpRequest<EditableFileTask>(endpoint, { method: "POST", body: { client_task_id: createClientTaskId(), prompt, base64_images } });
+      const polledAt = Date.now();
+      const id = taskIdOf(task);
+      const draft = { prompt: prompt.trim(), images: base64_images, title: titleOfPrompt(prompt, title) };
+      const nextTask = { ...task, prompt_preview: draft.prompt, polled_at: polledAt };
+      setNow(polledAt);
+      persistDrafts((current) => ({ ...current, [id]: draft }));
+      setTasks((current) => mergeTasks(current.filter((item) => taskIdOf(item) !== taskIdOf(nextTask)), [nextTask]));
+      setSelectedId(id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const refreshAll = () => void fetchTasks();
+  const selectTask = (id: string) => {
+    setRenamingId("");
+    setSelectedId(id);
+    const draft = drafts[id];
+    const task = visibleTasks.find((item) => taskIdOf(item) === id);
+    setPrompt(draft?.prompt || task?.prompt_preview || defaultPrompt);
+    setImages(Array.isArray(draft?.images) ? draft.images : []);
+  };
+  const startRename = (id: string) => {
+    setRenamingId(id);
+    setRenamingTitle(drafts[id]?.title || titleOfPrompt(drafts[id]?.prompt || "", `${kind.toUpperCase()} 任务`));
+  };
+  const commitRename = () => {
+    renameTask(renamingId, renamingTitle);
+    setRenamingId("");
+    setRenamingTitle("");
+  };
+
+  return (
+    <>
+    <div className="grid h-full min-h-[calc(100vh-148px)] overflow-hidden rounded-lg border border-stone-200 bg-white shadow-sm dark:border-white/10 dark:bg-stone-950 lg:grid-cols-[288px_420px_minmax(0,1fr)]">
+      <aside className="flex min-h-0 flex-col border-b border-stone-200 bg-stone-50/70 dark:border-white/10 dark:bg-white/[0.02] lg:border-r lg:border-b-0">
+        <div className="flex h-14 items-center justify-between border-b border-stone-200 px-4 dark:border-white/10">
+          <div className="flex items-center gap-2 text-sm font-semibold text-stone-950 dark:text-stone-50">
+            <History className="size-4" />
+            历史记录
+          </div>
+          <div className="flex gap-1">
+            <Button size="sm" variant="ghost" onClick={createDraft}>
+              <Plus />
+            </Button>
+            <Button size="sm" variant="ghost" onClick={refreshAll} disabled={polling}>
+              {polling ? <LoaderCircle className="animate-spin" /> : <RefreshCw />}
+            </Button>
+            <Button size="sm" variant="ghost" onClick={() => setDeleteConfirm({ type: "all", ids: tasks.filter((task) => task.kind === kind).map(taskIdOf).filter(Boolean) })} disabled={!visibleTasks.length}>
+              <Trash2 />
+            </Button>
+          </div>
+        </div>
+        <div className="min-h-0 flex-1 overflow-auto p-2">
+          {visibleTasks.length ? visibleTasks.map((task) => {
+            const id = taskIdOf(task);
+            const taskTitle = drafts[id]?.title || titleOfPrompt(task.prompt_preview || drafts[id]?.prompt || "", task.kind?.toUpperCase() || title);
+            return (
+              <div key={id} className={cn("group mb-2 rounded-md border px-3 py-2.5 transition", selectedId === id ? "border-stone-950 bg-white shadow-sm dark:border-white/60 dark:bg-white/10" : "border-transparent bg-transparent hover:border-stone-200 hover:bg-white dark:hover:border-white/10 dark:hover:bg-white/[0.05]")}>
+                <div className="flex items-start gap-2">
+                  <button type="button" onClick={() => selectTask(id)} className="min-w-0 flex-1 text-left">
+                    <div className="flex min-w-0 items-center justify-between gap-2">
+                      {renamingId === id ? (
+                        <input
+                          value={renamingTitle}
+                          onChange={(event) => setRenamingTitle(event.target.value)}
+                          onBlur={commitRename}
+                          onKeyDown={(event) => {
+                            if (event.key === "Enter") commitRename();
+                            if (event.key === "Escape") setRenamingId("");
+                          }}
+                          onClick={(event) => event.stopPropagation()}
+                          className="min-w-0 flex-1 rounded border border-stone-300 bg-white px-2 py-1 text-sm font-semibold outline-none focus:border-stone-500 dark:border-white/15 dark:bg-stone-950"
+                          autoFocus
+                        />
+                      ) : (
+                        <span className="truncate text-sm font-semibold text-stone-950 dark:text-stone-50">{taskTitle}</span>
+                      )}
+                      <span className={cn("shrink-0 rounded-full border px-2 py-0.5 text-[11px]", statusClass(task.status))}>{statusText(task.status)}</span>
+                    </div>
+                    <div className="mt-2 flex items-center gap-2 text-xs text-stone-500 dark:text-stone-400">
+                      <Clock3 className="size-3.5" />
+                      <span className="tabular-nums">{formatElapsed(elapsedOf(task))}</span>
+                      <span className="truncate">{task.created_at || id}</span>
+                    </div>
+                    {(task.prompt_preview || drafts[id]?.prompt) ? <div className="mt-2 line-clamp-2 text-xs leading-5 text-stone-500 dark:text-stone-400">{task.prompt_preview || drafts[id]?.prompt}</div> : null}
+                  </button>
+                  <div className="flex shrink-0 opacity-100 sm:opacity-0 sm:transition sm:group-hover:opacity-100">
+                    <Button size="sm" variant="ghost" onClick={() => startRename(id)} className="size-7 px-0">
+                      <Pencil className="size-3.5" />
+                    </Button>
+                    <Button size="sm" variant="ghost" onClick={() => setDeleteConfirm({ type: "one", id })} className="size-7 px-0 text-stone-400 hover:text-rose-500">
+                      <Trash2 className="size-3.5" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            );
+          }) : (
+            <div className="flex h-full items-center justify-center text-sm text-stone-400 dark:text-stone-500">暂无记录</div>
+          )}
+        </div>
+      </aside>
+
+      <section className="flex min-h-0 flex-col border-b border-stone-200 dark:border-white/10 lg:border-r lg:border-b-0">
+        <div className="flex h-14 items-center justify-between border-b border-stone-200 px-5 dark:border-white/10">
+          <h2 className="text-sm font-semibold text-stone-950 dark:text-stone-50">{title}</h2>
+          <Button size="sm" onClick={() => void submit()} disabled={submitting || running}>
+            {submitting ? <LoaderCircle className="animate-spin" /> : <Play />}
+            生成
+          </Button>
+        </div>
+        <div className="min-h-0 flex-1 space-y-5 overflow-auto p-5">
+          <div className="space-y-2">
+            <Label htmlFor={`${endpoint}-prompt`} className="text-xs font-semibold text-stone-700 dark:text-stone-300">需求</Label>
+            <Textarea id={`${endpoint}-prompt`} value={prompt} onChange={(event) => setPrompt(event.target.value)} className="min-h-56 rounded-md border-stone-200 bg-white text-sm leading-6 shadow-none dark:border-white/10 dark:bg-white/[0.03]" />
+          </div>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs font-semibold text-stone-700 dark:text-stone-300">参考图</Label>
+              <span className="rounded-full bg-stone-100 px-2 py-0.5 text-xs text-stone-500 dark:bg-white/10 dark:text-stone-400">{images.length}</span>
+            </div>
+            <label className="group flex h-24 cursor-pointer items-center justify-center gap-2 rounded-md border border-dashed border-stone-300 bg-stone-50 text-sm font-medium text-stone-600 transition hover:border-stone-950 hover:bg-white dark:border-white/15 dark:bg-white/[0.03] dark:text-stone-300 dark:hover:border-white/50">
+              <ImagePlus className="size-4 transition group-hover:scale-110" />
+              上传图片
+              <Input type="file" accept="image/*" multiple onChange={(event) => void appendFiles(event.target.files)} className="hidden" />
+            </label>
+            {images.length ? (
+              <div className="grid grid-cols-4 gap-2">
+                {images.slice(0, 8).map((src, index) => (
+                  <img key={`${src.slice(0, 28)}-${index}`} src={src} alt="" className="aspect-square rounded-md border border-stone-200 object-cover dark:border-white/10" />
+                ))}
+              </div>
+            ) : null}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button size="sm" variant="outline" onClick={() => setImages([])}>
+              <Trash2 />
+              清空图片
+            </Button>
+          </div>
+          {error ? <div className="flex gap-2 rounded-md border border-rose-200 bg-rose-50/70 px-3 py-2 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/20 dark:text-rose-300"><AlertCircle className="mt-0.5 size-4 shrink-0" />{error}</div> : null}
+        </div>
+      </section>
+
+      <section className="flex min-h-0 flex-col">
+        <div className="flex h-14 items-center justify-between border-b border-stone-200 px-5 dark:border-white/10">
+          <h2 className="text-sm font-semibold text-stone-950 dark:text-stone-50">生成状态</h2>
+          {selectedTask ? <span className={cn("rounded-full border px-2.5 py-1 text-xs", statusClass(selectedTask.status))}>{statusText(selectedTask.status)}</span> : null}
+        </div>
+        <div className="min-h-0 flex-1 overflow-auto p-5">
+          {selectedTask ? (
+            <div className="space-y-5">
+              <div className="grid gap-3 sm:grid-cols-[150px_150px_minmax(0,1fr)]">
+                <div className="rounded-md border border-stone-200 bg-stone-50 p-4 dark:border-white/10 dark:bg-white/[0.03]">
+                  <div className="text-xs text-stone-500 dark:text-stone-400">状态</div>
+                  <div className="mt-2 flex items-center gap-2 text-sm font-semibold text-stone-950 dark:text-stone-50">
+                    {selectedTask.status === "success" ? <CheckCircle2 className="size-4 text-emerald-500" /> : selectedTask.status === "error" ? <XCircle className="size-4 text-rose-500" /> : <LoaderCircle className="size-4 animate-spin text-amber-500" />}
+                    {statusText(selectedTask.status)}
+                  </div>
+                </div>
+                <div className="rounded-md border border-stone-200 bg-stone-50 p-4 dark:border-white/10 dark:bg-white/[0.03]">
+                  <div className="text-xs text-stone-500 dark:text-stone-400">已执行</div>
+                  <div className="mt-2 text-2xl font-semibold tabular-nums text-stone-950 dark:text-stone-50">{formatElapsed(elapsedOf(selectedTask))}</div>
+                </div>
+                <div className="rounded-md border border-stone-200 bg-stone-50 p-4 dark:border-white/10 dark:bg-white/[0.03]">
+                  <div className="text-xs text-stone-500 dark:text-stone-400">Task ID</div>
+                  <div className="mt-2 truncate font-mono text-xs text-stone-700 dark:text-stone-300">{taskIdOf(selectedTask)}</div>
+                </div>
+              </div>
+
+              {selectedTask.result ? (
+                <div className="space-y-3 rounded-md border border-stone-200 bg-white p-4 dark:border-white/10 dark:bg-white/[0.03]">
+                  <div className="text-sm font-semibold text-stone-950 dark:text-stone-50">生成结果</div>
+                  <ResultFile href={selectedTask.result.primary_url} icon={<FileText className="size-4" />} label={kind === "ppt" ? "PPT 文件" : "PSD 文件"} />
+                  <ResultFile href={selectedTask.result.zip_url} icon={<FileArchive className="size-4" />} label="素材包" />
+                </div>
+              ) : null}
+
+              {selectedTask.error ? <div className="rounded-md border border-rose-200 bg-rose-50/70 px-3 py-2 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/20 dark:text-rose-300">{selectedTask.error}</div> : null}
+            </div>
+          ) : (
+            <div className="flex h-full min-h-80 items-center justify-center text-sm text-stone-400 dark:text-stone-500">暂无任务</div>
+          )}
+        </div>
+      </section>
+    </div>
+    <Dialog open={!!deleteConfirm} onOpenChange={(open) => !open && setDeleteConfirm(null)}>
+      <DialogContent className="rounded-xl" showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>{deleteConfirm?.type === "all" ? "清空历史记录" : "删除历史记录"}</DialogTitle>
+          <DialogDescription>
+            {deleteConfirm?.type === "all" ? "确认清空当前类型的历史记录吗？" : "确认删除这条历史记录吗？"}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setDeleteConfirm(null)}>取消</Button>
+          <Button variant="destructive" onClick={confirmDelete}>确认删除</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+    </>
+  );
+}