Add conflict notification and file update WS endpoint

2 files changed, 90 insertions, 0 deletions

diff --git a/makima/frontend/src/components/files/ConflictNotification.tsx b/makima/frontend/src/components/files/ConflictNotification.tsx
new file mode 100644
index 0000000..5d54c32
--- /dev/null
+++ b/makima/frontend/src/components/files/ConflictNotification.tsx
@@ -0,0 +1,47 @@
+interface ConflictNotificationProps {
+  onReload: () => void;
+  onForceOverwrite: () => void;
+  onDismiss: () => void;
+}
+
+export function ConflictNotification({
+  onReload,
+  onForceOverwrite,
+  onDismiss,
+}: ConflictNotificationProps) {
+  return (
+    <div className="fixed bottom-4 right-4 max-w-md p-4 bg-[#1a2332] border border-yellow-500/50 shadow-lg z-50">
+      <div className="flex items-start gap-3">
+        <div className="text-yellow-500 text-xl font-bold">!</div>
+        <div className="flex-1">
+          <h3 className="font-mono text-sm text-[#9bc3ff] font-semibold mb-1">
+            Conflict Detected
+          </h3>
+          <p className="font-mono text-xs text-white/70 mb-3">
+            This file was modified elsewhere. Your changes could not be saved.
+          </p>
+          <div className="flex gap-2">
+            <button
+              onClick={onReload}
+              className="px-3 py-1 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
+            >
+              Reload Latest
+            </button>
+            <button
+              onClick={onForceOverwrite}
+              className="px-3 py-1 font-mono text-xs text-red-400 border border-red-400/25 hover:border-red-400/50 transition-colors"
+            >
+              Force Save
+            </button>
+            <button
+              onClick={onDismiss}
+              className="px-3 py-1 font-mono text-xs text-[#555] hover:text-white/70 transition-colors"
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/makima/frontend/src/components/files/UpdateNotification.tsx b/makima/frontend/src/components/files/UpdateNotification.tsx
new file mode 100644
index 0000000..92b2b15
--- /dev/null
+++ b/makima/frontend/src/components/files/UpdateNotification.tsx
@@ -0,0 +1,43 @@
+interface UpdateNotificationProps {
+  updatedBy: "user" | "llm" | "system";
+  onRefresh: () => void;
+  onDismiss: () => void;
+}
+
+export function UpdateNotification({
+  updatedBy,
+  onRefresh,
+  onDismiss,
+}: UpdateNotificationProps) {
+  const source = updatedBy === "llm" ? "AI assistant" : "another session";
+
+  return (
+    <div className="fixed bottom-4 right-4 max-w-md p-4 bg-[#1a2332] border border-[#3f6fb3]/50 shadow-lg z-50">
+      <div className="flex items-start gap-3">
+        <div className="text-[#75aafc] text-xl font-bold">i</div>
+        <div className="flex-1">
+          <h3 className="font-mono text-sm text-[#9bc3ff] font-semibold mb-1">
+            File Updated
+          </h3>
+          <p className="font-mono text-xs text-white/70 mb-3">
+            This file was updated by {source}.
+          </p>
+          <div className="flex gap-2">
+            <button
+              onClick={onRefresh}
+              className="px-3 py-1 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
+            >
+              Refresh Now
+            </button>
+            <button
+              onClick={onDismiss}
+              className="px-3 py-1 font-mono text-xs text-[#555] hover:text-white/70 transition-colors"
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}