@allbluecn/web-app 0.17.2 → 0.18.1

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

@@ -1,1078 +0,0 @@
-// 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 { m } from '@/paraglide/messages.js'
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/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 "@/lib/utils";
-import { buildTree, TreeNode, PRDPage } from "@/lib/prd-tree-utils";
-import { type PRDVersionWithSemver as PRDVersion } from "@allbluecn/kernel";
-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/shared-kit/timezone/timezone-provider";
-
-export function PageVersionPanel({ prdId, pageId }: PageVersionPanelProps) {
-  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 m.version_justNow();
-    if (diffMins < 60) return m.version_minutesAgo({ count: diffMins });
-    if (diffHours < 24) return m.version_hoursAgo({ count: diffHours });
-    if (diffDays < 7) return m.version_daysAgo({ count: diffDays });
-
-    return formatDate(d, timezone, m.version_dateTimeFormat());
-  };
-
-  const systemNote = (pv: PageVersion) => {
-    if (pv.restoredFromVersion) return m.version_restoredFrom({ count: pv.restoredFromVersion });
-    if (pv.version === 1) return m.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 ? false : allSelected}
-            indeterminate={isFolder && indeterminate}
-            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: React.MouseEvent) => 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: TreeNode) => 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} {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">{m.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" />
-              {m.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">
-                {m.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 render={<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" />
-                                  </TooltipTrigger>
-                                <TooltipContent>
-                                  <p>{m.version_restoreToThis()}</p>
-                                </TooltipContent>
-                              </Tooltip>
-                              <Tooltip>
-                                <TooltipTrigger render={<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" />
-                                  </TooltipTrigger>
-                                <TooltipContent>
-                                  <p>{m.version_editNotes()}</p>
-                                </TooltipContent>
-                              </Tooltip>
-                              <Tooltip>
-                                <TooltipTrigger render={<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" />
-                                  </TooltipTrigger>
-                                <TooltipContent>
-                                  <p>{m.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">{m.version_selectPagesTitle()}</h4>
-              <div className="flex items-center gap-2">
-                <span className="text-[10px] text-muted-foreground/60">
-                  {m.version_selectedCount({ count: selectedCount })}
-                </span>
-                <Tooltip>
-                  <TooltipTrigger render={<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")}
-                      />
-                    </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{m.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 ? false : allPagesSelected}
-                  indeterminate={indeterminateAll}
-                  onCheckedChange={() => {
-                    if (allPagesSelected) {
-                      setSelectedPageIds(new Set());
-                    } else {
-                      setSelectedPageIds(new Set(allLeafPageIds));
-                    }
-                  }}
-                  className="size-3.5"
-                />
-                <span className="text-[10px] text-muted-foreground">{m.version_selectAll()}</span>
-              </label>
-              <Tooltip>
-                <TooltipTrigger render={<button onClick={selectLatestPages}
-                    className="text-[10px] text-muted-foreground hover:text-foreground ml-2 " />}>
-                    {m.version_selectLatest()}
-                  </TooltipTrigger>
-                <TooltipContent>
-                  <p>{m.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">{m.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">{m.version_prdVersionNo()}</h4>
-            <div className="flex items-center gap-1">
-              <Input
-                value={major}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => 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: React.ChangeEvent<HTMLInputElement>) => 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: React.ChangeEvent<HTMLInputElement>) => setPatch(e.target.value)}
-                className="h-6 w-12 text-xs md:text-xs text-center"
-              />
-            </div>
-            <Input
-              value={notes}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNotes(e.target.value)}
-              placeholder={m.version_releaseNotesPlaceholder()}
-              className="h-7 text-xs md:text-xs mt-2"
-            />
-            <Tooltip>
-              <TooltipTrigger render={<span tabIndex={0} />}>
-                  <Button
-                    size="sm"
-                    className="w-full mt-2 h-7 text-xs"
-                    disabled={selectedPageIds.size === 0 || versionTooLow}
-                    onClick={publish}
-                  >
-                    {isUpdateMode ? m.version_update() : m.version_publish()} v{major}.{minor}.{patch} PRD
-                  </Button>
-                </TooltipTrigger>
-              {versionTooLow && (
-                <TooltipContent>
-                  <p>{m.version_versionTooLow()}</p>
-                </TooltipContent>
-              )}
-            </Tooltip>
-            <AlertDialog open={confirmUpdateOpen} onOpenChange={setConfirmUpdateOpen}>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>{m.version_confirmUpdateTitle()}</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    {m['version_confirmUpdateDescription']({ version: `v${major}.${minor}.${patch}` })}
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>{m.common_button_cancel()}</AlertDialogCancel>
-                  <AlertDialogAction onClick={executePublish}>{m.version_confirmUpdate()}</AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-            <AlertDialog open={confirmSkipOpen} onOpenChange={setConfirmSkipOpen}>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>{m.version_skipVersionTitle()}</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    {m.version_skipVersionDescription({ current: skipVersionInfo?.current, previous: skipVersionInfo?.previous })}
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>{m.common_button_cancel()}</AlertDialogCancel>
-                  <AlertDialogAction onClick={executePublish}>{m.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">{m.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">{m.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>
-  );
-}