Add versioning to files

7 files changed, 846 insertions, 51 deletions

diff --git a/makima/frontend/src/components/files/FileDetail.tsx b/makima/frontend/src/components/files/FileDetail.tsx
index 29311b8..c7b716a 100644
--- a/makima/frontend/src/components/files/FileDetail.tsx
+++ b/makima/frontend/src/components/files/FileDetail.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
-import type { FileDetail as FileDetailType } from "../../lib/api";
+import type { FileDetail as FileDetailType, FileVersionSummary, FileVersion } from "../../lib/api";
 import { BodyRenderer } from "./BodyRenderer";
+import { VersionHistoryDropdown } from "./VersionHistoryDropdown";
 
 interface FileDetailProps {
   file: FileDetailType;
@@ -13,6 +14,15 @@ interface FileDetailProps {
   onEditingChange?: (isEditing: boolean) => void;
   hasPendingRemoteUpdate?: boolean;
   onOverwrite?: () => void;
+  // Version history props
+  versions?: FileVersionSummary[];
+  versionsLoading?: boolean;
+  selectedVersion?: FileVersion | null;
+  loadingVersion?: boolean;
+  restoring?: boolean;
+  onSelectVersion?: (version: number) => void;
+  onRestoreVersion?: (version: number) => void;
+  onClearVersionSelection?: () => void;
 }
 
 export function FileDetail({
@@ -26,6 +36,14 @@ export function FileDetail({
   onEditingChange,
   hasPendingRemoteUpdate,
   onOverwrite,
+  versions = [],
+  versionsLoading = false,
+  selectedVersion = null,
+  loadingVersion = false,
+  restoring = false,
+  onSelectVersion,
+  onRestoreVersion,
+  onClearVersionSelection,
 }: FileDetailProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [name, setName] = useState(file.name);
@@ -68,9 +86,22 @@ export function FileDetail({
           >
             ← Back to list
           </button>
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
             {isEditing ? (
               <>
+                {onSelectVersion && onRestoreVersion && onClearVersionSelection && (
+                  <VersionHistoryDropdown
+                    currentVersion={file.version}
+                    versions={versions}
+                    loading={versionsLoading}
+                    selectedVersion={selectedVersion}
+                    loadingVersion={loadingVersion}
+                    onSelectVersion={onSelectVersion}
+                    onRestoreVersion={onRestoreVersion}
+                    onClearSelection={onClearVersionSelection}
+                    restoring={restoring}
+                  />
+                )}
                 <button
                   onClick={handleCancel}
                   className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors uppercase"
diff --git a/makima/frontend/src/components/files/UpdateNotification.tsx b/makima/frontend/src/components/files/UpdateNotification.tsx
index c87d535..863f951 100644
--- a/makima/frontend/src/components/files/UpdateNotification.tsx
+++ b/makima/frontend/src/components/files/UpdateNotification.tsx
@@ -39,12 +39,75 @@ function getElementTypeLabel(element: BodyElement): string {
   }
 }
 
+// Word-level diff for showing inline changes
+interface WordDiff {
+  type: "same" | "added" | "removed";
+  text: string;
+}
+
+function computeWordDiff(oldText: string, newText: string): WordDiff[] {
+  const oldWords = oldText.split(/(\s+)/);
+  const newWords = newText.split(/(\s+)/);
+  const result: WordDiff[] = [];
+
+  // Simple LCS-based diff
+  const m = oldWords.length;
+  const n = newWords.length;
+
+  // Build LCS table
+  const dp: number[][] = Array(m + 1)
+    .fill(null)
+    .map(() => Array(n + 1).fill(0));
+
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (oldWords[i - 1] === newWords[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1;
+      } else {
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+      }
+    }
+  }
+
+  // Backtrack to find diff
+  let i = m,
+    j = n;
+  const diffStack: WordDiff[] = [];
+
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldWords[i - 1] === newWords[j - 1]) {
+      diffStack.push({ type: "same", text: oldWords[i - 1] });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      diffStack.push({ type: "added", text: newWords[j - 1] });
+      j--;
+    } else {
+      diffStack.push({ type: "removed", text: oldWords[i - 1] });
+      i--;
+    }
+  }
+
+  // Reverse and merge consecutive same-type diffs
+  for (let k = diffStack.length - 1; k >= 0; k--) {
+    const item = diffStack[k];
+    if (result.length > 0 && result[result.length - 1].type === item.type) {
+      result[result.length - 1].text += item.text;
+    } else {
+      result.push({ ...item });
+    }
+  }
+
+  return result;
+}
+
 interface DiffItem {
   type: "added" | "removed" | "modified" | "unchanged";
   localElement?: BodyElement;
   remoteElement?: BodyElement;
   localIndex?: number;
   remoteIndex?: number;
+  wordDiff?: WordDiff[];
 }
 
 // Simple diff algorithm - compares elements by their text content
@@ -66,13 +129,15 @@ function computeDiff(localBody: BodyElement[], remoteBody: BodyElement[]): DiffI
       const localText = getElementText(local);
       const remoteText = getElementText(remote);
       if (localText !== remoteText || local.type !== remote.type) {
-        // Element modified
+        // Element modified - compute word-level diff
+        const wordDiff = computeWordDiff(localText, remoteText);
         diffs.push({
           type: "modified",
           localElement: local,
           remoteElement: remote,
           localIndex: i,
           remoteIndex: i,
+          wordDiff,
         });
       }
       // Skip unchanged elements
@@ -186,20 +251,49 @@ function DiffItemView({ diff }: { diff: DiffItem }) {
             [{getElementTypeLabel(diff.localElement!)}]
           </span>
         </div>
-        <div className="space-y-2">
-          <div>
-            <div className="text-[#555] text-[10px] font-mono uppercase mb-1">Your version:</div>
-            <div className="font-mono text-xs text-red-300/70 break-words bg-red-500/10 p-2 border-l-2 border-red-500/50">
-              {truncateText(getElementText(diff.localElement!), 120)}
-            </div>
+        {diff.wordDiff ? (
+          <div className="font-mono text-xs break-words leading-relaxed">
+            {diff.wordDiff.map((word, idx) => {
+              if (word.type === "same") {
+                return (
+                  <span key={idx} className="text-white/60">
+                    {word.text}
+                  </span>
+                );
+              } else if (word.type === "removed") {
+                return (
+                  <span
+                    key={idx}
+                    className="bg-red-500/30 text-red-300 line-through"
+                  >
+                    {word.text}
+                  </span>
+                );
+              } else {
+                return (
+                  <span key={idx} className="bg-green-500/30 text-green-300">
+                    {word.text}
+                  </span>
+                );
+              }
+            })}
           </div>
-          <div>
-            <div className="text-[#555] text-[10px] font-mono uppercase mb-1">Remote version:</div>
-            <div className="font-mono text-xs text-green-300/70 break-words bg-green-500/10 p-2 border-l-2 border-green-500/50">
-              {truncateText(getElementText(diff.remoteElement!), 120)}
+        ) : (
+          <div className="space-y-2">
+            <div>
+              <div className="text-[#555] text-[10px] font-mono uppercase mb-1">Your version:</div>
+              <div className="font-mono text-xs text-red-300/70 break-words bg-red-500/10 p-2 border-l-2 border-red-500/50">
+                {getElementText(diff.localElement!)}
+              </div>
+            </div>
+            <div>
+              <div className="text-[#555] text-[10px] font-mono uppercase mb-1">Remote version:</div>
+              <div className="font-mono text-xs text-green-300/70 break-words bg-green-500/10 p-2 border-l-2 border-green-500/50">
+                {getElementText(diff.remoteElement!)}
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </div>
     );
   }
diff --git a/makima/frontend/src/components/files/VersionHistoryDropdown.tsx b/makima/frontend/src/components/files/VersionHistoryDropdown.tsx
new file mode 100644
index 0000000..50e6f0a
--- /dev/null
+++ b/makima/frontend/src/components/files/VersionHistoryDropdown.tsx
@@ -0,0 +1,263 @@
+import { useState, useEffect, useRef } from "react";
+import type { FileVersionSummary, FileVersion, VersionSource } from "../../lib/api";
+
+interface VersionHistoryDropdownProps {
+  currentVersion: number;
+  versions: FileVersionSummary[];
+  loading: boolean;
+  selectedVersion: FileVersion | null;
+  loadingVersion: boolean;
+  onSelectVersion: (version: number) => void;
+  onRestoreVersion: (version: number) => void;
+  onClearSelection: () => void;
+  restoring: boolean;
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function getSourceLabel(source: VersionSource): string {
+  switch (source) {
+    case "user":
+      return "User";
+    case "llm":
+      return "AI";
+    case "system":
+      return "System";
+  }
+}
+
+function getSourceColor(source: VersionSource): string {
+  switch (source) {
+    case "user":
+      return "text-blue-400";
+    case "llm":
+      return "text-purple-400";
+    case "system":
+      return "text-gray-400";
+  }
+}
+
+export function VersionHistoryDropdown({
+  currentVersion,
+  versions,
+  loading,
+  selectedVersion,
+  loadingVersion,
+  onSelectVersion,
+  onRestoreVersion,
+  onClearSelection,
+  restoring,
+}: VersionHistoryDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [versionToRestore, setVersionToRestore] = useState<number | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleVersionClick = (version: number) => {
+    if (version === currentVersion) return;
+    onSelectVersion(version);
+    setIsOpen(false);
+  };
+
+  const handleRestoreClick = (version: number) => {
+    setVersionToRestore(version);
+    setShowConfirm(true);
+  };
+
+  const handleConfirmRestore = () => {
+    if (versionToRestore !== null) {
+      onRestoreVersion(versionToRestore);
+    }
+    setShowConfirm(false);
+    setVersionToRestore(null);
+  };
+
+  const handleCancelRestore = () => {
+    setShowConfirm(false);
+    setVersionToRestore(null);
+    onClearSelection();
+  };
+
+  // If showing the selected version preview
+  if (selectedVersion) {
+    return (
+      <div className="border border-[#3f6fb3]/50 bg-[#0d1b2d] p-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <span className="font-mono text-xs text-[#75aafc] uppercase">Viewing Version</span>
+            <span className="font-mono text-sm text-[#dbe7ff] font-bold">
+              v{selectedVersion.version}
+            </span>
+            <span className={`font-mono text-xs ${getSourceColor(selectedVersion.source)}`}>
+              ({getSourceLabel(selectedVersion.source)})
+            </span>
+          </div>
+          <button
+            onClick={onClearSelection}
+            className="font-mono text-xs text-[#555] hover:text-white/70"
+          >
+            Close
+          </button>
+        </div>
+
+        <div className="text-[10px] font-mono text-[#555] mb-3">
+          {formatDate(selectedVersion.createdAt)}
+          {selectedVersion.changeDescription && (
+            <span className="ml-2 text-[#9bc3ff]">- {selectedVersion.changeDescription}</span>
+          )}
+        </div>
+
+        {/* Preview of version content */}
+        <div className="max-h-48 overflow-y-auto mb-4 border border-[#333] bg-black/20 p-3">
+          {selectedVersion.body.length === 0 ? (
+            <div className="text-[#555] text-xs italic">No content</div>
+          ) : (
+            <div className="space-y-2">
+              {selectedVersion.body.map((element, index) => (
+                <div key={index} className="font-mono text-xs text-white/70">
+                  {element.type === "heading" && (
+                    <div className="text-[#9bc3ff] font-bold">
+                      {"#".repeat(element.level)} {element.text}
+                    </div>
+                  )}
+                  {element.type === "paragraph" && (
+                    <div className="text-white/60">{element.text}</div>
+                  )}
+                  {element.type === "chart" && (
+                    <div className="text-purple-400">[Chart: {element.title || element.chartType}]</div>
+                  )}
+                  {element.type === "image" && (
+                    <div className="text-green-400">[Image: {element.alt || element.src}]</div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Restore button */}
+        {!showConfirm ? (
+          <button
+            onClick={() => handleRestoreClick(selectedVersion.version)}
+            disabled={restoring}
+            className="w-full px-3 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50"
+          >
+            {restoring ? "Restoring..." : "Restore This Version"}
+          </button>
+        ) : (
+          <div className="border border-yellow-500/30 bg-yellow-500/10 p-3">
+            <div className="font-mono text-xs text-yellow-400 mb-2">
+              Are you sure you want to restore to version {versionToRestore}?
+            </div>
+            <div className="font-mono text-[10px] text-white/50 mb-3">
+              This will create a new version with the content from v{versionToRestore}.
+              Your current changes will be preserved as a separate version.
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={handleConfirmRestore}
+                disabled={restoring}
+                className="flex-1 px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-yellow-600/50 border border-yellow-500/50 hover:bg-yellow-600/70 transition-colors disabled:opacity-50"
+              >
+                {restoring ? "Restoring..." : "Confirm Restore"}
+              </button>
+              <button
+                onClick={handleCancelRestore}
+                disabled={restoring}
+                className="px-3 py-1.5 font-mono text-xs text-[#555] border border-[#333] hover:text-white/70"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
+      >
+        <span>v{currentVersion}</span>
+        <svg
+          width="10"
+          height="6"
+          viewBox="0 0 10 6"
+          fill="none"
+          className={`transition-transform ${isOpen ? "rotate-180" : ""}`}
+        >
+          <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 w-64 max-h-72 overflow-y-auto bg-[#0d1b2d] border border-[#3f6fb3]/50 shadow-lg z-50">
+          <div className="p-2 border-b border-[#333] font-mono text-[10px] text-[#555] uppercase">
+            Version History
+          </div>
+
+          {loading ? (
+            <div className="p-4 text-center font-mono text-xs text-[#555]">Loading...</div>
+          ) : versions.length === 0 ? (
+            <div className="p-4 text-center font-mono text-xs text-[#555]">No versions found</div>
+          ) : (
+            <div>
+              {versions.map((version) => (
+                <button
+                  key={version.version}
+                  onClick={() => handleVersionClick(version.version)}
+                  disabled={version.version === currentVersion || loadingVersion}
+                  className={`w-full text-left px-3 py-2 font-mono text-xs transition-colors ${
+                    version.version === currentVersion
+                      ? "bg-[#0f3c78]/50 text-[#dbe7ff]"
+                      : "hover:bg-[#0f3c78]/30 text-white/70"
+                  } ${loadingVersion ? "opacity-50" : ""}`}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="font-bold">v{version.version}</span>
+                    <span className={getSourceColor(version.source)}>
+                      {getSourceLabel(version.source)}
+                    </span>
+                  </div>
+                  <div className="text-[10px] text-[#555] mt-0.5">
+                    {formatDate(version.createdAt)}
+                  </div>
+                  {version.changeDescription && (
+                    <div className="text-[10px] text-[#75aafc] mt-0.5 truncate">
+                      {version.changeDescription}
+                    </div>
+                  )}
+                  {version.version === currentVersion && (
+                    <div className="text-[10px] text-green-400 mt-0.5">(current)</div>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/makima/frontend/src/hooks/useVersionHistory.ts b/makima/frontend/src/hooks/useVersionHistory.ts
new file mode 100644
index 0000000..f9d4122
--- /dev/null
+++ b/makima/frontend/src/hooks/useVersionHistory.ts
@@ -0,0 +1,137 @@
+import { useState, useCallback, useEffect } from "react";
+import {
+  listFileVersions,
+  getFileVersion,
+  restoreFileVersion,
+  type FileVersionSummary,
+  type FileVersion,
+  type FileDetail,
+  VersionConflictError,
+} from "../lib/api";
+
+export interface UseVersionHistoryOptions {
+  fileId: string | null;
+  currentVersion: number;
+}
+
+export interface VersionHistoryState {
+  versions: FileVersionSummary[];
+  loading: boolean;
+  error: string | null;
+  selectedVersion: FileVersion | null;
+  loadingVersion: boolean;
+}
+
+export function useVersionHistory(options: UseVersionHistoryOptions) {
+  const { fileId, currentVersion } = options;
+  const [versions, setVersions] = useState<FileVersionSummary[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedVersion, setSelectedVersion] = useState<FileVersion | null>(null);
+  const [loadingVersion, setLoadingVersion] = useState(false);
+  const [restoring, setRestoring] = useState(false);
+  const [conflict, setConflict] = useState<{ expected: number; actual: number } | null>(null);
+
+  // Fetch version list
+  const fetchVersions = useCallback(async () => {
+    if (!fileId) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await listFileVersions(fileId);
+      setVersions(response.versions);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to fetch versions");
+    } finally {
+      setLoading(false);
+    }
+  }, [fileId]);
+
+  // Fetch a specific version's content
+  const fetchVersion = useCallback(
+    async (version: number): Promise<FileVersion | null> => {
+      if (!fileId) return null;
+
+      setLoadingVersion(true);
+      setError(null);
+      try {
+        const versionData = await getFileVersion(fileId, version);
+        setSelectedVersion(versionData);
+        return versionData;
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to fetch version");
+        return null;
+      } finally {
+        setLoadingVersion(false);
+      }
+    },
+    [fileId]
+  );
+
+  // Restore to a specific version (creates a new version with that content)
+  const restoreToVersion = useCallback(
+    async (targetVersion: number): Promise<FileDetail | null> => {
+      if (!fileId) return null;
+
+      setRestoring(true);
+      setError(null);
+      setConflict(null);
+      try {
+        const result = await restoreFileVersion(fileId, targetVersion, currentVersion);
+        // Refresh version list after restore
+        await fetchVersions();
+        setSelectedVersion(null);
+        return result;
+      } catch (e) {
+        if (e instanceof VersionConflictError) {
+          setConflict({
+            expected: e.expectedVersion,
+            actual: e.actualVersion,
+          });
+          return null;
+        }
+        setError(e instanceof Error ? e.message : "Failed to restore version");
+        return null;
+      } finally {
+        setRestoring(false);
+      }
+    },
+    [fileId, currentVersion, fetchVersions]
+  );
+
+  // Clear selected version
+  const clearSelectedVersion = useCallback(() => {
+    setSelectedVersion(null);
+  }, []);
+
+  // Clear conflict
+  const clearConflict = useCallback(() => {
+    setConflict(null);
+  }, []);
+
+  // Fetch versions when fileId changes
+  useEffect(() => {
+    if (fileId) {
+      fetchVersions();
+    } else {
+      setVersions([]);
+      setSelectedVersion(null);
+    }
+  }, [fileId, fetchVersions]);
+
+  return {
+    versions,
+    loading,
+    error,
+    selectedVersion,
+    loadingVersion,
+    restoring,
+    conflict,
+    fetchVersions,
+    fetchVersion,
+    restoreToVersion,
+    clearSelectedVersion,
+    clearConflict,
+  };
+}
diff --git a/makima/frontend/src/lib/api.ts b/makima/frontend/src/lib/api.ts
index f1e3a9f..931981b 100644
--- a/makima/frontend/src/lib/api.ts
+++ b/makima/frontend/src/lib/api.ts
@@ -236,3 +236,138 @@ export async function chatWithFile(
   }
   return res.json();
 }
+
+// Version history types
+export type VersionSource = "user" | "llm" | "system";
+
+export interface FileVersion {
+  version: number;
+  name: string;
+  description: string | null;
+  summary: string | null;
+  body: BodyElement[];
+  source: VersionSource;
+  createdAt: string;
+  changeDescription?: string;
+}
+
+export interface FileVersionSummary {
+  version: number;
+  source: VersionSource;
+  createdAt: string;
+  changeDescription?: string;
+}
+
+export interface FileVersionListResponse {
+  versions: FileVersionSummary[];
+  total: number;
+}
+
+export interface RestoreVersionRequest {
+  targetVersion: number;
+}
+
+// Version history API functions
+export async function listFileVersions(fileId: string): Promise<FileVersionListResponse> {
+  const res = await fetch(`${API_BASE}/api/v1/files/${fileId}/versions`);
+  if (!res.ok) {
+    throw new Error(`Failed to list versions: ${res.statusText}`);
+  }
+  return res.json();
+}
+
+export async function getFileVersion(fileId: string, version: number): Promise<FileVersion> {
+  const res = await fetch(`${API_BASE}/api/v1/files/${fileId}/versions/${version}`);
+  if (!res.ok) {
+    throw new Error(`Failed to get version: ${res.statusText}`);
+  }
+  return res.json();
+}
+
+export async function restoreFileVersion(
+  fileId: string,
+  targetVersion: number,
+  currentVersion: number
+): Promise<FileDetail> {
+  const res = await fetch(`${API_BASE}/api/v1/files/${fileId}/versions/restore`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ targetVersion, currentVersion }),
+  });
+
+  if (res.status === 409) {
+    const conflict = (await res.json()) as ConflictErrorResponse;
+    throw new VersionConflictError(conflict);
+  }
+
+  if (!res.ok) {
+    throw new Error(`Failed to restore version: ${res.statusText}`);
+  }
+  return res.json();
+}
+
+// =============================================================================
+// LLM Tool Definitions for Version History
+// =============================================================================
+// These types define the tools available to the LLM for version history access.
+// The backend should implement handlers for these tools.
+
+/**
+ * Tool: read_version
+ * Allows the LLM to read the content of a specific historical version.
+ * This is read-only - it does not modify the document.
+ */
+export interface ReadVersionToolInput {
+  version: number;
+}
+
+export interface ReadVersionToolOutput {
+  success: boolean;
+  version: number;
+  body: BodyElement[];
+  summary: string | null;
+  source: VersionSource;
+  createdAt: string;
+  changeDescription?: string;
+  message: string;
+}
+
+/**
+ * Tool: list_versions
+ * Allows the LLM to list all available versions of the document.
+ */
+export interface ListVersionsToolOutput {
+  success: boolean;
+  versions: FileVersionSummary[];
+  currentVersion: number;
+  message: string;
+}
+
+/**
+ * Tool: restore_version
+ * Allows the LLM to restore the document to a specific historical version.
+ * This creates a new version with the content from the target version.
+ */
+export interface RestoreVersionToolInput {
+  targetVersion: number;
+  reason?: string;
+}
+
+export interface RestoreVersionToolOutput {
+  success: boolean;
+  previousVersion: number;
+  newVersion: number;
+  restoredFromVersion: number;
+  message: string;
+}
+
+// LLM Tool type definitions for the backend
+export type LlmVersionTool =
+  | { name: "read_version"; input: ReadVersionToolInput }
+  | { name: "list_versions"; input: Record<string, never> }
+  | { name: "restore_version"; input: RestoreVersionToolInput };
+
+export type LlmVersionToolResult =
+  | { name: "read_version"; result: ReadVersionToolOutput }
+  | { name: "list_versions"; result: ListVersionsToolOutput }
+  | { name: "restore_version"; result: RestoreVersionToolOutput };
diff --git a/makima/frontend/src/routes/files.tsx b/makima/frontend/src/routes/files.tsx
index f398041..0d870f7 100644
--- a/makima/frontend/src/routes/files.tsx
+++ b/makima/frontend/src/routes/files.tsx
@@ -7,6 +7,7 @@ import { CliInput } from "../components/files/CliInput";
 import { ConflictNotification } from "../components/files/ConflictNotification";
 import { UpdateNotification } from "../components/files/UpdateNotification";
 import { useFiles } from "../hooks/useFiles";
+import { useVersionHistory } from "../hooks/useVersionHistory";
 import {
   useFileSubscription,
   type FileUpdateEvent,
@@ -22,37 +23,121 @@ export default function FilesPage() {
   const [creating, setCreating] = useState(false);
   const [remoteUpdate, setRemoteUpdate] = useState<FileUpdateEvent | null>(null);
   const [remoteFileData, setRemoteFileData] = useState<FileDetailType | null>(null);
-  const [hasLocalChanges, setHasLocalChanges] = useState(false);
-  const [isActivelyEditing, setIsActivelyEditing] = useState(false);
   const pendingUpdateRef = useRef(false);
+  // Track the last version we sent to detect our own updates
+  const lastSentVersionRef = useRef<number | null>(null);
+  // Track the version we just successfully saved (to ignore its WebSocket notification)
+  const lastSavedVersionRef = useRef<number | null>(null);
+  // Use refs for values checked in WebSocket callback to avoid stale closures
+  const hasLocalChangesRef = useRef(false);
+  const isActivelyEditingRef = useRef(false);
+  const currentVersionRef = useRef<number | null>(null);
+
+  // Helper functions to update refs (used only in callbacks, not for rendering)
+  const updateHasLocalChanges = useCallback((value: boolean) => {
+    hasLocalChangesRef.current = value;
+  }, []);
+
+  const updateIsActivelyEditing = useCallback((value: boolean) => {
+    isActivelyEditingRef.current = value;
+  }, []);
+
+  // Version history
+  const {
+    versions,
+    loading: versionsLoading,
+    selectedVersion,
+    loadingVersion,
+    restoring,
+    fetchVersion,
+    restoreToVersion,
+    clearSelectedVersion,
+    fetchVersions,
+  } = useVersionHistory({
+    fileId: id || null,
+    currentVersion: fileDetail?.version || 0,
+  });
+
+  // Handle version restore
+  const handleRestoreVersion = useCallback(
+    async (targetVersion: number) => {
+      const result = await restoreToVersion(targetVersion);
+      if (result) {
+        currentVersionRef.current = result.version;
+        setFileDetail(result);
+        updateHasLocalChanges(false);
+        // Refresh version list after restore
+        fetchVersions();
+      }
+    },
+    [restoreToVersion, fetchVersions, updateHasLocalChanges]
+  );
 
   // Load file detail when URL has an id
   useEffect(() => {
     if (id) {
       setDetailLoading(true);
-      setHasLocalChanges(false);
+      updateHasLocalChanges(false);
+      // Reset pending update tracking when switching files
+      pendingUpdateRef.current = false;
+      lastSentVersionRef.current = null;
+      lastSavedVersionRef.current = null;
+      currentVersionRef.current = null;
+      setRemoteUpdate(null);
+      setRemoteFileData(null);
       fetchFile(id).then((detail) => {
+        if (detail) {
+          currentVersionRef.current = detail.version;
+        }
         setFileDetail(detail);
         setDetailLoading(false);
       });
     } else {
       setFileDetail(null);
-      setHasLocalChanges(false);
+      currentVersionRef.current = null;
+      updateHasLocalChanges(false);
     }
-  }, [id, fetchFile]);
+  }, [id, fetchFile, updateHasLocalChanges]);
 
   // Handle file update events from WebSocket
   const handleFileUpdate = useCallback(
     async (event: FileUpdateEvent) => {
-      // Ignore our own updates
+      // Check if this is a version we just saved - ignore it
+      // This handles the case where the WebSocket arrives after the HTTP response
+      if (lastSavedVersionRef.current !== null && event.version === lastSavedVersionRef.current) {
+        lastSavedVersionRef.current = null;
+        return;
+      }
+
+      // If we have a pending update, check if this is our own update
       if (pendingUpdateRef.current) {
-        pendingUpdateRef.current = false;
+        if (lastSentVersionRef.current !== null) {
+          const expectedNewVersion = lastSentVersionRef.current + 1;
+          if (event.version === expectedNewVersion) {
+            // This is our own update - ignore it
+            pendingUpdateRef.current = false;
+            lastSentVersionRef.current = null;
+            return;
+          }
+        }
+        // We sent an update but received a different version - could be a race condition
+        // Still ignore since we have an update in flight
+        return;
+      }
+
+      // Check if this version matches what we already have
+      // This catches cases where our save's WebSocket arrives late
+      if (currentVersionRef.current !== null && event.version === currentVersionRef.current) {
         return;
       }
 
       // If no local changes and not actively editing, auto-refresh
-      if (!hasLocalChanges && !isActivelyEditing) {
+      // Use refs to get current values (avoid stale closure issues)
+      if (!hasLocalChangesRef.current && !isActivelyEditingRef.current) {
         const detail = await fetchFile(event.fileId);
+        if (detail) {
+          currentVersionRef.current = detail.version;
+        }
         setFileDetail(detail);
       } else {
         // Fetch remote version for diff display
@@ -62,7 +147,7 @@ export default function FilesPage() {
         setRemoteUpdate(event);
       }
     },
-    [hasLocalChanges, isActivelyEditing, fetchFile]
+    [fetchFile]
   );
 
   // Subscribe to file updates
@@ -98,13 +183,22 @@ export default function FilesPage() {
     async (fileId: string, name: string, description: string) => {
       if (!fileDetail) return;
       pendingUpdateRef.current = true;
-      const result = await editFile(fileId, { name, description, version: fileDetail.version });
-      if (result) {
-        setFileDetail(result);
-        setHasLocalChanges(false);
+      lastSentVersionRef.current = fileDetail.version;
+      try {
+        const result = await editFile(fileId, { name, description, version: fileDetail.version });
+        if (result) {
+          // Track the saved version to ignore its WebSocket notification
+          lastSavedVersionRef.current = result.version;
+          currentVersionRef.current = result.version;
+          setFileDetail(result);
+          updateHasLocalChanges(false);
+        }
+      } finally {
+        pendingUpdateRef.current = false;
+        lastSentVersionRef.current = null;
       }
     },
-    [editFile, fileDetail]
+    [editFile, fileDetail, updateHasLocalChanges]
   );
 
   const handleBodyUpdate = useCallback(
@@ -132,18 +226,27 @@ export default function FilesPage() {
           ...fileDetail,
           body: newBody,
         });
-        setHasLocalChanges(true);
+        updateHasLocalChanges(true);
 
         // Save to backend with version for optimistic locking
         pendingUpdateRef.current = true;
-        const result = await editFile(id, { body: newBody, version: fileDetail.version });
-        if (result) {
-          setFileDetail(result);
-          setHasLocalChanges(false);
+        lastSentVersionRef.current = fileDetail.version;
+        try {
+          const result = await editFile(id, { body: newBody, version: fileDetail.version });
+          if (result) {
+            // Track the saved version to ignore its WebSocket notification
+            lastSavedVersionRef.current = result.version;
+            currentVersionRef.current = result.version;
+            setFileDetail(result);
+            updateHasLocalChanges(false);
+          }
+        } finally {
+          pendingUpdateRef.current = false;
+          lastSentVersionRef.current = null;
         }
       }
     },
-    [fileDetail, id, editFile]
+    [fileDetail, id, editFile, updateHasLocalChanges]
   );
 
   const handleBodyReorder = useCallback(
@@ -159,18 +262,27 @@ export default function FilesPage() {
           ...fileDetail,
           body: newBody,
         });
-        setHasLocalChanges(true);
+        updateHasLocalChanges(true);
 
         // Save to backend with version for optimistic locking
         pendingUpdateRef.current = true;
-        const result = await editFile(id, { body: newBody, version: fileDetail.version });
-        if (result) {
-          setFileDetail(result);
-          setHasLocalChanges(false);
+        lastSentVersionRef.current = fileDetail.version;
+        try {
+          const result = await editFile(id, { body: newBody, version: fileDetail.version });
+          if (result) {
+            // Track the saved version to ignore its WebSocket notification
+            lastSavedVersionRef.current = result.version;
+            currentVersionRef.current = result.version;
+            setFileDetail(result);
+            updateHasLocalChanges(false);
+          }
+        } finally {
+          pendingUpdateRef.current = false;
+          lastSentVersionRef.current = null;
         }
       }
     },
-    [fileDetail, id, editFile]
+    [fileDetail, id, editFile, updateHasLocalChanges]
   );
 
   const handleCreate = useCallback(async () => {
@@ -194,10 +306,13 @@ export default function FilesPage() {
     if (id) {
       clearConflict();
       const detail = await fetchFile(id);
+      if (detail) {
+        currentVersionRef.current = detail.version;
+      }
       setFileDetail(detail);
-      setHasLocalChanges(false);
+      updateHasLocalChanges(false);
     }
-  }, [id, clearConflict, fetchFile]);
+  }, [id, clearConflict, fetchFile, updateHasLocalChanges]);
 
   const handleConflictForceOverwrite = useCallback(async () => {
     if (id && fileDetail) {
@@ -207,25 +322,37 @@ export default function FilesPage() {
       if (latest) {
         // Retry with latest version
         pendingUpdateRef.current = true;
-        const result = await editFile(id, { body: fileDetail.body, version: latest.version });
-        if (result) {
-          setFileDetail(result);
-          setHasLocalChanges(false);
+        lastSentVersionRef.current = latest.version;
+        try {
+          const result = await editFile(id, { body: fileDetail.body, version: latest.version });
+          if (result) {
+            // Track the saved version to ignore its WebSocket notification
+            lastSavedVersionRef.current = result.version;
+            currentVersionRef.current = result.version;
+            setFileDetail(result);
+            updateHasLocalChanges(false);
+          }
+        } finally {
+          pendingUpdateRef.current = false;
+          lastSentVersionRef.current = null;
         }
       }
     }
-  }, [id, fileDetail, clearConflict, fetchFile, editFile]);
+  }, [id, fileDetail, clearConflict, fetchFile, editFile, updateHasLocalChanges]);
 
   // Remote update handlers
   const handleRemoteUpdateRefresh = useCallback(async () => {
     if (id) {
       const detail = await fetchFile(id);
+      if (detail) {
+        currentVersionRef.current = detail.version;
+      }
       setFileDetail(detail);
       setRemoteUpdate(null);
       setRemoteFileData(null);
-      setHasLocalChanges(false);
+      updateHasLocalChanges(false);
     }
-  }, [id, fetchFile]);
+  }, [id, fetchFile, updateHasLocalChanges]);
 
   const handleRemoteUpdateDismiss = useCallback(() => {
     setRemoteUpdate(null);
@@ -254,9 +381,17 @@ export default function FilesPage() {
                 onDelete={handleDelete}
                 onBodyElementUpdate={handleBodyElementUpdate}
                 onBodyReorder={handleBodyReorder}
-                onEditingChange={setIsActivelyEditing}
+                onEditingChange={updateIsActivelyEditing}
                 hasPendingRemoteUpdate={!!remoteUpdate}
                 onOverwrite={handleRemoteUpdateDismiss}
+                versions={versions}
+                versionsLoading={versionsLoading}
+                selectedVersion={selectedVersion}
+                loadingVersion={loadingVersion}
+                restoring={restoring}
+                onSelectVersion={fetchVersion}
+                onRestoreVersion={handleRestoreVersion}
+                onClearVersionSelection={clearSelectedVersion}
               />
             </div>
             <div className="shrink-0">
diff --git a/makima/frontend/tsconfig.tsbuildinfo b/makima/frontend/tsconfig.tsbuildinfo
index bda8af0..d7218f9 100644
--- a/makima/frontend/tsconfig.tsbuildinfo
+++ b/makima/frontend/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/components/gridoverlay.tsx","./src/components/logo.tsx","./src/components/masthead.tsx","./src/components/navstrip.tsx","./src/components/rewritelink.tsx","./src/components/charts/chartrenderer.tsx","./src/components/files/bodyrenderer.tsx","./src/components/files/cliinput.tsx","./src/components/files/conflictnotification.tsx","./src/components/files/filedetail.tsx","./src/components/files/filelist.tsx","./src/components/files/updatenotification.tsx","./src/components/listen/controlpanel.tsx","./src/components/listen/speakerpanel.tsx","./src/components/listen/transcriptpanel.tsx","./src/hooks/usefilesubscription.ts","./src/hooks/usefiles.ts","./src/hooks/usemicrophone.ts","./src/hooks/usetextscramble.ts","./src/hooks/usewebsocket.ts","./src/lib/api.ts","./src/routes/_index.tsx","./src/routes/files.tsx","./src/routes/listen.tsx","./src/types/messages.ts"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/components/gridoverlay.tsx","./src/components/logo.tsx","./src/components/masthead.tsx","./src/components/navstrip.tsx","./src/components/rewritelink.tsx","./src/components/charts/chartrenderer.tsx","./src/components/files/bodyrenderer.tsx","./src/components/files/cliinput.tsx","./src/components/files/conflictnotification.tsx","./src/components/files/filedetail.tsx","./src/components/files/filelist.tsx","./src/components/files/updatenotification.tsx","./src/components/files/versionhistorydropdown.tsx","./src/components/listen/controlpanel.tsx","./src/components/listen/speakerpanel.tsx","./src/components/listen/transcriptpanel.tsx","./src/hooks/usefilesubscription.ts","./src/hooks/usefiles.ts","./src/hooks/usemicrophone.ts","./src/hooks/usetextscramble.ts","./src/hooks/useversionhistory.ts","./src/hooks/usewebsocket.ts","./src/lib/api.ts","./src/routes/_index.tsx","./src/routes/files.tsx","./src/routes/listen.tsx","./src/types/messages.ts"],"version":"5.9.3"}
\ No newline at end of file