From 2158d89314d8fd1fef27e5a0988cfe0b7d57c137 Mon Sep 17 00:00:00 2001 From: admin Date: Wed, 18 Mar 2026 20:30:31 +0000 Subject: [PATCH] fix: modification progress overlay, preview blink fix (v1.5.0) --- CHANGELOG.md | 306 +++++++++++++++++++++------------------- README.md | 2 +- components/AIAssist.tsx | 24 +++- package.json | 2 +- 4 files changed, 186 insertions(+), 148 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de1d664..d5bf644 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,144 +1,162 @@ -# Changelog - -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.4.0] - 2026-03-18 19:57 UTC - -### Added -- **Review Code Button** — Post-coding action to send generated code back to AI for review - - `reviewCode()` function sends code with review-focused prompt - - Emerald-green "Review" button alongside Preview and Modify - - 3-column post-coding action grid: Preview / Review / Modify -- **Web Search Grounding** — Enrich AI prompts with live web search results - - `lib/services/search-api.ts` — SearXNG public API wrapper with 4 instance fallback - - `/api/search` route — server-side search proxy endpoint - - Toggle button in toolbar to enable/disable (amber highlight when active) - - Shows "Searching the web..." status while fetching - - Appends top 5 results as `[WEB SEARCH CONTEXT]` to user prompt -- **Responsive Preview** — Device size selector in canvas panel - - Full / Desktop (1280px) / Tablet (768px) / Mobile (375px) buttons - - Centered device frame with border, shadow, and scroll on overflow - - Only visible in preview mode, below Live Render / Inspect Code tabs - -### Fixed -- **Model selector text color** — Option text now white on dark theme (`bg-[#0b1414] text-white`) -- **Button text overflow** — Shortened labels (Preview/Review/Modify), added `min-w-0` for proper truncation -- **Duplicate activateArtifact button** — Original button now hides when post-coding action row is shown - -### Technical Details -- Files modified: 1 (AIAssist.tsx: +85/-11 lines) -- Files added: 2 (`lib/services/search-api.ts`, `app/api/search/route.ts`) -- New state: `deviceSize`, `webSearchEnabled` -- New function: `reviewCode()` - -## [1.3.0] - 2026-03-18 18:51 UTC - -### Added -- **OpenRouter Integration** — 4th AI provider with API key auth, 20+ model support - - New `lib/services/openrouter.ts` streaming service - - Provider selector in AI Assist: Qwen, Ollama, Z.AI, OpenRouter - - Default model: `google/gemini-2.0-flash-exp:free` - - Custom model selector with popular free/paid model presets - - Settings panel: API key input with validation and model picker -- **Plan-First Workflow** — AI now generates a structured plan before code - - PLAN MODE instructions injected into all 4 service system prompts - - Plan card UI with architecture, tech stack, files, and steps - - `parsePlanFromResponse()` extracts plans from AI markdown output - - `[PLAN]` tags hidden from displayed chat messages - - Three action buttons: **Modify Plan** / **Start Coding** / **Skip to Code** -- **Post-Coding UX** — Preview + Request Modifications after code generation - - After "Start Coding" approval, AI generates code with `[PREVIEW]` tags - - Canvas opens automatically with renderable previews - - Two post-coding buttons: **Preview** (re-opens canvas) and **Request Modifications** - - `isApproval` flag prevents stale React closure bugs in approval flow -- **Enhanced Prompt Engine** — New modular prompt enhancement system - - `lib/enhance-engine.ts` with 9 enhancement strategies - - Strategies: clarify, add-context, add-constraints, structure, add-examples, set-tone, expand, simplify, chain-of-thought - - Context-aware enhancement based on detected intent type - - 11+ intent detection patterns (coding, creative, analysis, etc.) - - Smart strategy selection per intent for optimal prompt refinement -- **Streaming Plan Mode** — Real-time plan parsing during AI response - - `wasIdle` flag captures initial request phase before state updates - - Canvas display suppressed during plan generation, enabled after approval - - Post-stream routing: plan card for initial requests, preview for approvals - - Tab `showCanvas` state gated by plan phase - -### Changed -- **AIAssist.tsx** — Major refactor for plan-first flow - - `handleSendMessage` now accepts `isApproval` parameter to prevent stale closures - - `approveAndGenerate()` passes `isApproval=true` to bypass idle detection - - `assistStep` state machine: `idle -> plan -> generating -> preview` - - `parseStreamingContent()` filters `[PLAN]` tags from displayed output -- **PromptEnhancer.tsx** — Rebuilt with modular enhance engine - - Moved enhancement logic to `lib/enhance-engine.ts` - - Added expand, simplify, and chain-of-thought strategies - - Improved intent detection and strategy mapping -- **SettingsPanel.tsx** — Added OpenRouter provider configuration - - API key input with validation - - Model selector with preset dropdown - - Provider-specific endpoint display -- **model-adapter.ts** — Extended with OpenRouter provider support - - New adapter mapping for OpenRouter service - - Unified interface across all 4 providers -- **translations.ts** — Added i18n keys for plan mode, OpenRouter, post-coding actions - - Keys: `modifyPlan`, `startCoding`, `skipToCode`, `requestModifications` - - OpenRouter provider labels and descriptions - - English, Russian, Hebrew translations updated -- **store.ts** — Added `selectedProvider` state for multi-provider selection -- **types/index.ts** — Added `PreviewData` interface for typed canvas rendering -- **adapter-instance.ts** — Registered OpenRouter in provider registry - -### Fixed -- **Stale React closure** in `approveAndGenerate` — `setAssistStep("generating")` followed by `handleSendMessage()` read stale `assistStep` value. Fixed with explicit `isApproval` boolean parameter. -- **Plan card reappearing after code generation** — Post-stream logic now correctly routes to `preview` mode after approval coding, not back to `plan` mode. -- **Canvas auto-opening during plan phase** — `setShowCanvas(true)` in `onChunk` now gated by `!wasIdle` flag. -- **i18n missing keys** — Added `syncComplete` for Hebrew, fixed double commas in multiple translation strings. - -### Technical Details -- Files modified: 11 (960 insertions, 194 deletions) -- Files added: 2 (`lib/enhance-engine.ts`, `lib/services/openrouter.ts`) -- Total project lines: ~10,179 across core files -- System prompt PLAN MODE block added to: `qwen-oauth.ts`, `ollama-cloud.ts`, `zai-plan.ts`, `openrouter.ts` - -## [1.2.0] - 2026-01-19 19:16 UTC - -### Added -- **SEO Agent Behavior Fixes** - - SEO agent now stays locked and answers queries through an SEO lens - - Smart agent suggestions via `[SUGGEST_AGENT:xxx]` marker for clearly non-SEO tasks - - Visual suggestion banner with Switch/Dismiss buttons - - Prevented unwanted agent auto-switching mid-response -- **z.ai API Validation** - - Real-time API key validation with 500ms debounce - - Inline status indicators: - - Checkmark with "Validated Xm ago" for valid keys - - Red X with error message for invalid keys - - Loading spinner during validation - - "Test Connection" button for manual re-validation - - Persistent validation cache (5 minutes) in localStorage - -### Changed -- Updated Settings panel with improved UX for API key management -- Enhanced agent selection behavior to prevent unintended switches - -## [1.1.0] - 2025-12-29 17:55 UTC - -### Added -- GitHub integration for pushing AI-generated artifacts -- XLSX export functionality for Google Ads campaigns -- High-fidelity HTML report generation -- OAuth token management for Qwen API - -## [1.0.0] - 2025-12-29 13:51 UTC - -### Added -- Initial release of PromptArch -- Multi-provider AI support (Qwen, Ollama, Z.AI) -- Prompt Enhancer with 11+ intent patterns -- PRD Generator with structured output -- Action Plan generator with framework recommendations -- Visual canvas for live code rendering -- Multi-language support (English, Russian, Hebrew) +# Changelog + +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 +- **Review Code Button** — Post-coding action to send generated code back to AI for review + - `reviewCode()` function sends code with review-focused prompt + - Emerald-green "Review" button alongside Preview and Modify + - 3-column post-coding action grid: Preview / Review / Modify +- **Web Search Grounding** — Enrich AI prompts with live web search results + - `lib/services/search-api.ts` — SearXNG public API wrapper with 4 instance fallback + - `/api/search` route — server-side search proxy endpoint + - Toggle button in toolbar to enable/disable (amber highlight when active) + - Shows "Searching the web..." status while fetching + - Appends top 5 results as `[WEB SEARCH CONTEXT]` to user prompt +- **Responsive Preview** — Device size selector in canvas panel + - Full / Desktop (1280px) / Tablet (768px) / Mobile (375px) buttons + - Centered device frame with border, shadow, and scroll on overflow + - Only visible in preview mode, below Live Render / Inspect Code tabs + +### Fixed +- **Model selector text color** — Option text now white on dark theme (`bg-[#0b1414] text-white`) +- **Button text overflow** — Shortened labels (Preview/Review/Modify), added `min-w-0` for proper truncation +- **Duplicate activateArtifact button** — Original button now hides when post-coding action row is shown + +### Technical Details +- Files modified: 1 (AIAssist.tsx: +85/-11 lines) +- Files added: 2 (`lib/services/search-api.ts`, `app/api/search/route.ts`) +- New state: `deviceSize`, `webSearchEnabled` +- New function: `reviewCode()` + +## [1.3.0] - 2026-03-18 18:51 UTC + +### Added +- **OpenRouter Integration** — 4th AI provider with API key auth, 20+ model support + - New `lib/services/openrouter.ts` streaming service + - Provider selector in AI Assist: Qwen, Ollama, Z.AI, OpenRouter + - Default model: `google/gemini-2.0-flash-exp:free` + - Custom model selector with popular free/paid model presets + - Settings panel: API key input with validation and model picker +- **Plan-First Workflow** — AI now generates a structured plan before code + - PLAN MODE instructions injected into all 4 service system prompts + - Plan card UI with architecture, tech stack, files, and steps + - `parsePlanFromResponse()` extracts plans from AI markdown output + - `[PLAN]` tags hidden from displayed chat messages + - Three action buttons: **Modify Plan** / **Start Coding** / **Skip to Code** +- **Post-Coding UX** — Preview + Request Modifications after code generation + - After "Start Coding" approval, AI generates code with `[PREVIEW]` tags + - Canvas opens automatically with renderable previews + - Two post-coding buttons: **Preview** (re-opens canvas) and **Request Modifications** + - `isApproval` flag prevents stale React closure bugs in approval flow +- **Enhanced Prompt Engine** — New modular prompt enhancement system + - `lib/enhance-engine.ts` with 9 enhancement strategies + - Strategies: clarify, add-context, add-constraints, structure, add-examples, set-tone, expand, simplify, chain-of-thought + - Context-aware enhancement based on detected intent type + - 11+ intent detection patterns (coding, creative, analysis, etc.) + - Smart strategy selection per intent for optimal prompt refinement +- **Streaming Plan Mode** — Real-time plan parsing during AI response + - `wasIdle` flag captures initial request phase before state updates + - Canvas display suppressed during plan generation, enabled after approval + - Post-stream routing: plan card for initial requests, preview for approvals + - Tab `showCanvas` state gated by plan phase + +### Changed +- **AIAssist.tsx** — Major refactor for plan-first flow + - `handleSendMessage` now accepts `isApproval` parameter to prevent stale closures + - `approveAndGenerate()` passes `isApproval=true` to bypass idle detection + - `assistStep` state machine: `idle -> plan -> generating -> preview` + - `parseStreamingContent()` filters `[PLAN]` tags from displayed output +- **PromptEnhancer.tsx** — Rebuilt with modular enhance engine + - Moved enhancement logic to `lib/enhance-engine.ts` + - Added expand, simplify, and chain-of-thought strategies + - Improved intent detection and strategy mapping +- **SettingsPanel.tsx** — Added OpenRouter provider configuration + - API key input with validation + - Model selector with preset dropdown + - Provider-specific endpoint display +- **model-adapter.ts** — Extended with OpenRouter provider support + - New adapter mapping for OpenRouter service + - Unified interface across all 4 providers +- **translations.ts** — Added i18n keys for plan mode, OpenRouter, post-coding actions + - Keys: `modifyPlan`, `startCoding`, `skipToCode`, `requestModifications` + - OpenRouter provider labels and descriptions + - English, Russian, Hebrew translations updated +- **store.ts** — Added `selectedProvider` state for multi-provider selection +- **types/index.ts** — Added `PreviewData` interface for typed canvas rendering +- **adapter-instance.ts** — Registered OpenRouter in provider registry + +### Fixed +- **Stale React closure** in `approveAndGenerate` — `setAssistStep("generating")` followed by `handleSendMessage()` read stale `assistStep` value. Fixed with explicit `isApproval` boolean parameter. +- **Plan card reappearing after code generation** — Post-stream logic now correctly routes to `preview` mode after approval coding, not back to `plan` mode. +- **Canvas auto-opening during plan phase** — `setShowCanvas(true)` in `onChunk` now gated by `!wasIdle` flag. +- **i18n missing keys** — Added `syncComplete` for Hebrew, fixed double commas in multiple translation strings. + +### Technical Details +- Files modified: 11 (960 insertions, 194 deletions) +- Files added: 2 (`lib/enhance-engine.ts`, `lib/services/openrouter.ts`) +- Total project lines: ~10,179 across core files +- System prompt PLAN MODE block added to: `qwen-oauth.ts`, `ollama-cloud.ts`, `zai-plan.ts`, `openrouter.ts` + +## [1.2.0] - 2026-01-19 19:16 UTC + +### Added +- **SEO Agent Behavior Fixes** + - SEO agent now stays locked and answers queries through an SEO lens + - Smart agent suggestions via `[SUGGEST_AGENT:xxx]` marker for clearly non-SEO tasks + - Visual suggestion banner with Switch/Dismiss buttons + - Prevented unwanted agent auto-switching mid-response +- **z.ai API Validation** + - Real-time API key validation with 500ms debounce + - Inline status indicators: + - Checkmark with "Validated Xm ago" for valid keys + - Red X with error message for invalid keys + - Loading spinner during validation + - "Test Connection" button for manual re-validation + - Persistent validation cache (5 minutes) in localStorage + +### Changed +- Updated Settings panel with improved UX for API key management +- Enhanced agent selection behavior to prevent unintended switches + +## [1.1.0] - 2025-12-29 17:55 UTC + +### Added +- GitHub integration for pushing AI-generated artifacts +- XLSX export functionality for Google Ads campaigns +- High-fidelity HTML report generation +- OAuth token management for Qwen API + +## [1.0.0] - 2025-12-29 13:51 UTC + +### Added +- Initial release of PromptArch +- Multi-provider AI support (Qwen, Ollama, Z.AI) +- Prompt Enhancer with 11+ intent patterns +- PRD Generator with structured output +- Action Plan generator with framework recommendations +- Visual canvas for live code rendering +- Multi-language support (English, Russian, Hebrew) diff --git a/README.md b/README.md index 673d277..7acee7d 100644 --- a/README.md +++ b/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).** diff --git a/components/AIAssist.tsx b/components/AIAssist.tsx index e15e8af..049e66a 100644 --- a/components/AIAssist.tsx +++ b/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 = { full: "100%", desktop: "1280px", tablet: "768px", mobile: "375px" }; + const [isModifying, setIsModifying] = useState(false); const [abortController, setAbortController] = useState(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() {
- {viewMode === "preview" && currentPreviewData ? ( + {isModifying ? ( +
+
+
+
+ +
+
+

Modification in Progress

+

Rewriting your artifact...

+
+ {[0, 1, 2].map(i => ( +
+ ))} +
+
+ ) : viewMode === "preview" && currentPreviewData ? (