feat(webapp): harden version history preview and stateless client

Keep the history skeleton until snapshots decode and apply cleanly,
avoid stale list responses overwriting an in-flight version watch,
and route all editor hydration through one apply helper with shared
wire conventions.

Made-with: Cursor

Author: HMarzban

packages/webapp/src/components/pages/history/applyHistoryToEditor.ts

@@ -0,0 +1,28 @@
+/**
+ * Wire format (Hocuspocus stateless): client sends `{ msg: 'history', type, documentId? }`;
+ * server answers on the same connection with `{ msg: 'history.response', type, response }`.
+ * History queries always use the WebSocket document room id; a mismatched `documentId` gets `history_failed`.
+ * List payloads may include `latestSnapshot` (one RTT); failures use `error: 'history_failed'`.
+ */
+import type { Editor } from '@tiptap/react'
+import type { HistoryItem } from '@types'
+
+import { tryGetProsemirrorFromHistoryYdoc } from './helpers'
+
+export type ApplyHistoryToEditorResult = 'applied' | 'decode_failed' | 'no_editor'
+
+/** Yjs snapshot (base64) → ProseMirror → TipTap `setContent` — single path for all history hydrations. */
+export function applyHistoryItemToEditor(
+  editor: Editor | null,
+  item: Pick<HistoryItem, 'data' | 'version'>
+): ApplyHistoryToEditorResult {
+  const doc = tryGetProsemirrorFromHistoryYdoc(item.data)
+  if (doc == null) return 'decode_failed'
+  if (!editor || editor.isDestroyed) return 'no_editor'
+  try {
+    editor.commands.setContent(doc)
+    return 'applied'
+  } catch {
+    return 'decode_failed'
+  }
+}

packages/webapp/src/components/pages/history/components/HistoryRestoreModal.tsx

@@ -0,0 +1,39 @@
+import Button from '@components/ui/Button'
+import { Modal, ModalContent } from '@components/ui/Dialog'
+
+type Props = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  version: number | undefined
+  onConfirm: () => void
+}
+
+/** Confirm before replacing live editor content with a history snapshot. */
+export function HistoryRestoreModal({ open, onOpenChange, version, onConfirm }: Props) {
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent size="sm" className="p-6">
+        <h2 className="text-base-content text-lg font-semibold" id="history-restore-title">
+          Revert to version {version}?
+        </h2>
+        <p className="text-base-content/70 mt-2 text-sm" id="history-restore-desc">
+          The editor will show this snapshot. Save or sync applies it like any other edit.
+        </p>
+        <div className="mt-6 flex flex-wrap justify-end gap-2">
+          <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant="primary"
+            onClick={() => {
+              onConfirm()
+              onOpenChange(false)
+            }}>
+            Revert
+          </Button>
+        </div>
+      </ModalContent>
+    </Modal>
+  )
+}

packages/webapp/src/components/pages/history/components/HistoryToolbarVersionBlock.tsx

@@ -0,0 +1,62 @@
+import Button from '@components/ui/Button'
+
+import { formatVersionDate } from '../helpers'
+import type { HistoryToolbarVersion } from '../hooks/useGetVersionInfo'
+
+type Props = {
+  versionInfo: HistoryToolbarVersion | null
+  onRequestRestore: () => void
+  variant: 'desktop' | 'mobile'
+}
+
+/**
+ * Shared restore + timestamp block for history toolbars (desktop row vs mobile compact).
+ */
+export function HistoryToolbarVersionBlock({ versionInfo, onRequestRestore, variant }: Props) {
+  if (!versionInfo) return null
+
+  const { date, time } = formatVersionDate(versionInfo.createdAt)
+  const showRestore = !versionInfo.isLatestVersion
+
+  if (variant === 'mobile') {
+    return (
+      <>
+        {showRestore && (
+          <Button
+            variant="primary"
+            onClick={onRequestRestore}
+            aria-label="Restore this version"
+            tooltip={`Restore document to version ${versionInfo.version}`}
+            tooltipPlacement="bottom">
+            Restore this version
+          </Button>
+        )}
+        <div className="text-center text-sm">
+          <span className="font-medium">{date}</span>
+          <br />
+          <span className="text-base-content/60">{time}</span>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <div className="flex min-w-0 items-center justify-end gap-3">
+      {showRestore && (
+        <Button
+          variant="primary"
+          className="font-normal"
+          onClick={onRequestRestore}
+          aria-label="Restore this version"
+          tooltip={`Restore document to version ${versionInfo.version}`}
+          tooltipPlacement="bottom">
+          Restore this version
+        </Button>
+      )}
+      <div className="text-sm whitespace-nowrap">
+        <span className="font-medium">{date}</span>
+        <span className="text-base-content/60 ml-2">{time}</span>
+      </div>
+    </div>
+  )
+}

packages/webapp/src/components/pages/history/desktop/DesktopHistory.tsx

@@ -22,9 +22,9 @@ const DesktopHistory = () => {
   if (!editor) return null
 
   return (
-    <div className="pad tiptap history_editor bg-base-200 flex h-full flex-col">
-      <div className="editor relative flex size-full flex-row justify-around align-top">
-        <div className="mainWrapper relative flex flex-1 flex-col align-top">
+    <div className="pad tiptap history_editor bg-base-200 flex h-full min-h-0 flex-col overflow-hidden">
+      <div className="editor relative flex min-h-0 min-w-0 flex-1 flex-row justify-around align-top">
+        <div className="mainWrapper relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden align-top">
           <Toolbar />
           <EditorContent />
         </div>