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

This commit is contained in:
admin
2026-03-18 20:30:31 +00:00
Unverified
parent 2ad51b6583
commit 2158d89314
4 changed files with 186 additions and 148 deletions

View File

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

View File

@@ -1,6 +1,6 @@
# PromptArch: AI Orchestration Platform # 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). > **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).** > **Learn more about this architecture [here](https://z.ai/subscribe?ic=R0K78RJKNW).**

View File

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef, memo } from "react";
import { import {
MessageSquare, Send, Code2, Palette, Search, MessageSquare, Send, Code2, Palette, Search,
Trash2, Copy, Monitor, StopCircle, X, Zap, Ghost, 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"; } from "lucide-react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
@@ -517,6 +517,7 @@ export default function AIAssist() {
const [viewMode, setViewMode] = useState<"preview" | "code">("preview"); const [viewMode, setViewMode] = useState<"preview" | "code">("preview");
const [deviceSize, setDeviceSize] = useState<"full" | "desktop" | "tablet" | "mobile">("full"); const [deviceSize, setDeviceSize] = useState<"full" | "desktop" | "tablet" | "mobile">("full");
const deviceWidths: Record<string, string> = { full: "100%", desktop: "1280px", tablet: "768px", mobile: "375px" }; 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); const [abortController, setAbortController] = useState<AbortController | null>(null);
// Agent suggestion state // Agent suggestion state
@@ -639,6 +640,8 @@ export default function AIAssist() {
// Capture whether this is the initial plan phase (before any code generation) // Capture whether this is the initial plan phase (before any code generation)
const wasIdle = !isApproval && (assistStep === "idle" || assistStep === "plan"); const wasIdle = !isApproval && (assistStep === "idle" || assistStep === "plan");
// Detect if user is modifying existing code
if (assistStep === "preview") setIsModifying(true);
setIsProcessing(true); setIsProcessing(true);
if (assistStep === "idle") setAssistStep("plan"); if (assistStep === "idle") setAssistStep("plan");
@@ -775,6 +778,7 @@ export default function AIAssist() {
updateTabById(requestTabId, { history: [...aiAssistHistory, errorMsg] }); updateTabById(requestTabId, { history: [...aiAssistHistory, errorMsg] });
} finally { } finally {
setIsProcessing(false); setIsProcessing(false);
setIsModifying(false);
setAbortController(null); setAbortController(null);
setStatus(null); setStatus(null);
} }
@@ -1412,7 +1416,23 @@ export default function AIAssist() {
</div> </div>
<div className="flex-1 overflow-auto relative bg-[#050505]"> <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> <CanvasErrorBoundary>
<div className="mx-auto transition-all duration-300 h-full" <div className="mx-auto transition-all duration-300 h-full"
style={deviceSize !== "full" style={deviceSize !== "full"

View File

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