fix: modification progress overlay, preview blink fix (v1.5.0)

CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2026-03-18 20:29 UTC
+
+### Added
+- **Modification Progress Overlay** — Visually appealing spinner when modifying existing generated code
+  - Full-screen canvas overlay with spinning ring + Wrench icon
+  - "Modification in Progress" label with animated bouncing dots
+  - Canvas hidden during modification, revealed only when AI finishes
+  - `isModifying` state tracked via `assistStep === "preview"` detection
+
+### Fixed
+- **Preview blink during modification** — Old preview no longer flashes while AI rewrites code
+
+### Technical Details
+- Files modified: 1 (AIAssist.tsx: +21/-2 lines)
+- New state: 
+- New import:  from lucide-react
+
+
 ## [1.4.0] - 2026-03-18 19:57 UTC
 
 ### Added

README.md

@@ -1,6 +1,6 @@
 # PromptArch: AI Orchestration Platform
 
-> **Latest Version**: [v1.4.0](CHANGELOG.md#140---2026-03-18) (2026-03-18)
+> **Latest Version**: [v1.5.0](CHANGELOG.md#150---2026-03-18) (2026-03-18)
 
 > **Development Note**: This entire platform was developed exclusively using [TRAE.AI IDE](https://trae.ai) powered by elite [GLM 4.7 model](https://z.ai/subscribe?ic=R0K78RJKNW).
 > **Learn more about this architecture [here](https://z.ai/subscribe?ic=R0K78RJKNW).**

components/AIAssist.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef, memo } from "react";
 import {
     MessageSquare, Send, Code2, Palette, Search,
     Trash2, Copy, Monitor, StopCircle, X, Zap, Ghost,
-    Wand2, LayoutPanelLeft, Play, Orbit, Plus, Key, ShieldCheck
+    Wand2, LayoutPanelLeft, Play, Orbit, Plus, Key, ShieldCheck, Wrench
 } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -517,6 +517,7 @@ export default function AIAssist() {
     const [viewMode, setViewMode] = useState<"preview" | "code">("preview");
     const [deviceSize, setDeviceSize] = useState<"full" | "desktop" | "tablet" | "mobile">("full");
     const deviceWidths: Record<string, string> = { full: "100%", desktop: "1280px", tablet: "768px", mobile: "375px" };
+    const [isModifying, setIsModifying] = useState(false);
     const [abortController, setAbortController] = useState<AbortController | null>(null);
 
     // Agent suggestion state
@@ -639,6 +640,8 @@ export default function AIAssist() {
 
         // Capture whether this is the initial plan phase (before any code generation)
         const wasIdle = !isApproval && (assistStep === "idle" || assistStep === "plan");
+        // Detect if user is modifying existing code
+        if (assistStep === "preview") setIsModifying(true);
         setIsProcessing(true);
         if (assistStep === "idle") setAssistStep("plan");
 
@@ -775,6 +778,7 @@ export default function AIAssist() {
             updateTabById(requestTabId, { history: [...aiAssistHistory, errorMsg] });
         } finally {
             setIsProcessing(false);
+            setIsModifying(false);
             setAbortController(null);
             setStatus(null);
         }
@@ -1412,7 +1416,23 @@ export default function AIAssist() {
                             </div>
 
                             <div className="flex-1 overflow-auto relative bg-[#050505]">
-                                {viewMode === "preview" && currentPreviewData ? (
+                                {isModifying ? (
+                                    <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-[#050505]/95 backdrop-blur-xl">
+                                        <div className="relative mb-6">
+                                            <div className="w-16 h-16 rounded-full border-[3px] border-blue-500/20 border-t-blue-500 animate-spin" />
+                                            <div className="absolute inset-0 flex items-center justify-center">
+                                                <Wrench className="h-6 w-6 text-blue-400 animate-pulse" />
+                                            </div>
+                                        </div>
+                                        <p className="text-sm font-black text-blue-200 uppercase tracking-[0.2em]">Modification in Progress</p>
+                                        <p className="text-[10px] text-blue-400/60 mt-2 font-semibold tracking-wider">Rewriting your artifact...</p>
+                                        <div className="flex items-center gap-1.5 mt-4">
+                                            {[0, 1, 2].map(i => (
+                                                <div key={i} className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: `${i * 0.15}s` }} />
+                                            ))}
+                                        </div>
+                                    </div>
+                                ) : viewMode === "preview" && currentPreviewData ? (
                                     <CanvasErrorBoundary>
                                         <div className="mx-auto transition-all duration-300 h-full"
                                              style={deviceSize !== "full"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "promptarch",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Transform vague ideas into production-ready prompts and PRDs",
   "scripts": {
     "dev": "next dev",