@allbluecn/web-app 0.6.2 → 0.7.0

package/src/plugins/core/prd/components/page-version-panel.tsx

@@ -0,0 +1,1100 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui-shared/button";
+import { Input } from "@/components/ui-shared/input";
+import { Skeleton } from "@/components/ui-shared/skeleton";
+import { Checkbox } from "@/components/ui-shared/checkbox";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui-shared/tooltip";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui-shared/select";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui-shared/alert-dialog";
+import { PageVersionTree, type VersionSnapshot } from "./page-version-tree";
+import { executeRestoreVersion } from "@/plugins/core/prd/lib/restore-version";
+import { RestoreVersionDialog } from "./restore-version-dialog";
+import {
+  RefreshCw,
+  Folder,
+  File,
+  ChevronRight,
+  Plus,
+  Pencil,
+  RotateCcw,
+  Trash2,
+} from "lucide-react";
+import { cn } from "@/components/ui-shared/utils";
+import { buildTree, TreeNode, PRDPage } from "@/lib/prd-tree-utils";
+import { type PRDVersionWithSemver as PRDVersion } from "@allbluecn/shared";
+import { SUBTABS } from "./page-version-panel/constants";
+import { PageVersionPanelProps, type PageVersion } from "./page-version-panel/types";
+import { CreateVersionDialog } from "./page-version-panel/components/create-version-dialog";
+import { EditVersionDialog } from "./page-version-panel/components/edit-version-dialog";
+import { DeleteVersionDialog } from "./page-version-panel/components/delete-version-dialog";
+import { listPrdPagesFn } from "../serverFns/pages";
+import { listPrdVersionsFn, createPrdVersionFn } from "../serverFns/versions";
+import { listPrdPageVersionsFn, getPrdPageVersionFn, createPrdPageVersionFn, updatePrdPageVersionFn, deletePrdPageVersionFn } from "../serverFns/page-versions";
+import { formatDate } from "@/lib/datetime";
+import { useTimezone } from "@/components/ui-shared/timezone-provider";
+
+export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
+  const { t } = useTranslation(["prd", "common"]);
+  const [pages, setPages] = useState<PRDPage[]>([]);
+  const [tree, setTree] = useState<TreeNode[]>([]);
+  const [versions, setVersions] = useState<PRDVersion[]>([]);
+  const [selectedPageIds, setSelectedPageIds] = useState<Set<string>>(new Set());
+  const [selectedRestored, setSelectedRestored] = useState(false);
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+  const [pagesLoading, setPagesLoading] = useState(true);
+  const [versionsLoading, setVersionsLoading] = useState(true);
+  const [pagesError, setPagesError] = useState("");
+  const [versionsError, setVersionsError] = useState("");
+  const [syncing, setSyncing] = useState(false);
+  const [major, setMajor] = useState("0");
+  const [minor, setMinor] = useState("1");
+  const [patch, setPatch] = useState("0");
+  const [notes, setNotes] = useState("");
+  const timezone = useTimezone();
+
+  const [pageVersions, setPageVersions] = useState<PageVersion[]>([]);
+  const [pageVersionsLoading, setPageVersionsLoading] = useState(false);
+  const [pageVersionsError, setPageVersionsError] = useState("");
+  const [creatingPageVersion, setCreatingPageVersion] = useState(false);
+
+  const latestPageIdRef = useRef<string | null>(null);
+
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [createDialogNotes, setCreateDialogNotes] = useState("");
+
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [editDialogVersionId, setEditDialogVersionId] = useState<string | null>(null);
+  const [editDialogNotes, setEditDialogNotes] = useState("");
+
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [deleteVersionId, setDeleteVersionId] = useState<string | null>(null);
+
+  const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false);
+  const [restoreLoading, setRestoreLoading] = useState(false);
+  const [restoreData, setRestoreData] = useState<{
+    pageId: string;
+    targetVersionNo: number;
+    targetCanvas: any;
+    targetContent: any;
+    currentVersionNo: number;
+  } | null>(null);
+
+  const [previewVersionId, setPreviewVersionId] = useState<string | null>(null);
+  const [expandedNotesId, setExpandedNotesId] = useState<string | null>(null);
+  const [selectedPageVersionNo, setSelectedPageVersionNo] = useState<Map<string, number>>(new Map());
+  const [allPageVersionsByPage, setAllPageVersionsByPage] = useState<Map<string, { version: number; notes: string | null; createdAt: string }[]>>(new Map());
+
+  useEffect(() => {
+    const nodeIdsWithChildren = new Set<string>();
+    const walk = (nodes: TreeNode[]) => {
+      for (const node of nodes) {
+        if (node.children.length > 0) nodeIdsWithChildren.add(node.id);
+        walk(node.children);
+      }
+    };
+    walk(tree);
+    setExpandedNodes((prev) => {
+      let hasNew = false;
+      for (const id of nodeIdsWithChildren) {
+        if (!prev.has(id)) {
+          hasNew = true;
+          break;
+        }
+      }
+      if (!hasNew) return prev;
+      const next = new Set(prev);
+      for (const id of nodeIdsWithChildren) next.add(id);
+      return next;
+    });
+  }, [tree]);
+
+  const getAllPageIds = useCallback((nodes: TreeNode[]): string[] => {
+    const ids: string[] = [];
+    const walk = (ns: TreeNode[]) => {
+      for (const n of ns) {
+        if (n.type === "page") ids.push(n.id);
+        walk(n.children);
+      }
+    };
+    walk(nodes);
+    return ids;
+  }, []);
+
+  const loadPages = useCallback((isSync: boolean = false) => {
+    if (!isSync) {
+      setPagesLoading(true);
+    }
+    setPagesError("");
+    setSyncing(true);
+    listPrdPagesFn({ data: { prdId } })
+      .then((data) => {
+        const pages = data as PRDPage[];
+        setPages(pages);
+        setTree(buildTree(pages));
+        setPagesLoading(false);
+        setSyncing(false);
+      })
+      .catch((err) => {
+        setPagesError(err.message);
+        setPagesLoading(false);
+        setSyncing(false);
+      });
+  }, [prdId]);
+
+  const createPageVersion = useCallback(async () => {
+    if (!pageId) return;
+    setCreatingPageVersion(true);
+    try {
+      const newVersion = await createPrdPageVersionFn({
+        data: {
+          pageId,
+          notes: createDialogNotes || undefined,
+        },
+      });
+      setPageVersions((prev) => [{ ...newVersion, createdAt: newVersion.createdAt.toISOString() }, ...prev]);
+      setCreateDialogOpen(false);
+      setCreateDialogNotes("");
+    } finally {
+      setCreatingPageVersion(false);
+    }
+  }, [pageId, createDialogNotes]);
+
+  const updatePageVersionNotes = useCallback(async () => {
+    if (!editDialogVersionId) return;
+    try {
+      const updated = await updatePrdPageVersionFn({
+        data: { pageVersionId: editDialogVersionId, notes: editDialogNotes || undefined },
+      });
+      setPageVersions((prev) => prev.map((v) => (v.id === updated.id ? { ...updated, createdAt: updated.createdAt.toISOString() } : v)));
+      setEditDialogOpen(false);
+      setEditDialogVersionId(null);
+      setEditDialogNotes("");
+    } catch {
+      // silent
+    }
+  }, [editDialogVersionId, editDialogNotes]);
+
+  const deletePageVersion = useCallback(async () => {
+    if (!deleteVersionId) return;
+    try {
+      await deletePrdPageVersionFn({ data: { pageVersionId: deleteVersionId } });
+      setPageVersions((prev) => prev.filter((v) => v.id !== deleteVersionId));
+      setDeleteConfirmOpen(false);
+      setDeleteVersionId(null);
+    } catch {
+      // silent
+    }
+  }, [deleteVersionId]);
+
+  const restorePageVersion = useCallback(
+    async (versionId: string) => {
+      const pv = await getPrdPageVersionFn({ data: { pageVersionId: versionId } });
+
+      const currentVersionNo = pageVersions[0]?.version ?? 0;
+      setRestoreData({
+        pageId: pv.pageId,
+        targetVersionNo: pv.version,
+        targetCanvas: pv.canvas,
+        targetContent: pv.content,
+        currentVersionNo,
+      });
+      setRestoreConfirmOpen(true);
+    },
+    [pageVersions]
+  );
+
+  const confirmRestore = useCallback(async () => {
+    if (!restoreData) return;
+    setRestoreLoading(true);
+    try {
+      await executeRestoreVersion(
+        restoreData.pageId,
+        restoreData.targetVersionNo,
+        restoreData.targetCanvas,
+        restoreData.targetContent,
+      );
+      setRestoreConfirmOpen(false);
+      setRestoreData(null);
+      listPrdPageVersionsFn({ data: { pageId: restoreData.pageId } })
+        .then((data) => setPageVersions(data.map((v) => ({ ...v, createdAt: v.createdAt.toISOString() }))));
+    } catch {
+      // silent
+    } finally {
+      setRestoreLoading(false);
+    }
+  }, [restoreData]);
+
+  const previewVersion = useCallback(async (versionId: string) => {
+    const isLatest = pageVersions.length > 0 && pageVersions[0].id === versionId;
+
+    if (previewVersionId === versionId || isLatest) {
+      setPreviewVersionId(null);
+      window.dispatchEvent(new CustomEvent("page-version-preview-end"));
+      return;
+    }
+
+    const pv = await getPrdPageVersionFn({ data: { pageVersionId: versionId } });
+    setPreviewVersionId(versionId);
+    window.dispatchEvent(new CustomEvent("page-version-preview", {
+      detail: { versionId, canvas: pv.canvas, content: pv.content },
+    }));
+  }, [previewVersionId, pageVersions]);
+
+  useEffect(() => {
+    loadPages();
+
+    // Restore selectedPageIds from localStorage
+    const stored = localStorage.getItem(`selectedPages_${prdId}`);
+    if (stored) {
+      try {
+        const ids = JSON.parse(stored);
+        if (Array.isArray(ids) && ids.length > 0) {
+          setSelectedPageIds(new Set(ids));
+        }
+      } catch { /* ignore */ }
+    }
+    setSelectedRestored(true);
+
+    setVersionsLoading(true);
+    setVersionsError("");
+    listPrdVersionsFn({ data: { prdId } })
+      .then((data) => {
+        const mapped = data.map((v) => ({ ...v, createdAt: v.createdAt.toISOString(), updatedAt: v.updatedAt?.toISOString() ?? null }));
+        setVersions(mapped);
+        setVersionsLoading(false);
+        if (mapped.length > 0) {
+          const sorted = [...mapped].sort((a, b) => {
+            if (a.major !== b.major) return b.major - a.major;
+            if (a.minor !== b.minor) return b.minor - a.minor;
+            return b.patch - a.patch;
+          });
+          const latest = sorted[0];
+          let nextPatch = latest.patch + 1;
+          let nextMinor = latest.minor;
+          let nextMajor = latest.major;
+          if (nextPatch > 99) { nextPatch = 0; nextMinor += 1; }
+          if (nextMinor > 99) { nextMinor = 0; nextMajor += 1; }
+          setMajor(String(nextMajor));
+          setMinor(String(nextMinor));
+          setPatch(String(nextPatch));
+        }
+      })
+      .catch((err) => {
+        setVersionsError(err.message);
+        setVersionsLoading(false);
+      });
+  }, [prdId, loadPages]);
+
+  useEffect(() => {
+    if (selectedRestored) {
+      localStorage.setItem(`selectedPages_${prdId}`, JSON.stringify(Array.from(selectedPageIds)));
+    }
+  }, [prdId, selectedPageIds, selectedRestored]);
+
+  useEffect(() => {
+    if (pageId) {
+      setPreviewVersionId(null);
+      latestPageIdRef.current = pageId;
+      setPageVersions([]);
+      setPageVersionsLoading(true);
+      setPageVersionsError("");
+
+      listPrdPageVersionsFn({ data: { pageId } })
+        .then((data) => {
+          if (latestPageIdRef.current === pageId) {
+            setPageVersions(data.map((v) => ({ ...v, createdAt: v.createdAt.toISOString() })));
+            setPageVersionsLoading(false);
+          }
+        })
+        .catch((err) => {
+          if (latestPageIdRef.current === pageId) {
+            setPageVersionsError(err.message);
+            setPageVersionsLoading(false);
+          }
+        });
+    } else {
+      latestPageIdRef.current = null;
+      setPageVersions([]);
+      setPageVersionsLoading(false);
+      setPageVersionsError("");
+    }
+  }, [pageId]);
+
+  const toggleNode = useCallback((id: string) => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const getDescendantPageIds = useCallback((node: TreeNode): string[] => {
+    const ids: string[] = [];
+    const walk = (n: TreeNode) => {
+      if (n.type === "page") ids.push(n.id);
+      n.children.forEach(walk);
+    };
+    walk(node);
+    return ids;
+  }, []);
+
+  const togglePage = useCallback(
+    (id: string, node?: TreeNode) => {
+      setSelectedPageIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) {
+          next.delete(id);
+          if (node?.type === "folder") {
+            getDescendantPageIds(node).forEach((cid) => next.delete(cid));
+          }
+        } else {
+          next.add(id);
+          if (node?.type === "folder") {
+            getDescendantPageIds(node).forEach((cid) => next.add(cid));
+          }
+        }
+        return next;
+      });
+    },
+    [getDescendantPageIds]
+  );
+
+  const isFolderIndeterminate = useCallback(
+    (node: TreeNode): boolean => {
+      const childPageIds = getDescendantPageIds(node);
+      if (childPageIds.length === 0) return false;
+      const selectedCount = childPageIds.filter((id) => selectedPageIds.has(id)).length;
+      return selectedCount > 0 && selectedCount < childPageIds.length;
+    },
+    [selectedPageIds, getDescendantPageIds]
+  );
+
+  const isFolderAllSelected = useCallback(
+    (node: TreeNode): boolean => {
+      const childPageIds = getDescendantPageIds(node);
+      if (childPageIds.length === 0) return selectedPageIds.has(node.id);
+      return childPageIds.every((id) => selectedPageIds.has(id));
+    },
+    [selectedPageIds, getDescendantPageIds]
+  );
+
+  const [confirmUpdateOpen, setConfirmUpdateOpen] = useState(false);
+  const [confirmSkipOpen, setConfirmSkipOpen] = useState(false);
+  const [isUpdateMode, setIsUpdateMode] = useState(false);
+  const [versionTooLow, setVersionTooLow] = useState(false);
+  const [skipVersionInfo, setSkipVersionInfo] = useState<{ current: string; previous: string } | null>(null);
+
+  const executePublish = useCallback(async () => {
+    const selectedPageVersionsObj: Record<string, number> = {};
+    for (const [pid, versionNo] of selectedPageVersionNo) {
+      selectedPageVersionsObj[pid] = versionNo;
+    }
+    const version = (await createPrdVersionFn({
+      data: {
+        prdId,
+        major: parseInt(major),
+        minor: parseInt(minor),
+        patch: parseInt(patch),
+        notes,
+        pageIds: Array.from(selectedPageIds),
+        selectedPageVersions: selectedPageVersionsObj,
+      },
+    })) as unknown as PRDVersion;
+    setVersions((prev) => {
+      const filtered = prev.filter((v) => v.id !== version.id);
+      return [...filtered, version].sort((a, b) => {
+        if (a.major !== b.major) return b.major - a.major;
+        if (a.minor !== b.minor) return b.minor - a.minor;
+        return b.patch - a.patch;
+      });
+    });
+    setNotes("");
+    setIsUpdateMode(false);
+  }, [prdId, major, minor, patch, notes, selectedPageVersionNo, selectedPageIds]);
+
+  const publish = useCallback(() => {
+    if (isUpdateMode) {
+      setConfirmUpdateOpen(true);
+    } else {
+      const currentMajor = parseInt(major);
+      const currentMinor = parseInt(minor);
+      const currentPatch = parseInt(patch);
+
+      if (versions.length > 0) {
+        const sortedVersions = [...versions].sort((a, b) => {
+          if (a.major !== b.major) return b.major - a.major;
+          if (a.minor !== b.minor) return b.minor - a.minor;
+          return b.patch - a.patch;
+        });
+        const latestVersion = sortedVersions[0];
+
+        const expectedPatch = latestVersion.patch + 1;
+        const expectedMinor = latestVersion.minor + (latestVersion.patch === 99 ? 1 : 0);
+        const expectedMajor = latestVersion.major + (latestVersion.minor === 99 && latestVersion.patch === 99 ? 1 : 0);
+
+        const isConsecutive = 
+          (currentPatch === expectedPatch && currentMinor === latestVersion.minor && currentMajor === latestVersion.major) ||
+          (currentPatch === 0 && currentMinor === expectedMinor && currentMajor === latestVersion.major) ||
+          (currentPatch === 0 && currentMinor === 0 && currentMajor === expectedMajor);
+
+        if (!isConsecutive) {
+          setSkipVersionInfo({
+            current: `${currentMajor}.${currentMinor}.${currentPatch}`,
+            previous: `${latestVersion.major}.${latestVersion.minor}.${latestVersion.patch}`,
+          });
+          setConfirmSkipOpen(true);
+          return;
+        }
+      }
+
+      executePublish();
+    }
+  }, [isUpdateMode, executePublish, major, minor, patch, versions]);
+
+  useEffect(() => {
+    const vNum = parseInt(major) * 10000 + parseInt(minor) * 100 + parseInt(patch);
+    const isExisting = versions.some((v) => v.major === parseInt(major) && v.minor === parseInt(minor) && v.patch === parseInt(patch));
+    setIsUpdateMode(isExisting);
+
+    let highest = 0;
+    for (const v of versions) {
+      const vn = v.major * 10000 + v.minor * 100 + v.patch;
+      if (vn > highest) highest = vn;
+    }
+    setVersionTooLow(highest > 0 && vNum < highest && !isExisting);
+  }, [major, minor, patch, versions]);
+
+  const formatTime = (iso: string) => {
+    const d = new Date(iso);
+    const now = new Date();
+    const diffMs = now.getTime() - d.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return t("version.justNow");
+    if (diffMins < 60) return t("version.minutesAgo", { count: diffMins });
+    if (diffHours < 24) return t("version.hoursAgo", { count: diffHours });
+    if (diffDays < 7) return t("version.daysAgo", { count: diffDays });
+
+    return formatDate(d, timezone, t("version.dateTimeFormat"));
+  };
+
+  const systemNote = (pv: PageVersion) => {
+    if (pv.restoredFromVersion) return t("version.restoredFrom", { version: pv.restoredFromVersion });
+    if (pv.version === 1) return t("version.initial");
+    return null;
+  };
+
+  const renderNode = (node: TreeNode, depth: number = 0) => {
+    const isExpanded = expandedNodes.has(node.id);
+    const hasChildren = node.children.length > 0;
+    const isFolder = node.type === "folder";
+    const childPageIds = getDescendantPageIds(node);
+    const isEmptyFolder = isFolder && childPageIds.length === 0;
+    const indeterminate = isFolder ? isFolderIndeterminate(node) : false;
+    const allSelected = isFolder ? isFolderAllSelected(node) : selectedPageIds.has(node.id);
+
+    return (
+      <div key={node.id}>
+        <label
+          className={cn(
+            "flex items-center gap-2 px-2 py-1 rounded transition-colors duration-100",
+            !isEmptyFolder && "hover:bg-muted/50 cursor-pointer",
+            isEmptyFolder && "text-muted-foreground/50"
+          )}
+          style={{ paddingLeft: `${12 + depth * 16}px` }}
+        >
+          <Checkbox
+            checked={isFolder && indeterminate ? "indeterminate" : allSelected}
+            disabled={isEmptyFolder}
+            onCheckedChange={() => {
+              if (!isEmptyFolder) {
+                togglePage(node.id, node);
+              }
+            }}
+            className={cn(
+              "size-3.5",
+              isEmptyFolder && "opacity-50 cursor-not-allowed"
+            )}
+          />
+
+          {hasChildren ? (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleNode(node.id);
+              }}
+              className="shrink-0 hover:bg-muted rounded p-0.5 -m-0.5"
+            >
+              <ChevronRight
+                className={cn(
+                  "size-3.5 text-muted-foreground/60 transition-transform duration-150",
+                  isExpanded && "rotate-90"
+                )}
+              />
+            </button>
+          ) : (
+            <span className="size-3.5 shrink-0" />
+          )}
+
+          {isFolder ? (
+            <Folder className="size-3.5 shrink-0 text-muted-foreground" />
+          ) : (
+            <File className="size-3.5 shrink-0 text-muted-foreground" />
+          )}
+
+          <span className="flex-1 text-xs truncate">{node.name}</span>
+          {!isFolder && (
+            isPublishTab ? (
+              (allPageVersionsByPage.get(node.id) || []).length > 1 ? (
+                <Select
+                  value={String(selectedPageVersionNo.get(node.id) ?? node.version)}
+                  onValueChange={(value) => {
+                    setSelectedPageVersionNo((prev) => {
+                      const next = new Map(prev);
+                      next.set(node.id, parseInt(value));
+                      return next;
+                    });
+                  }}
+                >
+                  <SelectTrigger
+                    className="!h-4 text-[10px] px-1 py-0 gap-0 border-none shadow-none bg-transparent text-muted-foreground cursor-pointer [&_svg]:size-3"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(allPageVersionsByPage.get(node.id) || []).map((pv) => (
+                      <SelectItem key={pv.version} value={String(pv.version)} className="text-xs">
+                        PAGE v{pv.version}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <span className="text-[10px] text-muted-foreground">PAGE v{node.version}</span>
+              )
+            ) : (
+              <span className="text-[10px] text-muted-foreground">PAGE v{node.version}</span>
+            )
+          )}
+        </label>
+
+        {isExpanded && hasChildren && (
+          <div>{node.children.map((child) => renderNode(child, depth + 1))}</div>
+        )}
+      </div>
+    );
+  };
+
+  const selectedCount = useMemo(() => {
+    const allPageIds = getAllPageIds(tree);
+    return allPageIds.filter((id) => selectedPageIds.has(id)).length;
+  }, [tree, selectedPageIds, getAllPageIds]);
+
+  const allLeafPageIds = useMemo(() => {
+    return getAllPageIds(tree);
+  }, [tree, getAllPageIds]);
+
+  const allPagesSelected = useMemo(() => {
+    return allLeafPageIds.length > 0 && allLeafPageIds.every((id) => selectedPageIds.has(id));
+  }, [allLeafPageIds, selectedPageIds]);
+
+  const allPagesCount = allLeafPageIds.length;
+  const selectedRealCount = allLeafPageIds.filter((id) => selectedPageIds.has(id)).length;
+  const indeterminateAll = selectedRealCount > 0 && selectedRealCount < allPagesCount;
+
+  const selectLatestPages = useCallback(() => {
+    if (versions.length === 0) return;
+    const latest = versions[0];
+    const pageVersions = (latest as any).pageVersions as any[] | undefined;
+    if (!pageVersions) return;
+    const publishedPageIds = pageVersions
+      .filter((pv: any) => pv.type === "page" && !pv.isPlaceholder)
+      .map((pv: any) => pv.pageId);
+    const allIds = getAllPageIds(tree);
+    const validIds = publishedPageIds.filter((id: string) => allIds.includes(id));
+    setSelectedPageIds(new Set(validIds));
+  }, [versions, tree, getAllPageIds]);
+
+  const [activeSubTab, setActiveSubTab] = useState<string>("page-version");
+
+  const isPublishTab = activeSubTab === "version-publish";
+
+  // Fetch page version options for all leaf pages when publish tab is active
+  useEffect(() => {
+    if (!isPublishTab) return;
+    const allPageIds = getAllPageIds(tree);
+    const leafIds = allPageIds.filter((id) => selectedPageIds.has(id));
+    if (leafIds.length === 0) return;
+    const fetchVersions = async () => {
+      const results = await Promise.all(
+        leafIds.map(async (pid) => {
+          const versions = await listPrdPageVersionsFn({ data: { pageId: pid, limit: 100 } });
+          return { pageId: pid, versions };
+        })
+      );
+      const map = new Map<string, PageVersion[]>();
+      for (const r of results) {
+        if (r) map.set(r.pageId, r.versions.map((v) => ({ ...v, createdAt: v.createdAt.toISOString() })));
+      }
+      setAllPageVersionsByPage(map);
+      setSelectedPageVersionNo((prev) => {
+        const next = new Map(prev);
+        for (const r of results) {
+          if (r && r.versions.length > 0 && !next.has(r.pageId)) {
+            next.set(r.pageId, r.versions[0].version);
+          }
+        }
+        return next;
+      });
+    };
+    fetchVersions();
+  }, [isPublishTab, selectedPageIds, tree, getAllPageIds]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="shrink-0 flex items-center h-10 mt-2">
+        {SUBTABS.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => setActiveSubTab(tab.key)}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-1.5 text-xs font-medium h-full transition-colors",
+              activeSubTab === tab.key
+                ? "text-foreground border-b-2 border-primary"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {tab.icon} {t(tab.label)}
+          </button>
+        ))}
+      </div>
+
+      {activeSubTab === "page-version" ? (
+        <div className="flex flex-col h-full p-3 text-sm">
+          <div className="shrink-0 flex items-center justify-between mb-4">
+            <h4 className="text-xs font-medium text-muted-foreground">{t("version.pageVersionHistory")}</h4>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-6 text-xs gap-1"
+              disabled={!pageId || creatingPageVersion}
+              onClick={() => {
+                setCreateDialogNotes("");
+                setCreateDialogOpen(true);
+              }}
+            >
+              <Plus className="size-3.5" />
+              {t("version.createVersion")}
+            </Button>
+          </div>
+
+          <div className="min-h-0 overflow-y-auto flex-1">
+            {!pageId ? (
+              <div className="text-xs text-muted-foreground text-center py-8">
+                {t("version.selectPageHint")}
+              </div>
+            ) : pageVersionsLoading ? (
+              <div className="space-y-2 pt-2">
+                <Skeleton className="h-10 w-full rounded opacity-40" />
+                <Skeleton className="h-10 w-[85%] rounded opacity-40" />
+                <Skeleton className="h-10 w-[70%] rounded opacity-40" />
+              </div>
+            ) : pageVersionsError ? (
+              <p className="text-xs text-destructive text-center py-2">{pageVersionsError}</p>
+            ) : (
+              <div>
+                {pageVersions.map((pv, index) => {
+                  const isLast = index === pageVersions.length - 1;
+                  const isPreviewing = previewVersionId === pv.id;
+
+                  return (
+                    <div key={pv.id} className="relative">
+                      <div className="flex gap-2">
+                        <div className="flex flex-col items-center w-5">
+                          <div
+                            className={cn(
+                              "size-2.5 rounded-full shrink-0 mt-1 z-10 relative",
+                              isPreviewing
+                                ? "bg-primary ring-2 ring-primary/30"
+                                : index === 0 && !previewVersionId
+                                  ? "bg-primary"
+                                  : "bg-muted-foreground/40"
+                            )}
+                          />
+                          {!isLast && <div className="w-px bg-border flex-1" />}
+                        </div>
+
+                        <div className="flex-1 min-w-0 pb-2">
+                          <div
+                            className="flex items-center justify-between gap-2 cursor-pointer rounded-sm px-1 -mx-1 hover:bg-muted/30 transition-colors py-0.5"
+                            onClick={() => previewVersion(pv.id)}
+                          >
+                            <span
+                              className={cn(
+                                "text-xs font-medium truncate",
+                                isPreviewing
+                                  ? "text-primary"
+                                  : index === 0 && !previewVersionId
+                                    ? "text-foreground"
+                                    : "text-muted-foreground"
+                              )}
+                            >
+                              v{pv.version}
+                              <span className="text-[10px] text-muted-foreground/70 ml-2">
+                                {formatTime(pv.createdAt)}
+                              </span>
+                              {systemNote(pv) && (
+                                <span className="text-[10px] text-muted-foreground/50 ml-2">
+                                  {systemNote(pv)}
+                                </span>
+                              )}
+                            </span>
+
+                            <div className="flex items-center gap-0.5 shrink-0" onClick={(e) => e.stopPropagation()}>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <button
+                                    onClick={() => restorePageVersion(pv.id)}
+                                    className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors"
+                                  >
+                                    <RotateCcw className="size-3" />
+                                  </button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>{t("version.restoreToThis")}</p>
+                                </TooltipContent>
+                              </Tooltip>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <button
+                                    onClick={() => {
+                                      setEditDialogVersionId(pv.id);
+                                      setEditDialogNotes(pv.notes || "");
+                                      setEditDialogOpen(true);
+                                    }}
+                                    className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-foreground transition-colors"
+                                  >
+                                    <Pencil className="size-3" />
+                                  </button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>{t("version.editNotes")}</p>
+                                </TooltipContent>
+                              </Tooltip>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <button
+                                    onClick={() => {
+                                      setDeleteVersionId(pv.id);
+                                      setDeleteConfirmOpen(true);
+                                    }}
+                                    className="size-5 flex items-center justify-center rounded hover:bg-destructive/10 text-muted-foreground/50 hover:text-destructive transition-colors"
+                                  >
+                                    <Trash2 className="size-3" />
+                                  </button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>{t("version.deleteVersion")}</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </div>
+                          {pv.notes && (
+                            <p
+                              className={cn(
+                                "text-xs text-muted-foreground mt-1 px-1 cursor-pointer hover:text-foreground transition-colors",
+                                expandedNotesId !== pv.id && "line-clamp-2"
+                              )}
+                              onClick={() => setExpandedNotesId(expandedNotesId === pv.id ? null : pv.id)}
+                            >
+                              {pv.notes}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col h-full p-3 text-sm">
+          <div className="flex flex-col shrink-0">
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-xs font-medium text-muted-foreground">{t("version.selectPagesTitle")}</h4>
+              <div className="flex items-center gap-2">
+                <span className="text-[10px] text-muted-foreground/60">
+                  {t("version.selectedCount", { count: selectedCount })}
+                </span>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      onClick={() => loadPages(true)}
+                      disabled={syncing || pagesLoading}
+                      className="size-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground transition-colors"
+                    >
+                      <RefreshCw
+                        className={cn("size-3.5", syncing && "animate-spin")}
+                      />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("version.syncPages")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            </div>
+            <div className="flex items-center gap-2 px-2 py-1 mb-1.5">
+              <label className="flex items-center gap-1.5 cursor-pointer ml-1">
+                <Checkbox
+                  checked={indeterminateAll ? "indeterminate" : allPagesSelected}
+                  onCheckedChange={() => {
+                    if (allPagesSelected) {
+                      setSelectedPageIds(new Set());
+                    } else {
+                      setSelectedPageIds(new Set(allLeafPageIds));
+                    }
+                  }}
+                  className="size-3.5"
+                />
+                <span className="text-[10px] text-muted-foreground">{t("version.selectAll")}</span>
+              </label>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={selectLatestPages}
+                    className="text-[10px] text-muted-foreground hover:text-foreground ml-2 "
+                  >
+                    {t("version.selectLatest")}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{t("version.selectLatestHint")}</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            <div className="space-y-0.5 max-h-[25vh] overflow-y-auto">
+              {pagesLoading ? (
+                <div className="space-y-2 pt-1">
+                  <Skeleton className="h-5 w-full rounded opacity-40" />
+                  <Skeleton className="h-5 w-[80%] rounded opacity-40" />
+                  <Skeleton className="h-5 w-[60%] rounded opacity-40" />
+                </div>
+              ) : pagesError ? (
+                <p className="text-xs text-destructive text-center py-2">{pagesError}</p>
+              ) : tree.length === 0 ? (
+                <p className="text-xs text-muted-foreground text-center py-2">{t("version.noPages")}</p>
+              ) : (
+                tree.map((node) => renderNode(node))
+              )}
+            </div>
+          </div>
+
+          <div className="shrink-0 mt-4">
+            <h4 className="text-xs font-medium text-muted-foreground mb-2">{t("version.prdVersionNo")}</h4>
+            <div className="flex items-center gap-1">
+              <Input
+                value={major}
+                onChange={(e) => setMajor(e.target.value)}
+                className="h-6 w-12 text-xs md:text-xs text-center"
+              />
+              <span className="text-muted-foreground">.</span>
+              <Input
+                value={minor}
+                onChange={(e) => setMinor(e.target.value)}
+                className="h-6 w-12 text-xs md:text-xs text-center"
+              />
+              <span className="text-muted-foreground">.</span>
+              <Input
+                value={patch}
+                onChange={(e) => setPatch(e.target.value)}
+                className="h-6 w-12 text-xs md:text-xs text-center"
+              />
+            </div>
+            <Input
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              placeholder={t("version.releaseNotesPlaceholder")}
+              className="h-7 text-xs md:text-xs mt-2"
+            />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span tabIndex={0}>
+                  <Button
+                    size="sm"
+                    className="w-full mt-2 h-7 text-xs"
+                    disabled={selectedPageIds.size === 0 || versionTooLow}
+                    onClick={publish}
+                  >
+                    {isUpdateMode ? t("version.update") : t("version.publish")} v{major}.{minor}.{patch} PRD
+                  </Button>
+                </span>
+              </TooltipTrigger>
+              {versionTooLow && (
+                <TooltipContent>
+                  <p>{t("version.versionTooLow")}</p>
+                </TooltipContent>
+              )}
+            </Tooltip>
+            <AlertDialog open={confirmUpdateOpen} onOpenChange={setConfirmUpdateOpen}>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t("version.confirmUpdateTitle")}</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t("version.confirmUpdateDescription", { version: `v${major}.${minor}.${patch}` })}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t("common:button.cancel")}</AlertDialogCancel>
+                  <AlertDialogAction onClick={executePublish}>{t("version.confirmUpdate")}</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+            <AlertDialog open={confirmSkipOpen} onOpenChange={setConfirmSkipOpen}>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t("version.skipVersionTitle")}</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t("version.skipVersionDescription", { current: skipVersionInfo?.current, previous: skipVersionInfo?.previous })}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t("common:button.cancel")}</AlertDialogCancel>
+                  <AlertDialogAction onClick={executePublish}>{t("version.continuePublish")}</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+
+          <div className="flex flex-col min-h-0 mt-4 flex-1">
+            <h4 className="text-xs font-medium text-muted-foreground mb-2 shrink-0">{t("version.prdVersionHistory")}</h4>
+            <div className="min-h-0 overflow-y-auto flex-1">
+              {versionsLoading ? (
+                <div className="space-y-2 pt-2">
+                  <Skeleton className="h-5 w-full rounded opacity-40" />
+                  <Skeleton className="h-5 w-[75%] rounded opacity-40" />
+                  <Skeleton className="h-5 w-[60%] rounded opacity-40" />
+                </div>
+              ) : versionsError ? (
+                <p className="text-xs text-destructive text-center py-2">{versionsError}</p>
+              ) : versions.length === 0 ? (
+                <div className="space-y-2 pt-3 pb-1">
+                  <Skeleton className="h-5 w-full rounded opacity-40" />
+                  <Skeleton className="h-5 w-[70%] rounded opacity-40" />
+                  <div className="pt-3 text-center">
+                    <p className="text-[11px] text-muted-foreground">{t("version.noPublishedVersions")}</p>
+                  </div>
+                </div>
+              ) : (
+                <PageVersionTree
+                  versions={versions as any[]}
+                  onRestore={async (snapshot: VersionSnapshot) => {
+                    let targetCanvas = snapshot.canvas;
+                    let targetContent = snapshot.content;
+                    if (snapshot.pageVersionId && !targetCanvas) {
+                      const pv = await getPrdPageVersionFn({ data: { pageVersionId: snapshot.pageVersionId } });
+                      targetCanvas = pv.canvas;
+                      targetContent = pv.content;
+                    }
+                    try {
+                      const latest = await listPrdPageVersionsFn({ data: { pageId: snapshot.pageId, limit: 1 } });
+                      const currentVersionNo = latest[0]?.version ?? 0;
+                      setRestoreData({
+                        pageId: snapshot.pageId,
+                        targetVersionNo: snapshot.version,
+                        targetCanvas,
+                        targetContent,
+                        currentVersionNo,
+                      });
+                      setRestoreConfirmOpen(true);
+                    } catch {
+                      // silent
+                    }
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <CreateVersionDialog
+          open={createDialogOpen}
+          onOpenChange={setCreateDialogOpen}
+          notes={createDialogNotes}
+          setNotes={setCreateDialogNotes}
+          loading={creatingPageVersion}
+          onCreate={createPageVersion}
+        />
+
+        <EditVersionDialog
+          open={editDialogOpen}
+          onOpenChange={setEditDialogOpen}
+          notes={editDialogNotes}
+          setNotes={setEditDialogNotes}
+          onSave={updatePageVersionNotes}
+        />
+
+        <DeleteVersionDialog
+          open={deleteConfirmOpen}
+          onOpenChange={setDeleteConfirmOpen}
+          onDelete={deletePageVersion}
+        />
+
+      {restoreData && (
+        <RestoreVersionDialog
+          open={restoreConfirmOpen}
+          onOpenChange={(open) => {
+            setRestoreConfirmOpen(open);
+            if (!open) setRestoreData(null);
+          }}
+          currentVersionNo={restoreData.currentVersionNo}
+          targetVersionNo={restoreData.targetVersionNo}
+          onConfirm={confirmRestore}
+          loading={restoreLoading}
+        />
+      )}
+    </div>
+  );
+}