working on file revert modal...

sawka · sawka · commit 478c8c47ad38 · 2025-10-31T12:18:56.000-07:00
diff --git a/frontend/app/aipanel/aimessage.tsx b/frontend/app/aipanel/aimessage.tsx
@@ -11,7 +11,15 @@ import { WaveUIMessage, WaveUIMessagePart } from "./aitypes";
 import { WaveAIModel } from "./waveai-model";
 
 const AIThinking = memo(
-    ({ message = "AI is thinking...", reasoningText }: { message?: string; reasoningText?: string }) => {
+    ({
+        message = "AI is thinking...",
+        reasoningText,
+        isWaitingApproval = false,
+    }: {
+        message?: string;
+        reasoningText?: string;
+        isWaitingApproval?: boolean;
+    }) => {
         const scrollRef = useRef<HTMLDivElement>(null);
 
         useEffect(() => {
@@ -30,17 +38,21 @@ const AIThinking = memo(
         return (
             <div className="flex flex-col gap-1">
                 <div className="flex items-center gap-2">
-                    <div className="animate-pulse flex items-center">
-                        <i className="fa fa-circle text-[10px]"></i>
-                        <i className="fa fa-circle text-[10px] mx-1"></i>
-                        <i className="fa fa-circle text-[10px]"></i>
-                    </div>
+                    {isWaitingApproval ? (
+                        <i className="fa fa-clock text-base text-yellow-500"></i>
+                    ) : (
+                        <div className="animate-pulse flex items-center">
+                            <i className="fa fa-circle text-[10px]"></i>
+                            <i className="fa fa-circle text-[10px] mx-1"></i>
+                            <i className="fa fa-circle text-[10px]"></i>
+                        </div>
+                    )}
                     {message && <span className="text-sm text-gray-400">{message}</span>}
                 </div>
                 {displayText && (
                     <div
                         ref={scrollRef}
-                        className="text-sm text-gray-500 overflow-y-auto max-h-[2lh] max-w-[600px] pl-9"
+                        className="text-sm text-gray-500 overflow-y-auto max-h-[3lh] max-w-[600px] pl-9"
                     >
                         {displayText}
                     </div>
@@ -172,7 +184,7 @@ const getThinkingMessage = (
     parts: WaveUIMessagePart[],
     isStreaming: boolean,
     role: string
-): { message: string; reasoningText?: string } | null => {
+): { message: string; reasoningText?: string; isWaitingApproval?: boolean } | null => {
     if (!isStreaming || role !== "assistant") {
         return null;
     }
@@ -182,7 +194,7 @@ const getThinkingMessage = (
     );
 
     if (hasPendingApprovals) {
-        return { message: "Waiting for Tool Approvals..." };
+        return { message: "Waiting for Tool Approvals...", isWaitingApproval: true };
     }
 
     const lastPart = parts[parts.length - 1];
@@ -234,7 +246,11 @@ export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
                         )}
                         {thinkingData != null && (
                             <div className="mt-2">
-                                <AIThinking message={thinkingData.message} reasoningText={thinkingData.reasoningText} />
+                                <AIThinking
+                                    message={thinkingData.message}
+                                    reasoningText={thinkingData.reasoningText}
+                                    isWaitingApproval={thinkingData.isWaitingApproval}
+                                />
                             </div>
                         )}
                     </>
diff --git a/frontend/app/aipanel/aitooluse.tsx b/frontend/app/aipanel/aitooluse.tsx
@@ -2,7 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { BlockModel } from "@/app/block/block-model";
+import { Modal } from "@/app/modals/modal";
 import { cn, fireAndForget } from "@/util/util";
+import { useAtomValue } from "jotai";
 import { memo, useEffect, useRef, useState } from "react";
 import { WaveUIMessagePart } from "./aitypes";
 import { WaveAIModel } from "./waveai-model";
@@ -127,6 +129,54 @@ const AIToolUseBatch = memo(({ parts, isStreaming }: AIToolUseBatchProps) => {
 
 AIToolUseBatch.displayName = "AIToolUseBatch";
 
+interface RestoreBackupModalProps {
+    part: WaveUIMessagePart & { type: "data-tooluse" };
+}
+
+const RestoreBackupModal = memo(({ part }: RestoreBackupModalProps) => {
+    const model = WaveAIModel.getInstance();
+    const toolData = part.data;
+
+    const formatTimestamp = (ts: number) => {
+        if (!ts) return "";
+        const date = new Date(ts);
+        return date.toLocaleString();
+    };
+
+    const handleConfirm = () => {
+        model.restoreBackup(toolData.toolcallid, toolData.inputfilename);
+    };
+
+    const handleCancel = () => {
+        model.closeRestoreBackupModal();
+    };
+
+    return (
+        <Modal
+            className="restore-backup-modal pb-5 pr-5"
+            onClose={handleCancel}
+            onCancel={handleCancel}
+            onOk={handleConfirm}
+            okLabel="Confirm Restore"
+            cancelLabel="Cancel"
+        >
+            <div className="flex flex-col gap-4 pt-4 pb-4 max-w-xl">
+                <div className="font-semibold text-lg">Restore File Backup</div>
+                <div className="text-sm text-gray-300 leading-relaxed">
+                    This will restore <span className="font-mono text-white break-all">{toolData.inputfilename}</span>{" "}
+                    to its state before this edit was made
+                    {toolData.runts && <span> ({formatTimestamp(toolData.runts)})</span>}.
+                </div>
+                <div className="text-sm text-gray-300 leading-relaxed">
+                    Any changes made by this edit and subsequent edits will be lost.
+                </div>
+            </div>
+        </Modal>
+    );
+});
+
+RestoreBackupModal.displayName = "RestoreBackupModal";
+
 interface AIToolUseProps {
     part: WaveUIMessagePart & { type: "data-tooluse" };
     isStreaming: boolean;
@@ -135,6 +185,9 @@ interface AIToolUseProps {
 const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
     const toolData = part.data;
     const [userApprovalOverride, setUserApprovalOverride] = useState<string | null>(null);
+    const model = WaveAIModel.getInstance();
+    const restoreModalToolCallId = useAtomValue(model.restoreBackupModalToolCallId);
+    const showRestoreModal = restoreModalToolCallId === toolData.toolcallid;
     const highlightTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const highlightedBlockIdRef = useRef<string | null>(null);
 
@@ -224,6 +277,16 @@ const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
                 <span className="font-bold">{statusIcon}</span>
                 <div className="font-semibold">{toolData.toolname}</div>
                 <div className="flex-1" />
+                {isFileWriteTool && toolData.inputfilename && toolData.writebackupfilename && (
+                    <button
+                        onClick={() => model.openRestoreBackupModal(toolData.toolcallid)}
+                        className="flex-shrink-0 px-1.5 py-0.5 border border-gray-600 hover:border-gray-500 hover:bg-gray-700 rounded cursor-pointer transition-colors flex items-center gap-1 text-gray-400"
+                        title="Restore backup file"
+                    >
+                        <span className="text-xs">Restore Backup</span>
+                        <i className="fa fa-clock-rotate-left text-xs"></i>
+                    </button>
+                )}
                 {isFileWriteTool && toolData.inputfilename && (
                     <button
                         onClick={handleOpenDiff}
@@ -244,6 +307,7 @@ const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
                     <AIToolApprovalButtons count={1} onApprove={handleApprove} onDeny={handleDeny} />
                 </div>
             )}
+            {showRestoreModal && <RestoreBackupModal part={part} />}
         </div>
     );
 });
diff --git a/frontend/app/aipanel/aitypes.ts b/frontend/app/aipanel/aitypes.ts
@@ -21,6 +21,7 @@ type WaveUIDataTypes = {
         errormessage?: string;
         approval?: "needs-approval" | "user-approved" | "user-denied" | "auto-approved" | "timeout";
         blockid?: string;
+        writebackupfilename?: string;
         inputfilename?: string;
     };
 };
diff --git a/frontend/app/aipanel/waveai-model.tsx b/frontend/app/aipanel/waveai-model.tsx
@@ -56,6 +56,7 @@ export class WaveAIModel {
     isChatEmpty: boolean = true;
     isWaveAIFocusedAtom!: jotai.Atom<boolean>;
     panelVisibleAtom!: jotai.Atom<boolean>;
+    restoreBackupModalToolCallId: jotai.PrimitiveAtom<string | null> = jotai.atom(null) as jotai.PrimitiveAtom<string | null>;
 
     private constructor(orefContext: ORef, inBuilder: boolean) {
         this.orefContext = orefContext;
@@ -452,4 +453,17 @@ export class WaveAIModel {
         };
         await createBlock(blockDef, false, true);
     }
+
+    openRestoreBackupModal(toolcallid: string) {
+        globalStore.set(this.restoreBackupModalToolCallId, toolcallid);
+    }
+
+    closeRestoreBackupModal() {
+        globalStore.set(this.restoreBackupModalToolCallId, null);
+    }
+
+    async restoreBackup(toolcallid: string, filename: string) {
+        console.log("Restore backup called for:", { toolcallid, filename });
+        this.closeRestoreBackupModal();
+    }
 }
diff --git a/frontend/layout/lib/layoutModel.ts b/frontend/layout/lib/layoutModel.ts
@@ -748,7 +748,6 @@ export class LayoutModel {
             // Process ephemeral node, if present.
             const ephemeralNode = this.getter(this.ephemeralNode);
             if (ephemeralNode) {
-                console.log("updateTree ephemeralNode", ephemeralNode);
                 this.updateEphemeralNodeProps(
                     ephemeralNode,
                     newAdditionalProps,
