@agent-native/core 0.181.0 → 0.181.1-nightly-20260916144018

package/corpus/templates/content/app/components/editor/DocumentReconcileRecovery.tsx

@@ -0,0 +1,109 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { RecoveryComparison } from "./RecoveryComparison";
+import type {
+  DocumentReconcileRecoveryState,
+  ReconcileSaveBase,
+} from "./useDocumentReconcileRecovery";
+
+export function DocumentReconcileRecovery({
+  state,
+  server,
+  canEdit,
+  onKeepMine,
+  onUseSaved,
+  onSaveSeparately,
+  onCopy,
+  onClose,
+}: {
+  state: DocumentReconcileRecoveryState;
+  server: ReconcileSaveBase;
+  canEdit: boolean;
+  onKeepMine: (base: ReconcileSaveBase) => Promise<boolean>;
+  onUseSaved: (base: ReconcileSaveBase) => Promise<boolean>;
+  onSaveSeparately: (base: ReconcileSaveBase) => Promise<boolean>;
+  onCopy: () => Promise<void>;
+  onClose: () => void;
+}) {
+  const t = useT();
+  const [reviewed, setReviewed] = useState<ReconcileSaveBase | null>(null);
+  const stale =
+    reviewed !== null &&
+    (reviewed.updatedAt !== server.updatedAt ||
+      reviewed.revision !== server.revision ||
+      reviewed.title !== server.title ||
+      reviewed.content !== server.content);
+  const message = state.saving
+    ? t("editor.reconcileSaving")
+    : state.reason === "conflict"
+      ? t("editor.reconcileConflict")
+      : state.reason === "save-failed"
+        ? t("editor.reconcileSaveFailed")
+        : t("editor.reconcileFailed");
+
+  async function finish(action: (base: ReconcileSaveBase) => Promise<boolean>) {
+    if (!reviewed || stale || state.saving) return;
+    if (await action(reviewed)) setReviewed(null);
+  }
+
+  return (
+    <Dialog
+      open={reviewed !== null}
+      onOpenChange={(open) => {
+        if (open) return;
+        if (state.saving) return;
+        setReviewed(null);
+        onClose();
+      }}
+    >
+      <div
+        className="flex flex-wrap items-center gap-2 border-b bg-muted/40 px-4 py-2 text-sm"
+        data-document-reconcile-conflict
+      >
+        <span className="me-auto min-w-0 flex-1 basis-56" role="status">
+          {message}
+        </span>
+        <DialogTrigger asChild>
+          <Button
+            type="button"
+            size="sm"
+            disabled={state.saving}
+            onClick={() => setReviewed({ ...server })}
+          >
+            {t("editor.reconcileReview")}
+          </Button>
+        </DialogTrigger>
+      </div>
+      <DialogContent className="flex h-[min(46rem,calc(100dvh-2rem))] max-w-[min(72rem,calc(100vw-2rem))] flex-col overflow-hidden p-0 sm:max-w-[min(72rem,calc(100vw-2rem))]">
+        <DialogTitle className="sr-only">
+          {t("editor.reconcileReview")}
+        </DialogTitle>
+        <RecoveryComparison
+          mine={{ title: state.localTitle, content: state.localDraft }}
+          saved={{
+            title: reviewed?.title ?? server.title ?? "",
+            content: reviewed?.content ?? "",
+          }}
+          busy={state.saving}
+          keepMineDisabled={!canEdit || !reviewed?.updatedAt}
+          failure={stale ? t("editor.reconcileReviewStale") : message}
+          stale={stale}
+          onRefresh={() => setReviewed({ ...server })}
+          onKeepMine={() => void finish(onKeepMine)}
+          onUseSaved={() => void finish(onUseSaved)}
+          onSaveSeparately={() => void finish(onSaveSeparately)}
+          onCopy={() => void onCopy()}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/corpus/templates/content/app/components/editor/PageDraftRecovery.tsx

@@ -2,13 +2,11 @@ import { writeClipboardText } from "@agent-native/core/client/clipboard";
 import { useT } from "@agent-native/core/client/i18n";
 import type { Document } from "@shared/api";
 import { useQueryClient } from "@tanstack/react-query";
-import DiffMatchPatch, { DIFF_DELETE, DIFF_INSERT } from "diff-match-patch";
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import { QueryErrorState } from "@/components/QueryErrorState";
-import { Button } from "@/components/ui/button";
 import {
   documentQueryFilter,
   isDocumentUpdateConflict,
@@ -21,34 +19,10 @@ import { isDocumentCreationPending } from "@/lib/optimistic-document";
 
 import { documentBodyHydrationIsPending } from "./body-hydration";
 import { DocumentEditorSkeleton } from "./DocumentEditorSkeleton";
+import { RecoveryComparison } from "./RecoveryComparison";
 
 type DraftRecoveryFailure = "conflict" | "error";
 
-function DiffValue({ value, other }: { value: string; other: string }) {
-  const segments = useMemo(() => {
-    const differ = new DiffMatchPatch();
-    const result = differ.diff_main(value, other);
-    differ.diff_cleanupSemantic(result);
-    return result;
-  }, [other, value]);
-  return (
-    <>
-      {segments.map(([operation, text], index) =>
-        operation === DIFF_INSERT ? null : operation === DIFF_DELETE ? (
-          <mark
-            key={`${index}:${text}`}
-            className="rounded-sm bg-accent text-accent-foreground"
-          >
-            {text}
-          </mark>
-        ) : (
-          <span key={`${index}:${text}`}>{text}</span>
-        ),
-      )}
-    </>
-  );
-}
-
 export function PageDraftRecovery({
   document,
   children,
@@ -149,12 +123,8 @@ export function PageDraftRecovery({
         expectedDraftVersion: draft.version,
         expectedDraftTitle: draft.title,
         expectedDraftContent: draft.content,
-        ...(choice === "keep_mine"
-          ? {
-              expectedDocumentUpdatedAt:
-                conflictDocument?.updatedAt ?? document.updatedAt,
-            }
-          : {}),
+        expectedDocumentUpdatedAt:
+          conflictDocument?.updatedAt ?? document.updatedAt,
       });
       if (result.status === "document_conflict") {
         setFailure("conflict");
@@ -192,126 +162,34 @@ export function PageDraftRecovery({
     );
   if (!drafts.data) return <DocumentEditorSkeleton title={document.title} />;
   if (!draft) return children;
-  const comparing =
-    failure === "conflict" || draft.deferredReason === "conflict";
   const savedVersion = conflictDocument ?? document;
   return (
-    <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-6">
-      <h2 className="text-sm font-semibold">
-        {comparing
-          ? t("editor.previewDraftCompare")
-          : t("editor.previewDraftRecovery")}
-      </h2>
-      <div className={comparing ? "grid gap-3 md:grid-cols-2" : "grid gap-3"}>
-        <section className="min-w-0 rounded-md border p-3">
-          {comparing ? (
-            <p className="mb-2 text-xs font-medium text-muted-foreground">
-              {t("editor.previewDraftYourEdits")}
-            </p>
-          ) : null}
-          <p className="font-medium break-words">
-            {comparing ? (
-              <DiffValue value={draft.title} other={savedVersion.title} />
-            ) : (
-              draft.title
-            )}
-          </p>
-          <pre className="mt-2 whitespace-pre-wrap break-words text-sm">
-            {comparing ? (
-              <DiffValue value={draft.content} other={savedVersion.content} />
-            ) : (
-              draft.content
-            )}
-          </pre>
-        </section>
-        {comparing ? (
-          <section className="min-w-0 rounded-md border p-3">
-            <p className="mb-2 text-xs font-medium text-muted-foreground">
-              {t("editor.previewDraftSavedVersion")}
-            </p>
-            <p className="font-medium break-words">
-              <DiffValue value={savedVersion.title} other={draft.title} />
-            </p>
-            <pre className="mt-2 whitespace-pre-wrap break-words text-sm">
-              <DiffValue value={savedVersion.content} other={draft.content} />
-            </pre>
-          </section>
-        ) : null}
-      </div>
-      {failure ? (
-        <p role="alert" className="text-sm text-destructive">
-          {failure === "conflict"
-            ? t("editor.previewDraftConflict")
-            : t("empty.genericError")}
-        </p>
-      ) : null}
-      <div className="flex flex-wrap gap-2">
-        {comparing ? (
-          <>
-            <Button
-              type="button"
-              size="sm"
-              disabled={busy}
-              onClick={() => void resolveConflict("keep_mine")}
-            >
-              {t("editor.previewDraftKeepMine")}
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              disabled={busy}
-              onClick={() => void resolveConflict("use_saved")}
-            >
-              {t("editor.previewDraftUseSaved")}
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              disabled={busy}
-              onClick={() => void resolveConflict("save_separately")}
-            >
-              {t("editor.previewDraftSaveSeparately")}
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant="ghost"
-              disabled={busy}
-              onClick={() => {
-                void writeClipboardText(draft.content).then((copied) => {
-                  if (copied) toast.success(t("editor.unsavedTextCopied"));
-                  else
-                    toast.error(t("editor.toolbar.clipboardAccessUnavailable"));
-                });
-              }}
-            >
-              {t("editor.copyUnsavedText")}
-            </Button>
-          </>
-        ) : (
-          <Button
-            type="button"
-            size="sm"
-            disabled={busy || documentBodyHydrationIsPending(document)}
-            onClick={() => void settleDraft(true)}
-          >
-            {t("editor.restorePreviewDraft")}
-          </Button>
-        )}
-        {!comparing ? (
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            disabled={busy}
-            onClick={() => void resolveConflict("use_saved")}
-          >
-            {t("editor.previewDraftUseSaved")}
-          </Button>
-        ) : null}
-      </div>
-    </div>
+    <RecoveryComparison
+      mine={{ title: draft.title, content: draft.content }}
+      saved={{ title: savedVersion.title, content: savedVersion.content }}
+      busy={busy}
+      keepMineDisabled={documentBodyHydrationIsPending(document)}
+      failure={
+        failure === "conflict"
+          ? t("editor.previewDraftConflict")
+          : failure === "error"
+            ? t("empty.genericError")
+            : null
+      }
+      onKeepMine={() => {
+        if (documentBodyHydrationIsPending(document)) return;
+        if (failure === "conflict" || draft.deferredReason === "conflict")
+          void resolveConflict("keep_mine");
+        else void settleDraft(true);
+      }}
+      onUseSaved={() => void resolveConflict("use_saved")}
+      onSaveSeparately={() => void resolveConflict("save_separately")}
+      onCopy={() => {
+        void writeClipboardText(draft.content).then((copied) => {
+          if (copied) toast.success(t("editor.unsavedTextCopied"));
+          else toast.error(t("editor.toolbar.clipboardAccessUnavailable"));
+        });
+      }}
+    />
   );
 }

package/corpus/templates/content/app/components/editor/RecoveryComparison.tsx

@@ -0,0 +1,230 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { SharedRichEditor } from "@agent-native/toolkit/editor";
+import { IconChevronDown, IconLoader2 } from "@tabler/icons-react";
+import DiffMatchPatch, {
+  DIFF_DELETE,
+  DIFF_EQUAL,
+  DIFF_INSERT,
+  type Diff,
+} from "diff-match-patch";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+const CONTEXT_LENGTH = 120;
+
+function contextualize(segments: Diff[]): Diff[] {
+  return segments.flatMap(([operation, text]) => {
+    if (operation !== DIFF_EQUAL || text.length <= CONTEXT_LENGTH * 2)
+      return [[operation, text] satisfies Diff];
+    return [
+      [operation, text.slice(0, CONTEXT_LENGTH)] satisfies Diff,
+      [operation, "\n…\n"] satisfies Diff,
+      [operation, text.slice(-CONTEXT_LENGTH)] satisfies Diff,
+    ];
+  });
+}
+
+function DiffValue({ value, other }: { value: string; other: string }) {
+  const segments = useMemo(() => {
+    const differ = new DiffMatchPatch();
+    const result = differ.diff_main(value, other);
+    differ.diff_cleanupSemantic(result);
+    return contextualize(result);
+  }, [other, value]);
+
+  return segments.map(([operation, text], index) =>
+    operation === DIFF_INSERT ? null : operation === DIFF_DELETE ? (
+      <mark
+        key={`${index}:${text}`}
+        className="rounded-sm bg-accent text-accent-foreground"
+      >
+        {text}
+      </mark>
+    ) : (
+      <span key={`${index}:${text}`}>{text}</span>
+    ),
+  );
+}
+
+interface RecoveryVersion {
+  title: string;
+  content: string;
+}
+
+export function RecoveryComparison({
+  mine,
+  saved,
+  busy,
+  keepMineDisabled = false,
+  failure,
+  stale = false,
+  onRefresh,
+  onKeepMine,
+  onUseSaved,
+  onSaveSeparately,
+  onCopy,
+}: {
+  mine: RecoveryVersion;
+  saved: RecoveryVersion;
+  busy: boolean;
+  keepMineDisabled?: boolean;
+  failure?: string | null;
+  stale?: boolean;
+  onRefresh?: () => void;
+  onKeepMine: () => void;
+  onUseSaved: () => void;
+  onSaveSeparately: () => void;
+  onCopy: () => void;
+}) {
+  const t = useT();
+  const [fullVersions, setFullVersions] = useState(false);
+
+  return (
+    <div
+      className="flex min-h-0 flex-1 flex-col overflow-hidden [container-type:inline-size]"
+      data-recovery-comparison
+    >
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 py-5 sm:px-6">
+        <h2 className="text-sm font-semibold">
+          {t("editor.previewDraftCompare")}
+        </h2>
+        <div className="mt-4 grid min-w-0 gap-3 @min-[48rem]:grid-cols-2">
+          {[
+            {
+              key: "mine",
+              label: t("editor.previewDraftYourEdits"),
+              value: mine,
+              other: saved,
+            },
+            {
+              key: "saved",
+              label: t("editor.previewDraftSavedVersion"),
+              value: saved,
+              other: mine,
+            },
+          ].map((version) => (
+            <section
+              key={version.key}
+              className="min-w-0 rounded-md border bg-background p-3"
+            >
+              <h3 className="mb-3 text-xs font-medium text-muted-foreground">
+                {version.label}
+              </h3>
+              {fullVersions ? (
+                <>
+                  <p className="mb-3 font-medium break-words">
+                    {version.value.title}
+                  </p>
+                  <SharedRichEditor
+                    key={`${version.key}:${version.value.content}`}
+                    value={version.value.content}
+                    onChange={() => undefined}
+                    editable={false}
+                    dragHandle={false}
+                    preset="content"
+                    ariaLabel={version.label}
+                  />
+                </>
+              ) : (
+                <>
+                  <p className="font-medium break-words">
+                    <DiffValue
+                      value={version.value.title}
+                      other={version.other.title}
+                    />
+                  </p>
+                  <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words font-sans text-sm">
+                    <DiffValue
+                      value={version.value.content}
+                      other={version.other.content}
+                    />
+                  </pre>
+                </>
+              )}
+            </section>
+          ))}
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="mt-2"
+          aria-expanded={fullVersions}
+          onClick={() => setFullVersions((value) => !value)}
+        >
+          <IconChevronDown
+            aria-hidden="true"
+            className={fullVersions ? "rotate-180" : undefined}
+          />
+          {fullVersions
+            ? t("editor.previewDraftShowChanges")
+            : t("editor.previewDraftViewFullVersions")}
+        </Button>
+        {failure ? (
+          <p role="alert" className="mt-3 text-sm text-destructive">
+            {failure}
+          </p>
+        ) : null}
+      </div>
+      <div className="border-t bg-background px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:px-6">
+        {stale && onRefresh ? (
+          <Button type="button" onClick={onRefresh}>
+            {t("editor.reconcileRefresh")}
+          </Button>
+        ) : (
+          <>
+            <div className="grid gap-2 @min-[32rem]:grid-cols-2">
+              <Button
+                type="button"
+                variant="outline"
+                disabled={busy || keepMineDisabled}
+                onClick={onKeepMine}
+              >
+                {busy ? (
+                  <IconLoader2 aria-hidden="true" className="animate-spin" />
+                ) : null}
+                {t("editor.previewDraftKeepMine")}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={busy}
+                onClick={onUseSaved}
+              >
+                {t("editor.previewDraftUseSaved")}
+              </Button>
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="mt-1"
+                  disabled={busy}
+                >
+                  {t("editor.previewDraftMoreOptions")}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem onSelect={onSaveSeparately}>
+                  {t("editor.previewDraftSaveSeparately")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={onCopy}>
+                  {t("editor.copyUnsavedText")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}