fix: modification progress overlay, preview blink fix (v1.5.0)
This commit is contained in:
admin
306
CHANGELOG.md
306
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)
|
||||
|
||||
@@ -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).**
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user