PaperClipAI/ui/src/components/IssueDocumentsSection.tsx

import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { QueryClient, QueryKey } from "@tanstack/react-query";
import type {
  Agent,
  DocumentRevision,
  FeedbackDataSharingPreference,
  FeedbackVote,
  FeedbackVoteValue,
  Issue,
  IssueDocument,
} from "@paperclipai/shared";
import { isSystemIssueDocumentKey } from "@paperclipai/shared";
import { useLocation } from "@/lib/router";
import { ApiError } from "../api/client";
import { issuesApi } from "../api/issues";
import { useAutosaveIndicator } from "../hooks/useAutosaveIndicator";
import { deriveDocumentRevisionState } from "../lib/document-revisions";
import type { CompanyUserProfile } from "../lib/company-members";
import { queryKeys } from "../lib/queryKeys";
import { cn, relativeTime } from "../lib/utils";
import { FoldCurtain } from "./FoldCurtain";
import { DocumentAnnotationsCountChip, IssueDocumentAnnotations } from "./IssueDocumentAnnotations";
import type { DocumentAnnotationTarget } from "@/api/document-annotations";
import { MarkdownBody, type MarkdownExternalReferenceMap } from "./MarkdownBody";
import { MarkdownEditor, type MentionOption } from "./MarkdownEditor";
import { OutputFeedbackButtons } from "./OutputFeedbackButtons";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Check, Copy, Diff, Download, FilePenLine, FileText, Lock, MoreHorizontal, Plus, Trash2, Unlock, X } from "lucide-react";
import { DocumentDiffModal } from "./DocumentDiffModal";
import { DocumentFrameHeader, type DocumentFrameHeaderRevisionActor } from "./DocumentFrameHeader";
import { SourceTrustBadge } from "./SourceTrustBadge";
import { Badge } from "@/components/ui/badge";

type DraftState = {
  key: string;
  title: string;
  body: string;
  baseRevisionId: string | null;
  isNew: boolean;
};

type DocumentConflictState = {
  key: string;
  serverDocument: IssueDocument;
  localDraft: DraftState;
  showRemote: boolean;
};

type DocumentSubjectConfig = {
  id: string;
  detailQueryKey?: QueryKey;
  documentsQueryKey: QueryKey;
  idleDocumentRevisionsQueryKey: QueryKey;
  documentRevisionsQueryKey: (key: string) => QueryKey;
  listDocuments: () => Promise<IssueDocument[]>;
  listDocumentRevisions: (key: string) => Promise<DocumentRevision[]>;
  getDocument: (key: string) => Promise<IssueDocument>;
  upsertDocument: (key: string, data: {
    title: string | null;
    format: "markdown";
    body: string;
    baseRevisionId: string | null;
  }) => Promise<IssueDocument>;
  deleteDocument?: (key: string) => Promise<unknown>;
  restoreDocumentRevision?: (key: string, revisionId: string) => Promise<IssueDocument>;
  setDocumentLock?: (key: string, locked: boolean) => Promise<IssueDocument>;
  syncDetailCache?: (queryClient: QueryClient, document: IssueDocument) => void;
  hideSystemDocuments?: boolean;
  legacyPlanDocument?: { body: string } | null;
  annotations?: {
    issueId: string;
    target?: DocumentAnnotationTarget | ((documentKey: string) => DocumentAnnotationTarget);
  } | null;
};

const DOCUMENT_AUTOSAVE_DEBOUNCE_MS = 900;
const DOCUMENT_KEY_PATTERN = /^[a-z0-9][a-z0-9_-]*$/;
const getFoldedDocumentsStorageKey = (issueId: string) => `paperclip:issue-document-folds:${issueId}`;

function loadFoldedDocumentKeys(issueId: string) {
  if (typeof window === "undefined") return [];
  try {
    const raw = window.localStorage.getItem(getFoldedDocumentsStorageKey(issueId));
    if (!raw) return [];
    const parsed = JSON.parse(raw);
    return Array.isArray(parsed) ? parsed.filter((value): value is string => typeof value === "string") : [];
  } catch {
    return [];
  }
}

function saveFoldedDocumentKeys(issueId: string, keys: string[]) {
  if (typeof window === "undefined") return;
  window.localStorage.setItem(getFoldedDocumentsStorageKey(issueId), JSON.stringify(keys));
}

function renderFoldableBody(
  body: string,
  className?: string,
  externalReferences?: MarkdownExternalReferenceMap,
) {
  return (
    <FoldCurtain>
      <MarkdownBody className={className} softBreaks={false} externalReferences={externalReferences}>
        {body}
      </MarkdownBody>
    </FoldCurtain>
  );
}

function isPlanKey(key: string) {
  return key.trim().toLowerCase() === "plan";
}

function titlesMatchKey(title: string | null | undefined, key: string) {
  return (title ?? "").trim().toLowerCase() === key.trim().toLowerCase();
}

function isDocumentConflictError(error: unknown) {
  return error instanceof ApiError && error.status === 409;
}

function isLockedDocumentError(error: unknown) {
  return error instanceof ApiError && error.status === 409 && error.message === "Document is locked";
}

function downloadDocumentFile(key: string, body: string) {
  const blob = new Blob([body], { type: "text/markdown;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const anchor = document.createElement("a");
  anchor.href = url;
  anchor.download = `${key}.md`;
  document.body.appendChild(anchor);
  anchor.click();
  anchor.remove();
  URL.revokeObjectURL(url);
}

function getRevisionActor(
  revision: DocumentRevision,
  maps: {
    agentMap?: ReadonlyMap<string, Pick<Agent, "id" | "name"> & Partial<Pick<Agent, "icon">>>;
    userProfileMap?: ReadonlyMap<string, CompanyUserProfile>;
  },
): DocumentFrameHeaderRevisionActor {
  if (revision.createdByAgentId) {
    const agent = maps.agentMap?.get(revision.createdByAgentId);
    return {
      kind: "agent",
      name: agent?.name ?? revision.createdByAgentId.slice(0, 8),
      agentIcon: agent?.icon ?? null,
    };
  }
  if (revision.createdByUserId) {
    const profile = maps.userProfileMap?.get(revision.createdByUserId);
    return {
      kind: "user",
      name: profile?.label ?? (revision.createdByUserId === "local-board" ? "Board" : revision.createdByUserId.slice(0, 8)),
      imageUrl: profile?.image ?? null,
    };
  }
  return { kind: "system", name: "System" };
}

function documentHasUnsavedChanges(doc: IssueDocument, draft: DraftState | null) {
  if (!draft || draft.isNew || draft.key !== doc.key) return false;
  return draft.body !== doc.body || (doc.title ?? "") !== draft.title;
}

function toDocumentSummary(document: IssueDocument) {
  return {
    id: document.id,
    companyId: document.companyId,
    issueId: document.issueId,
    key: document.key,
    title: document.title,
    format: document.format,
    latestRevisionId: document.latestRevisionId,
    latestRevisionNumber: document.latestRevisionNumber,
    createdByAgentId: document.createdByAgentId,
    createdByUserId: document.createdByUserId,
    updatedByAgentId: document.updatedByAgentId,
    updatedByUserId: document.updatedByUserId,
    lockedAt: document.lockedAt,
    lockedByAgentId: document.lockedByAgentId,
    lockedByUserId: document.lockedByUserId,
    sourceTrust: document.sourceTrust,
    createdAt: document.createdAt,
    updatedAt: document.updatedAt,
  };
}

function makeIssueDocumentSubject(issue: Issue): DocumentSubjectConfig {
  return {
    id: issue.id,
    detailQueryKey: queryKeys.issues.detail(issue.id),
    documentsQueryKey: queryKeys.issues.documents(issue.id),
    idleDocumentRevisionsQueryKey: ["issues", "document-revisions", issue.id, "__idle__"],
    documentRevisionsQueryKey: (key) => queryKeys.issues.documentRevisions(issue.id, key),
    listDocuments: () => issuesApi.listDocuments(issue.id),
    listDocumentRevisions: (key) => issuesApi.listDocumentRevisions(issue.id, key),
    getDocument: (key) => issuesApi.getDocument(issue.id, key),
    upsertDocument: (key, data) => issuesApi.upsertDocument(issue.id, key, data),
    deleteDocument: (key) => issuesApi.deleteDocument(issue.id, key),
    restoreDocumentRevision: (key, revisionId) => issuesApi.restoreDocumentRevision(issue.id, key, revisionId),
    setDocumentLock: (key, locked) =>
      locked ? issuesApi.lockDocument(issue.id, key) : issuesApi.unlockDocument(issue.id, key),
    syncDetailCache: (queryClient, document) => {
      queryClient.setQueryData<Issue | undefined>(
        queryKeys.issues.detail(issue.id),
        (current) => {
          if (!current) return current;
          const nextSummaries = (() => {
            const summary = toDocumentSummary(document);
            const existingIndex = (current.documentSummaries ?? []).findIndex((entry) => entry.key === document.key);
            if (existingIndex === -1) return [...(current.documentSummaries ?? []), summary];
            return (current.documentSummaries ?? []).map((entry, index) => index === existingIndex ? summary : entry);
          })();
          return {
            ...current,
            planDocument: document.key === "plan" ? document : current.planDocument ?? null,
            documentSummaries: nextSummaries,
            legacyPlanDocument: document.key === "plan" ? null : current.legacyPlanDocument ?? null,
          };
        },
      );
    },
    hideSystemDocuments: true,
    legacyPlanDocument: issue.legacyPlanDocument,
    annotations: { issueId: issue.id },
  };
}

export function IssueDocumentsSection({
  issue,
  subject,
  canDeleteDocuments,
  canManageDocumentLocks = false,
  feedbackVotes = [],
  feedbackDataSharingPreference = "prompt",
  feedbackTermsUrl = null,
  mentions,
  imageUploadHandler,
  onVote,
  extraActions,
  agentMap,
  userProfileMap,
  defaultAnnotationPanelOpenKeys,
  defaultAnnotationFocusedThreadIds,
  forceEditDocumentKey,
  externalReferences,
}: {
  issue?: Issue;
  subject?: DocumentSubjectConfig;
  canDeleteDocuments: boolean;
  canManageDocumentLocks?: boolean;
  feedbackVotes?: FeedbackVote[];
  feedbackDataSharingPreference?: FeedbackDataSharingPreference;
  feedbackTermsUrl?: string | null;
  mentions?: MentionOption[];
  imageUploadHandler?: (file: File) => Promise<string>;
  onVote?: (
    revisionId: string,
    vote: FeedbackVoteValue,
    options?: { allowSharing?: boolean; reason?: string },
  ) => Promise<void>;
  extraActions?: ReactNode;
  agentMap?: ReadonlyMap<string, Pick<Agent, "id" | "name"> & Partial<Pick<Agent, "icon">>>;
  userProfileMap?: ReadonlyMap<string, CompanyUserProfile>;
  /**
   * Seed which document annotation panels are open on first render. Mostly useful
   * for Storybook / screenshot harnesses; runtime callers usually omit this.
   */
  defaultAnnotationPanelOpenKeys?: string[];
  /** Per-doc seed for the focused annotation thread id (Storybook-only). */
  defaultAnnotationFocusedThreadIds?: Readonly<Record<string, string>>;
  /** Force a doc into edit mode on mount (Storybook-only). */
  forceEditDocumentKey?: string | null;
  externalReferences?: MarkdownExternalReferenceMap;
}) {
  const queryClient = useQueryClient();
  const location = useLocation();
  const documentSubject = useMemo(() => {
    if (subject) return subject;
    if (!issue) throw new Error("IssueDocumentsSection requires either issue or subject");
    return makeIssueDocumentSubject(issue);
  }, [issue, subject]);
  const annotationTargetForKey = useCallback((documentKey: string) => {
    const configured = documentSubject.annotations?.target;
    if (!configured) return undefined;
    if (typeof configured === "function") return configured(documentKey);
    if (configured.kind === "issue") return { ...configured, documentKey };
    if (configured.kind === "case") return { ...configured, documentKey };
    return configured;
  }, [documentSubject]);
  const [confirmDeleteKey, setConfirmDeleteKey] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [draft, setDraft] = useState<DraftState | null>(null);
  const [documentConflict, setDocumentConflict] = useState<DocumentConflictState | null>(null);
  const [foldedDocumentKeys, setFoldedDocumentKeys] = useState<string[]>(() => loadFoldedDocumentKeys(documentSubject.id));
  const [annotationPanelOpenKeys, setAnnotationPanelOpenKeys] = useState<string[]>(
    () => (defaultAnnotationPanelOpenKeys ?? []),
  );
  const [autosaveDocumentKey, setAutosaveDocumentKey] = useState<string | null>(null);
  const [copiedDocumentKey, setCopiedDocumentKey] = useState<string | null>(null);
  const [highlightDocumentKey, setHighlightDocumentKey] = useState<string | null>(null);
  const [revisionMenuOpenKey, setRevisionMenuOpenKey] = useState<string | null>(null);
  const [selectedRevisionIds, setSelectedRevisionIds] = useState<Record<string, string | null>>({});
  const [diffViewKey, setDiffViewKey] = useState<string | null>(null);
  const autosaveDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const copiedDocumentTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const hasScrolledToHashRef = useRef(false);
  const {
    state: autosaveState,
    markDirty,
    reset,
    runSave,
  } = useAutosaveIndicator();

  const { data: documents } = useQuery({
    queryKey: documentSubject.documentsQueryKey,
    queryFn: documentSubject.listDocuments,
  });

  const { data: activeDocumentRevisions, isFetching: isFetchingDocumentRevisions } = useQuery({
    queryKey: revisionMenuOpenKey
      ? documentSubject.documentRevisionsQueryKey(revisionMenuOpenKey)
      : documentSubject.idleDocumentRevisionsQueryKey,
    queryFn: async () => {
      if (!revisionMenuOpenKey) return [];
      return documentSubject.listDocumentRevisions(revisionMenuOpenKey);
    },
    enabled: Boolean(revisionMenuOpenKey),
  });

  const invalidateIssueDocuments = useCallback(() => {
    if (documentSubject.detailQueryKey) {
      queryClient.invalidateQueries({ queryKey: documentSubject.detailQueryKey });
    }
    queryClient.invalidateQueries({ queryKey: documentSubject.documentsQueryKey });
    queryClient.invalidateQueries({
      predicate: (query) =>
        Array.isArray(query.queryKey)
        && query.queryKey.includes(documentSubject.id)
        && (
          query.queryKey.includes("document-revisions")
          || query.queryKey.includes("document-annotations")
          || query.queryKey.includes("revisions")
        ),
    });
  }, [documentSubject, queryClient]);

  const syncDocumentCaches = useCallback((document: IssueDocument) => {
    if (documentSubject.hideSystemDocuments && isSystemIssueDocumentKey(document.key)) return;
    queryClient.setQueryData<IssueDocument[] | undefined>(
      documentSubject.documentsQueryKey,
      (current) => {
        if (!current) return [document];
        const existingIndex = current.findIndex((entry) => entry.key === document.key);
        if (existingIndex === -1) return [...current, document];
        return current.map((entry, index) => index === existingIndex ? document : entry);
      },
    );
    documentSubject.syncDetailCache?.(queryClient, document);
  }, [documentSubject, queryClient]);

  const upsertDocument = useMutation({
    mutationFn: async (nextDraft: DraftState) =>
      documentSubject.upsertDocument(nextDraft.key, {
        title: isPlanKey(nextDraft.key) ? null : nextDraft.title.trim() || null,
        format: "markdown",
        body: nextDraft.body,
        baseRevisionId: nextDraft.baseRevisionId,
      }),
  });

  const deleteDocument = useMutation({
    mutationFn: (key: string) => documentSubject.deleteDocument
      ? documentSubject.deleteDocument(key)
      : Promise.reject(new Error("Document deletion is not available")),
    onSuccess: () => {
      setError(null);
      setConfirmDeleteKey(null);
      invalidateIssueDocuments();
    },
    onError: (err) => {
      setError(err instanceof Error ? err.message : "Failed to delete document");
    },
  });

  const restoreDocumentRevision = useMutation({
    mutationFn: ({ key, revisionId }: { key: string; revisionId: string }) =>
      documentSubject.restoreDocumentRevision
        ? documentSubject.restoreDocumentRevision(key, revisionId)
        : Promise.reject(new Error("Document revision restore is not available")),
    onSuccess: (document, variables) => {
      syncDocumentCaches(document);
      setSelectedRevisionIds((current) => ({ ...current, [variables.key]: null }));
      setDraft((current) => current?.key === variables.key ? null : current);
      setDocumentConflict((current) => current?.key === variables.key ? null : current);
      resetAutosaveState();
      setError(null);
      invalidateIssueDocuments();
    },
    onError: (err) => {
      setError(err instanceof Error ? err.message : "Failed to restore document revision");
    },
  });

  const setDocumentLock = useMutation({
    mutationFn: ({ key, locked }: { key: string; locked: boolean }) =>
      documentSubject.setDocumentLock
        ? documentSubject.setDocumentLock(key, locked)
        : Promise.reject(new Error("Document locking is not available")),
    onSuccess: (document) => {
      syncDocumentCaches(document);
      setDraft((current) => current?.key === document.key ? null : current);
      setDocumentConflict((current) => current?.key === document.key ? null : current);
      resetAutosaveState();
      setError(null);
      invalidateIssueDocuments();
    },
    onError: (err) => {
      setError(err instanceof Error ? err.message : "Failed to update document lock");
    },
  });

  const sortedDocuments = useMemo(() => {
    return (documents ?? []).filter((doc) => !documentSubject.hideSystemDocuments || !isSystemIssueDocumentKey(doc.key)).sort((a, b) => {
      if (a.key === "plan" && b.key !== "plan") return -1;
      if (a.key !== "plan" && b.key === "plan") return 1;
      return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
    });
  }, [documentSubject.hideSystemDocuments, documents]);

  const feedbackVoteByTargetId = useMemo(() => {
    const map = new Map<string, FeedbackVoteValue>();
    for (const feedbackVote of feedbackVotes) {
      if (feedbackVote.targetType !== "issue_document_revision") continue;
      map.set(feedbackVote.targetId, feedbackVote.vote);
    }
    return map;
  }, [feedbackVotes]);

  const hasRealPlan = sortedDocuments.some((doc) => doc.key === "plan");
  const isEmpty = sortedDocuments.length === 0 && !documentSubject.legacyPlanDocument;
  const newDocumentKeyError =
    draft?.isNew && draft.key.trim().length > 0 && !DOCUMENT_KEY_PATTERN.test(draft.key.trim())
      ? "Use lowercase letters, numbers, -, or _, and start with a letter or number."
      : null;

  const resetAutosaveState = useCallback(() => {
    setAutosaveDocumentKey(null);
    reset();
  }, [reset]);

  const markDocumentDirty = useCallback((key: string) => {
    setAutosaveDocumentKey(key);
    markDirty();
  }, [markDirty]);

  const beginNewDocument = () => {
    resetAutosaveState();
    setDocumentConflict(null);
    setDraft({
      key: "",
      title: "",
      body: "",
      baseRevisionId: null,
      isNew: true,
    });
    setError(null);
  };

  const beginEdit = (key: string) => {
    const doc = sortedDocuments.find((entry) => entry.key === key);
    if (!doc) return;
    const conflictedDraft = documentConflict?.key === key ? documentConflict.localDraft : null;
    setFoldedDocumentKeys((current) => current.filter((entry) => entry !== key));
    resetAutosaveState();
    setDocumentConflict((current) => current?.key === key ? current : null);
    setDraft({
      key: conflictedDraft?.key ?? doc.key,
      title: conflictedDraft?.title ?? doc.title ?? "",
      body: conflictedDraft?.body ?? doc.body,
      baseRevisionId: conflictedDraft?.baseRevisionId ?? doc.latestRevisionId,
      isNew: false,
    });
    setError(null);
  };

  const initialEditAppliedRef = useRef(false);
  useEffect(() => {
    if (!forceEditDocumentKey) return;
    if (initialEditAppliedRef.current) return;
    const target = (documents ?? []).find((entry) => entry.key === forceEditDocumentKey);
    if (!target) return;
    initialEditAppliedRef.current = true;
    beginEdit(forceEditDocumentKey);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [forceEditDocumentKey, documents]);

  const cancelDraft = () => {
    if (autosaveDebounceRef.current) {
      clearTimeout(autosaveDebounceRef.current);
    }
    resetAutosaveState();
    setDocumentConflict(null);
    setDraft(null);
    setError(null);
  };

  const commitDraft = useCallback(async (
    currentDraft: DraftState | null,
    options?: { clearAfterSave?: boolean; trackAutosave?: boolean; overrideConflict?: boolean },
  ) => {
    if (!currentDraft || upsertDocument.isPending) return false;
    const normalizedKey = currentDraft.key.trim().toLowerCase();
    const normalizedBody = currentDraft.body.trim();
    const normalizedTitle = currentDraft.title.trim();
    const activeConflict = documentConflict?.key === normalizedKey ? documentConflict : null;

    if (activeConflict && !options?.overrideConflict) {
      if (options?.trackAutosave) {
        resetAutosaveState();
      }
      return false;
    }

    if (!normalizedKey || !normalizedBody) {
      if (currentDraft.isNew) {
        setError("Document key and body are required");
      } else if (!normalizedBody) {
        setError("Document body cannot be empty");
      }
      if (options?.trackAutosave) {
        resetAutosaveState();
      }
      return false;
    }

    if (!DOCUMENT_KEY_PATTERN.test(normalizedKey)) {
      setError("Document key must start with a letter or number and use only lowercase letters, numbers, -, or _.");
      if (options?.trackAutosave) {
        resetAutosaveState();
      }
      return false;
    }

    const existing = sortedDocuments.find((doc) => doc.key === normalizedKey);
    if (
      !currentDraft.isNew &&
      existing &&
      existing.body === currentDraft.body &&
      (existing.title ?? "") === currentDraft.title
    ) {
      if (options?.clearAfterSave) {
        setDraft((value) => (value?.key === normalizedKey ? null : value));
      }
      if (options?.trackAutosave) {
        resetAutosaveState();
      }
      return true;
    }

    const save = async () => {
      const saved = await upsertDocument.mutateAsync({
        ...currentDraft,
        key: normalizedKey,
        title: isPlanKey(normalizedKey) ? "" : normalizedTitle,
        body: currentDraft.body,
        baseRevisionId: options?.overrideConflict
          ? activeConflict?.serverDocument.latestRevisionId ?? currentDraft.baseRevisionId
          : currentDraft.baseRevisionId,
      });
      setError(null);
      setDocumentConflict((current) => current?.key === normalizedKey ? null : current);
      setDraft((value) => {
        if (!value || value.key !== normalizedKey) return value;
        if (options?.clearAfterSave) return null;
        return {
          key: saved.key,
          title: saved.title ?? "",
          body: saved.body,
          baseRevisionId: saved.latestRevisionId,
          isNew: false,
        };
      });
      syncDocumentCaches(saved);
      invalidateIssueDocuments();
    };

    try {
      if (options?.trackAutosave) {
        setAutosaveDocumentKey(normalizedKey);
        await runSave(save);
      } else {
        await save();
      }
      return true;
    } catch (err) {
      if (isLockedDocumentError(err)) {
        setError("Document is locked. Unlock it before editing.");
        resetAutosaveState();
        invalidateIssueDocuments();
        return false;
      }
      if (isDocumentConflictError(err)) {
        try {
          const latestDocument = await documentSubject.getDocument(normalizedKey);
          setDocumentConflict({
            key: normalizedKey,
            serverDocument: latestDocument,
            localDraft: {
              key: normalizedKey,
              title: isPlanKey(normalizedKey) ? "" : normalizedTitle,
              body: currentDraft.body,
              baseRevisionId: currentDraft.baseRevisionId,
              isNew: false,
            },
            showRemote: true,
          });
          setFoldedDocumentKeys((current) => current.filter((key) => key !== normalizedKey));
          setError(null);
          resetAutosaveState();
          return false;
        } catch {
          setError("Document changed remotely and the latest version could not be loaded");
          return false;
        }
      }
      setError(err instanceof Error ? err.message : "Failed to save document");
      return false;
    }
  }, [documentConflict, documentSubject, invalidateIssueDocuments, resetAutosaveState, runSave, sortedDocuments, syncDocumentCaches, upsertDocument]);

  const reloadDocumentFromServer = useCallback((key: string) => {
    if (documentConflict?.key !== key) return;
    const serverDocument = documentConflict.serverDocument;
    setDraft({
      key: serverDocument.key,
      title: serverDocument.title ?? "",
      body: serverDocument.body,
      baseRevisionId: serverDocument.latestRevisionId,
      isNew: false,
    });
    setDocumentConflict(null);
    resetAutosaveState();
    setError(null);
  }, [documentConflict, resetAutosaveState]);

  const overwriteDocumentFromDraft = useCallback(async (key: string) => {
    if (documentConflict?.key !== key) return;
    const sourceDraft =
      draft && draft.key === key && !draft.isNew
        ? draft
        : documentConflict.localDraft;
    await commitDraft(
      {
        ...sourceDraft,
        baseRevisionId: documentConflict.serverDocument.latestRevisionId,
      },
      {
        clearAfterSave: false,
        trackAutosave: true,
        overrideConflict: true,
      },
    );
  }, [commitDraft, documentConflict, draft]);

  const keepConflictedDraft = useCallback((key: string) => {
    if (documentConflict?.key !== key) return;
    setDraft(documentConflict.localDraft);
    setDocumentConflict((current) =>
      current?.key === key
        ? { ...current, showRemote: false }
        : current,
    );
    setError(null);
  }, [documentConflict]);

  const copyDocumentBody = useCallback(async (key: string, body: string) => {
    try {
      await navigator.clipboard.writeText(body);
      setCopiedDocumentKey(key);
      if (copiedDocumentTimerRef.current) {
        clearTimeout(copiedDocumentTimerRef.current);
      }
      copiedDocumentTimerRef.current = setTimeout(() => {
        setCopiedDocumentKey((current) => current === key ? null : current);
      }, 1400);
    } catch {
      setError("Could not copy document");
    }
  }, []);

  const getDocumentRevisions = useCallback((key: string) => {
    const cached = queryClient.getQueryData<DocumentRevision[]>(documentSubject.documentRevisionsQueryKey(key));
    if (cached) return cached;
    if (revisionMenuOpenKey === key) return activeDocumentRevisions ?? [];
    return [];
  }, [activeDocumentRevisions, documentSubject, queryClient, revisionMenuOpenKey]);

  const returnToLatestRevision = useCallback((key: string) => {
    setSelectedRevisionIds((current) => ({ ...current, [key]: null }));
    setError(null);
  }, []);

  const previewRevision = useCallback((doc: IssueDocument, revisionId: string) => {
    const revisionState = deriveDocumentRevisionState(doc, getDocumentRevisions(doc.key));
    const selectedRevision = revisionState.revisions.find((revision) => revision.id === revisionId);
    if (!selectedRevision) return;
    if (selectedRevision.id === revisionState.currentRevision.id) {
      returnToLatestRevision(doc.key);
      return;
    }
    if (documentConflict?.key === doc.key || documentHasUnsavedChanges(doc, draft)) {
      setError("Save or cancel your local changes before viewing an older revision.");
      return;
    }
    resetAutosaveState();
    setDraft((current) => current?.key === doc.key ? null : current);
    setDocumentConflict((current) => current?.key === doc.key ? null : current);
    setFoldedDocumentKeys((current) => current.filter((entry) => entry !== doc.key));
    setSelectedRevisionIds((current) => ({ ...current, [doc.key]: selectedRevision.id }));
    setError(null);
  }, [documentConflict, draft, getDocumentRevisions, resetAutosaveState, returnToLatestRevision]);

  const toggleDocumentLock = useCallback((doc: IssueDocument, locked: boolean) => {
    if (!canManageDocumentLocks || setDocumentLock.isPending) return;
    if (locked && (documentConflict?.key === doc.key || documentHasUnsavedChanges(doc, draft))) {
      setError("Save or cancel local changes before changing the document lock.");
      return;
    }
    setDocumentLock.mutate({ key: doc.key, locked });
  }, [canManageDocumentLocks, documentConflict, draft, setDocumentLock]);

  const handleDraftBlur = async (event: React.FocusEvent<HTMLDivElement>) => {
    if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;
    if (autosaveDebounceRef.current) {
      clearTimeout(autosaveDebounceRef.current);
    }
    await commitDraft(draft, { clearAfterSave: true, trackAutosave: true });
  };

  const handleDraftKeyDown = async (event: React.KeyboardEvent) => {
    if (event.key === "Escape") {
      event.preventDefault();
      cancelDraft();
      return;
    }
    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
      event.preventDefault();
      if (autosaveDebounceRef.current) {
        clearTimeout(autosaveDebounceRef.current);
      }
      await commitDraft(draft, { clearAfterSave: false, trackAutosave: true });
    }
  };

  useEffect(() => {
    setFoldedDocumentKeys(loadFoldedDocumentKeys(documentSubject.id));
  }, [documentSubject.id]);

  useEffect(() => {
    hasScrolledToHashRef.current = false;
  }, [documentSubject.id, location.hash]);

  useEffect(() => {
    const validKeys = new Set(sortedDocuments.map((doc) => doc.key));
    setFoldedDocumentKeys((current) => {
      const next = current.filter((key) => validKeys.has(key));
      if (next.length !== current.length) {
        saveFoldedDocumentKeys(documentSubject.id, next);
      }
      return next;
    });
  }, [documentSubject.id, sortedDocuments]);

  useEffect(() => {
    saveFoldedDocumentKeys(documentSubject.id, foldedDocumentKeys);
  }, [documentSubject.id, foldedDocumentKeys]);

  useEffect(() => {
    if (!documentConflict) return;
    const latest = sortedDocuments.find((doc) => doc.key === documentConflict.key);
    if (!latest || latest.latestRevisionId === documentConflict.serverDocument.latestRevisionId) return;
    setDocumentConflict((current) =>
      current?.key === latest.key
        ? { ...current, serverDocument: latest }
        : current,
    );
  }, [documentConflict, sortedDocuments]);

  useEffect(() => {
    const hash = location.hash;
    if (!hash.startsWith("#document-")) return;
    const documentKey = decodeURIComponent(hash.slice("#document-".length));
    const targetExists = sortedDocuments.some((doc) => doc.key === documentKey)
      || (documentKey === "plan" && Boolean(documentSubject.legacyPlanDocument));
    if (!targetExists || hasScrolledToHashRef.current) return;
    setFoldedDocumentKeys((current) => current.filter((key) => key !== documentKey));
    const element = document.getElementById(`document-${documentKey}`);
    if (!element) return;
    hasScrolledToHashRef.current = true;
    setHighlightDocumentKey(documentKey);
    element.scrollIntoView({ behavior: "smooth", block: "center" });
    const timer = setTimeout(() => setHighlightDocumentKey((current) => current === documentKey ? null : current), 3000);
    return () => clearTimeout(timer);
  }, [documentSubject.legacyPlanDocument, location.hash, sortedDocuments]);

  useEffect(() => {
    return () => {
      if (autosaveDebounceRef.current) {
        clearTimeout(autosaveDebounceRef.current);
      }
      if (copiedDocumentTimerRef.current) {
        clearTimeout(copiedDocumentTimerRef.current);
      }
    };
  }, []);

  useEffect(() => {
    if (!draft || draft.isNew) return;
    if (documentConflict?.key === draft.key) return;
    const existing = sortedDocuments.find((doc) => doc.key === draft.key);
    if (!existing) return;
    const hasChanges =
      existing.body !== draft.body ||
      (existing.title ?? "") !== draft.title;
    if (!hasChanges) {
      if (autosaveState !== "saved") {
        resetAutosaveState();
      }
      return;
    }
    markDocumentDirty(draft.key);
    if (autosaveDebounceRef.current) {
      clearTimeout(autosaveDebounceRef.current);
    }
    autosaveDebounceRef.current = setTimeout(() => {
      void commitDraft(draft, { clearAfterSave: false, trackAutosave: true });
    }, DOCUMENT_AUTOSAVE_DEBOUNCE_MS);

    return () => {
      if (autosaveDebounceRef.current) {
        clearTimeout(autosaveDebounceRef.current);
      }
    };
  }, [autosaveState, commitDraft, documentConflict, draft, markDocumentDirty, resetAutosaveState, sortedDocuments]);

  const documentBodyShellClassName = "mt-3";
  const documentBodyPaddingClassName = "";
  const documentBodyContentClassName = "paperclip-edit-in-place-content min-h-(--sz-220px) text-sm leading-7";
  const toggleFoldedDocument = (key: string) => {
    setFoldedDocumentKeys((current) =>
      current.includes(key)
        ? current.filter((entry) => entry !== key)
        : [...current, key],
    );
  };
  const setAnnotationPanelOpen = useCallback((key: string, nextOpen: boolean) => {
    setAnnotationPanelOpenKeys((current) => {
      const isOpen = current.includes(key);
      if (nextOpen && !isOpen) return [...current, key];
      if (!nextOpen && isOpen) return current.filter((entry) => entry !== key);
      return current;
    });
    if (nextOpen) {
      setFoldedDocumentKeys((current) => current.filter((entry) => entry !== key));
    }
  }, []);
  const toggleAnnotationPanel = useCallback((key: string) => {
    setAnnotationPanelOpenKeys((current) => {
      if (current.includes(key)) return current.filter((entry) => entry !== key);
      setFoldedDocumentKeys((folded) => folded.filter((entry) => entry !== key));
      return [...current, key];
    });
  }, []);

  return (
    <div className="space-y-3">
      {isEmpty && !draft?.isNew ? (
        <div className="flex flex-wrap items-center justify-end gap-2 min-w-0">
          {extraActions}
          <Button variant="outline" size="sm" onClick={beginNewDocument} className="shrink-0">
            <Plus className="mr-1.5 h-3.5 w-3.5" />
            <span className="hidden sm:inline">New document</span>
            <span className="sm:hidden">New</span>
          </Button>
        </div>
      ) : (
        <div className="flex flex-wrap items-center gap-2 min-w-0">
          <h3 className="w-full text-sm font-medium text-muted-foreground shrink-0 sm:w-auto">Documents</h3>
          <div className="flex flex-wrap items-center gap-2 min-w-0 sm:ml-auto">
            {extraActions}
            <Button variant="outline" size="sm" onClick={beginNewDocument} className="shrink-0">
              <Plus className="mr-1.5 h-3.5 w-3.5" />
              <span className="hidden sm:inline">New document</span>
              <span className="sm:hidden">New</span>
            </Button>
          </div>
        </div>
      )}

      {error && <p className="text-xs text-destructive">{error}</p>}

      {draft?.isNew && (
        <div
          className="space-y-3 rounded-lg border border-border bg-accent/10 p-3"
          onBlurCapture={handleDraftBlur}
          onKeyDown={handleDraftKeyDown}
        >
          <Input
            autoFocus
            value={draft.key}
            onChange={(event) =>
              setDraft((current) => current ? { ...current, key: event.target.value.toLowerCase() } : current)
            }
            placeholder="Document key"
          />
          {newDocumentKeyError && (
            <p className="text-xs text-destructive">{newDocumentKeyError}</p>
          )}
          {!isPlanKey(draft.key) && (
            <Input
              value={draft.title}
              onChange={(event) =>
                setDraft((current) => current ? { ...current, title: event.target.value } : current)
              }
              placeholder="Optional title"
            />
          )}
          <MarkdownEditor
            value={draft.body}
            onChange={(body) =>
              setDraft((current) => current ? { ...current, body } : current)
            }
            placeholder="Markdown body"
            bordered={false}
            className="bg-transparent"
            contentClassName="min-h-(--sz-220px) text-sm leading-7"
            mentions={mentions}
            imageUploadHandler={imageUploadHandler}
            onSubmit={() => void commitDraft(draft, { clearAfterSave: false, trackAutosave: false })}
          />
          <div className="flex items-center justify-end gap-2">
            <Button variant="outline" size="sm" onClick={cancelDraft}>
              <X className="mr-1.5 h-3.5 w-3.5" />
              Cancel
            </Button>
            <Button
              size="sm"
              onClick={() => void commitDraft(draft, { clearAfterSave: false, trackAutosave: false })}
              disabled={upsertDocument.isPending}
            >
              {upsertDocument.isPending ? "Saving..." : "Create document"}
            </Button>
          </div>
        </div>
      )}

      {!hasRealPlan && documentSubject.legacyPlanDocument ? (
        <div
          id="document-plan"
          className={cn(
            "rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 transition-colors duration-1000",
            highlightDocumentKey === "plan" && "border-primary/50 bg-primary/5",
          )}
        >
          <div className="mb-2 flex items-center gap-2">
            <FileText className="h-4 w-4 text-amber-600" />
            <Badge variant="outline" className="border-amber-500/30 font-mono text-(length:--text-nano) uppercase tracking-(--tracking-eyebrow) text-amber-700 dark:text-amber-300">
              PLAN
            </Badge>
          </div>
          <div className={documentBodyPaddingClassName}>
            {renderFoldableBody(documentSubject.legacyPlanDocument.body, documentBodyContentClassName, externalReferences)}
          </div>
        </div>
      ) : null}

      <div className="space-y-3">
        {sortedDocuments.map((doc) => {
          const isLocked = Boolean(doc.lockedAt);
          const activeDraft = !isLocked && draft?.key === doc.key && !draft.isNew ? draft : null;
          const activeConflict = !isLocked && documentConflict?.key === doc.key ? documentConflict : null;
          const isFolded = foldedDocumentKeys.includes(doc.key);
          const rawRevisionHistory = getDocumentRevisions(doc.key);
          const revisionState = deriveDocumentRevisionState(doc, rawRevisionHistory);
          const revisionHistory = revisionState.revisions;
          const currentRevision = revisionState.currentRevision;
          const selectedRevisionId = selectedRevisionIds[doc.key] ?? null;
          const selectedHistoricalRevision = selectedRevisionId
            ? revisionHistory.find((revision) => revision.id === selectedRevisionId) ?? null
            : null;
          const isHistoricalPreview = Boolean(selectedHistoricalRevision);
          const displayedTitle = selectedHistoricalRevision
            ? selectedHistoricalRevision.title ?? ""
            : activeDraft?.title ?? currentRevision.title ?? "";
          const displayedBody = selectedHistoricalRevision?.body ?? activeDraft?.body ?? currentRevision.body;
          const displayedRevisionNumber = selectedHistoricalRevision?.revisionNumber ?? currentRevision.revisionNumber;
          const displayedUpdatedAt = selectedHistoricalRevision?.createdAt ?? currentRevision.createdAt;
          const showTitle = !isPlanKey(doc.key) && !!displayedTitle.trim() && !titlesMatchKey(displayedTitle, doc.key);
          const canVoteOnDocument = Boolean(doc.latestRevisionId && doc.updatedByAgentId && !doc.updatedByUserId && onVote);
          const lockActionPending = setDocumentLock.isPending && setDocumentLock.variables?.key === doc.key;
          const annotationTarget = annotationTargetForKey(doc.key);

          return (
            <div
              key={doc.id}
              id={`document-${doc.key}`}
              className={cn(
                "rounded-lg border border-border p-3 transition-colors duration-1000",
                highlightDocumentKey === doc.key && "border-primary/50 bg-primary/5",
              )}
            >
              <DocumentFrameHeader
                documentKey={doc.key}
                folded={isFolded}
                onToggleFolded={() => toggleFoldedDocument(doc.key)}
                sourceTrustSlot={<SourceTrustBadge sourceTrust={doc.sourceTrust} artifactLabel="document" />}
                revisionMenu={{
                  open: revisionMenuOpenKey === doc.key,
                  onOpenChange: (open) => setRevisionMenuOpenKey(open ? doc.key : null),
                  loading: revisionMenuOpenKey === doc.key && isFetchingDocumentRevisions,
                  revisions: revisionHistory.map((revision) => ({
                    id: revision.id,
                    revisionNumber: revision.revisionNumber,
                    createdAt: revision.createdAt,
                    actor: getRevisionActor(revision, { agentMap, userProfileMap }),
                  })),
                  selectedRevisionId,
                  currentRevisionId: currentRevision.id,
                  displayedRevisionNumber,
                  historicalPreview: isHistoricalPreview,
                  onSelectRevision: (revisionId) => previewRevision(doc, revisionId),
                }}
                updatedAt={displayedUpdatedAt}
                annotationSlot={documentSubject.annotations && !isSystemIssueDocumentKey(doc.key) ? (
                  <DocumentAnnotationsCountChip
                    issueId={documentSubject.annotations.issueId}
                    target={annotationTarget}
                    docKey={doc.key}
                    panelOpen={annotationPanelOpenKeys.includes(doc.key)}
                    onToggle={() => toggleAnnotationPanel(doc.key)}
                  />
                ) : null}
                titleSlot={showTitle ? <p className="mt-2 text-sm font-medium">{displayedTitle}</p> : null}
                actionsSlot={
                  <>
                    {canManageDocumentLocks ? (
                    <Button
                      variant="ghost"
                      size="icon-xs"
                      className={cn(
                        "text-muted-foreground transition-colors",
                        isLocked && "text-amber-700 hover:text-amber-800 dark:text-amber-300 dark:hover:text-amber-200",
                      )}
                      title={isLocked ? "Unlock document" : "Lock document"}
                      aria-label={isLocked ? `Unlock ${doc.key} document` : `Lock ${doc.key} document`}
                      onClick={() => toggleDocumentLock(doc, !isLocked)}
                      disabled={lockActionPending}
                    >
                      {isLocked ? <Lock className="h-3.5 w-3.5" /> : <Unlock className="h-3.5 w-3.5" />}
                    </Button>
                    ) : isLocked ? (
                      <span title="Locked document" aria-label="Locked document" className="inline-flex h-6 w-6 items-center justify-center text-amber-700 dark:text-amber-300">
                        <Lock className="h-3.5 w-3.5" />
                      </span>
                    ) : null}
                    <Button
                      variant="ghost"
                      size="icon-xs"
                      className={cn(
                        "text-muted-foreground transition-colors",
                        copiedDocumentKey === doc.key && "text-foreground",
                      )}
                      title={copiedDocumentKey === doc.key ? "Copied" : "Copy document"}
                      onClick={() => void copyDocumentBody(doc.key, displayedBody)}
                    >
                      {copiedDocumentKey === doc.key ? (
                        <Check className="h-3.5 w-3.5" />
                      ) : (
                        <Copy className="h-3.5 w-3.5" />
                      )}
                    </Button>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button
                          variant="ghost"
                          size="icon-xs"
                          className="text-muted-foreground"
                          title="Document actions"
                        >
                          <MoreHorizontal className="h-3.5 w-3.5" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        {!isHistoricalPreview && !isLocked ? (
                          <DropdownMenuItem onClick={() => beginEdit(doc.key)}>
                            <FilePenLine className="h-3.5 w-3.5" />
                            Edit document
                          </DropdownMenuItem>
                        ) : null}
                        {!isHistoricalPreview && !isLocked ? <DropdownMenuSeparator /> : null}
                        <DropdownMenuItem
                          onClick={() => downloadDocumentFile(doc.key, displayedBody)}
                        >
                          <Download className="h-3.5 w-3.5" />
                          Download document
                        </DropdownMenuItem>
                        {doc.latestRevisionNumber > 1 ? (
                          <DropdownMenuItem onClick={() => setDiffViewKey(doc.key)}>
                            <Diff className="h-3.5 w-3.5" />
                            View diff
                          </DropdownMenuItem>
                        ) : null}
                        {canDeleteDocuments && !isLocked ? <DropdownMenuSeparator /> : null}
                        {canDeleteDocuments && !isLocked ? (
                          <DropdownMenuItem
                            variant="destructive"
                            onClick={() => setConfirmDeleteKey(doc.key)}
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                            Delete document
                          </DropdownMenuItem>
                        ) : null}
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </>
                }
              />

              {!isFolded ? (
                <div
                  className="mt-3 space-y-3"
                  onBlurCapture={!isHistoricalPreview
                    ? async (event) => {
                        if (activeDraft) {
                          await handleDraftBlur(event);
                        }
                      }
                    : undefined}
                  onKeyDown={!isHistoricalPreview
                    ? async (event) => {
                        if (activeDraft) {
                          await handleDraftKeyDown(event);
                        }
                      }
                    : undefined}
                >
                  {isHistoricalPreview && selectedHistoricalRevision && (
                    <div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-3">
                      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                        <div className="space-y-1">
                          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
                            Viewing revision {selectedHistoricalRevision.revisionNumber}
                          </p>
                          <p className="text-xs text-muted-foreground">
                            This is a historical preview. Restoring it creates a new latest revision and keeps history append-only.
                          </p>
                        </div>
                        <div className="flex flex-wrap items-center gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => returnToLatestRevision(doc.key)}
                          >
                            Return to latest
                          </Button>
                          {!isLocked ? (
                            <Button
                              size="sm"
                              onClick={() => restoreDocumentRevision.mutate({
                                key: doc.key,
                                revisionId: selectedHistoricalRevision.id,
                              })}
                              disabled={restoreDocumentRevision.isPending}
                            >
                              {restoreDocumentRevision.isPending && restoreDocumentRevision.variables?.key === doc.key
                                ? "Restoring..."
                                : "Restore this revision"}
                            </Button>
                          ) : null}
                        </div>
                      </div>
                    </div>
                  )}
                  {activeConflict && !isHistoricalPreview && (
                    <div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-3">
                      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                        <div className="space-y-1">
                          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">Out of date</p>
                          <p className="text-xs text-muted-foreground">
                            This document changed while you were editing. Your local draft is preserved and autosave is paused.
                          </p>
                        </div>
                        <div className="flex flex-wrap items-center gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() =>
                              setDocumentConflict((current) =>
                                current?.key === doc.key
                                  ? { ...current, showRemote: !current.showRemote }
                                  : current,
                              )
                            }
                          >
                            {activeConflict.showRemote ? "Hide remote" : "Review remote"}
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => keepConflictedDraft(doc.key)}
                          >
                            Keep my draft
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => reloadDocumentFromServer(doc.key)}
                          >
                            Reload remote
                          </Button>
                          <Button
                            size="sm"
                            onClick={() => void overwriteDocumentFromDraft(doc.key)}
                            disabled={upsertDocument.isPending}
                          >
                            {upsertDocument.isPending ? "Saving..." : "Overwrite remote"}
                          </Button>
                        </div>
                      </div>
                      {activeConflict.showRemote && (
                        <div className="mt-3 rounded-md border border-border/70 bg-background/60 p-3">
                          <div className="mb-2 flex items-center gap-2 text-(length:--text-micro) text-muted-foreground">
                            <span>Remote revision {activeConflict.serverDocument.latestRevisionNumber}</span>
                            <span>•</span>
                            <span>updated {relativeTime(activeConflict.serverDocument.updatedAt)}</span>
                          </div>
                          {!isPlanKey(doc.key) && activeConflict.serverDocument.title ? (
                            <p className="mb-2 text-sm font-medium">{activeConflict.serverDocument.title}</p>
                          ) : null}
                          {renderFoldableBody(activeConflict.serverDocument.body, "text-sm leading-7", externalReferences)}
                        </div>
                      )}
                    </div>
                  )}
                  {activeDraft && !isPlanKey(doc.key) && !isHistoricalPreview && (
                    <Input
                      value={activeDraft.title}
                      onChange={(event) => {
                        markDocumentDirty(doc.key);
                        setDraft((current) => current ? { ...current, title: event.target.value } : current);
                      }}
                      placeholder="Optional title"
                    />
                  )}
                  <div
                    className={`${documentBodyShellClassName} ${
                      activeDraft || isHistoricalPreview ? "" : "rounded-md hover:bg-accent/10"
                    }`}
                  >
                    {(() => {
                      const renderedDocumentBody = isHistoricalPreview ? (
                        renderFoldableBody(displayedBody, documentBodyContentClassName, externalReferences)
                      ) : activeDraft ? (
                        <MarkdownEditor
                          value={displayedBody}
                          onChange={(body) => {
                            markDocumentDirty(doc.key);
                            setDraft((current) => {
                              if (current && current.key === doc.key && !current.isNew) {
                                return { ...current, body };
                              }
                              return current;
                            });
                          }}
                          placeholder="Markdown body"
                          bordered={false}
                          className="bg-transparent"
                          contentClassName={documentBodyContentClassName}
                          mentions={mentions}
                          imageUploadHandler={imageUploadHandler}
                          onSubmit={() => void commitDraft(activeDraft ?? draft, { clearAfterSave: false, trackAutosave: true })}
                        />
                      ) : (
                        renderFoldableBody(displayedBody, documentBodyContentClassName, externalReferences)
                      );

                      return documentSubject.annotations ? (
                        <IssueDocumentAnnotations
                          issueId={documentSubject.annotations.issueId}
                          target={annotationTarget}
                          doc={doc}
                          bodyMarkdown={displayedBody}
                          draftDirty={Boolean(activeDraft) && (
                            (activeDraft?.body ?? doc.body) !== doc.body
                            || (autosaveDocumentKey === doc.key && autosaveState === "saving")
                          )}
                          draftConflicted={Boolean(activeConflict)}
                          historicalPreview={isHistoricalPreview}
                          locationHash={location.hash}
                          panelOpen={annotationPanelOpenKeys.includes(doc.key)}
                          onPanelOpenChange={(next) => setAnnotationPanelOpen(doc.key, next)}
                          agentMap={agentMap}
                          userProfileMap={userProfileMap}
                          defaultFocusedThreadId={defaultAnnotationFocusedThreadIds?.[doc.key]}
                        >
                          {renderedDocumentBody}
                        </IssueDocumentAnnotations>
                      ) : renderedDocumentBody;
                    })()}
                  </div>
                  <div className="flex min-h-4 items-center justify-end px-1">
                    <span
                      className={`text-(length:--text-micro) transition-opacity duration-150 ${
                        isHistoricalPreview
                          ? "text-amber-700 dark:text-amber-300"
                          : activeConflict
                          ? "text-amber-700 dark:text-amber-300"
                          : autosaveState === "error"
                            ? "text-destructive"
                            : "text-muted-foreground"
                      } ${activeDraft || isHistoricalPreview ? "opacity-100" : "opacity-0"}`}
                    >
                      {isHistoricalPreview
                        ? "Viewing historical revision"
                        : activeDraft
                          ? activeConflict
                          ? "Out of date"
                          : autosaveDocumentKey === doc.key
                            ? autosaveState === "saving"
                              ? "Autosaving..."
                              : autosaveState === "saved"
                                ? "Saved"
                                : autosaveState === "error"
                                  ? "Could not save"
                                  : ""
                            : ""
                          : ""}
                    </span>
                  </div>
                  {canVoteOnDocument && doc.latestRevisionId ? (
                    <OutputFeedbackButtons
                      activeVote={feedbackVoteByTargetId.get(doc.latestRevisionId) ?? null}
                      sharingPreference={feedbackDataSharingPreference}
                      termsUrl={feedbackTermsUrl}
                      onVote={(vote: FeedbackVoteValue, options?: { allowSharing?: boolean; reason?: string }) =>
                        onVote?.(doc.latestRevisionId!, vote, options) ?? Promise.resolve()
                      }
                    />
                  ) : null}
                </div>
              ) : null}

              {confirmDeleteKey === doc.key && (
                <div className="mt-3 flex items-center justify-between gap-3 rounded-md border border-destructive/20 bg-destructive/5 px-4 py-3">
                  <p className="text-sm text-destructive font-medium">
                    Delete this document? This cannot be undone.
                  </p>
                  <div className="flex items-center gap-2 shrink-0">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setConfirmDeleteKey(null)}
                      disabled={deleteDocument.isPending}
                    >
                      Cancel
                    </Button>
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={() => deleteDocument.mutate(doc.key)}
                      disabled={deleteDocument.isPending}
                    >
                      {deleteDocument.isPending ? "Deleting..." : "Delete"}
                    </Button>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {diffViewKey && (() => {
        const diffDoc = sortedDocuments.find((d) => d.key === diffViewKey);
        if (!diffDoc) return null;
        return (
          <DocumentDiffModal
            documentKey={diffDoc.key}
            latestRevisionNumber={diffDoc.latestRevisionNumber}
            revisionsQueryKey={documentSubject.documentRevisionsQueryKey(diffDoc.key)}
            revisionsQueryFn={() => documentSubject.listDocumentRevisions(diffDoc.key)}
            open
            onOpenChange={(open) => { if (!open) setDiffViewKey(null); }}
          />
        );
      })()}
    </div>
  );
}