feat: v1.3.0 — plan-first workflow, OpenRouter provider, enhanced prompt engine

Major changes:
- Plan-first workflow: AI generates structured plan before code, with
  plan review card (Modify Plan / Start Coding / Skip to Code)
- Post-coding UX: Preview + Request Modifications buttons after code gen
- OpenRouter integration: 4th AI provider with 20+ model support
- Enhanced prompt engine: 9 strategies, 11+ intent patterns, modular
- PLAN MODE system prompt block in all 4 services
- Fixed stale React closure in approveAndGenerate with isApproval flag
- Fixed canvas auto-opening during plan phase with wasIdle gate
- Updated README, CHANGELOG, .env.example, version bump to 1.3.0
This commit is contained in:
admin
2026-03-18 18:45:37 +00:00
Unverified
parent cca11fe07a
commit a4b7a0d9e4
17 changed files with 3189 additions and 358 deletions

336
README.md
View File

@@ -1,165 +1,171 @@
# PromptArch: The Prompt Enhancer 🚀
> **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).**
---
> **Fork Note**: This project is a specialized fork of [ClavixDev/Clavix](https://github.com/ClavixDev/Clavix), reimagined as a modern web-based platform for visual prompt engineering and product planning.
Transform vague ideas into production-ready prompts and PRDs. PromptArch is an elite AI orchestration platform designed for software architects and Vibe Coders.
**Developed by Roman | RyzenAdvanced**
- 📦 **Gitea Repository**: [admin/PromptArch](https://github.rommark.dev/admin/PromptArch)
- 📮 **Telegram**: [@VibeCodePrompterSystem](https://t.me/VibeCodePrompterSystem)
## 🌟 Visual Overview
### 🛠 Core Capabilities
- **Prompt Enhancer**: Refine vague prompts into surgical instructions for AI agents.
- **PRD Generator**: Convert ideas into structured Product Requirements Documents.
- **Action Plan**: Decompose PRDs into actionable development steps and framework recommendations.
## ✨ Features
- **Multi-Provider Ecosystem**: Native support for Qwen Code (OAuth), Ollama Cloud, and Z.AI Plan API.
- **Visual Prompt Engineering**: Patterns-based enhancement with 11+ intent types.
- **Architectural Decomposition**: Automatic generation of PRDs and structured Action Plans.
- **Resilient Fallbacks**: Multi-tier provider system that ensures uptime even if primary APIs fail.
- **Modern UI/UX**: Built with Next.js 15, Tailwind CSS, and shadcn/ui for a seamless developer experience.
- **OAuth Integration**: Secure Qwen authentication with 2,000 free daily requests.
## 🚀 Quick Start
1. **Clone & Install**:
```bash
git clone https://github.rommark.dev/admin/PromptArch.git
cd PromptArch
npm install
```
2. **Configuration**:
Copy `.env.example` to `.env` and add your API keys:
```bash
cp .env.example .env
```
3. **Launch**:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) to begin.
## 📋 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.2.0] - 2025-01-19
#### 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:
- ✓ Green 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
- Clear error messages: "Invalid API key", "Network error", etc.
- **Store Enhancements**
- `ApiValidationStatus` interface for tracking connection states
- `apiValidationStatus` state with per-provider tracking
- `setApiValidationStatus` action for updating validation results
#### Changed
- Updated Settings panel with improved UX for API key management
- Enhanced agent selection behavior to prevent unintended switches
- Improved error handling for authentication failures
#### Technical Details
- Files modified:
- `lib/store.ts` - Added validation state management
- `lib/services/zai-plan.ts` - Added `validateConnection()` method
- `lib/services/model-adapter.ts` - Added validation proxy
- `components/SettingsPanel.tsx` - Complete rewrite with validation UI
- `components/AIAssist.tsx` - Added suggestion handling and UI
### [1.1.0] - 2025-01-15
#### 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-01-01
#### 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)
## 🛠 Tech Stack
- **Framework**: [Next.js 15.5](https://nextjs.org/) (App Router)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **State Management**: [Zustand](https://zustand-demo.pmnd.rs/)
- **Components**: [shadcn/ui](https://ui.shadcn.com/)
- **Icons**: [Lucide React](https://lucide.dev/)
## 🤝 Attribution & Credits
**Author**: Roman | RyzenAdvanced
- 📦 **Gitea**: [admin/PromptArch](https://github.rommark.dev/admin/PromptArch)
- 📮 **Telegram**: [@VibeCodePrompterSystem](https://t.me/VibeCodePrompterSystem)
**Forked from**: [ClavixDev/Clavix](https://github.com/ClavixDev/Clavix)
- This project is a visual and architectural evolution of the Clavix framework
- Clavix focuses on agentic-first Markdown templates
- PromptArch provides a centralized web interface with advanced model orchestration
**Development Platform**: [TRAE.AI IDE](https://trae.ai) powered by elite [GLM 4.7 model](https://z.ai/subscribe?ic=R0K78RJKNW)
- 100% AI-assisted development using TRAE.AI's advanced coding capabilities
- Learn more about the architecture [here](https://z.ai/subscribe?ic=R0K78RJKNW)
## Development
```bash
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Lint code
npm run lint
```
## License
ISC
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
# PromptArch: AI Orchestration Platform
> **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).**
---
> **Fork Note**: This project is a specialized fork of [ClavixDev/Clavix](https://github.com/ClavixDev/Clavix), reimagined as a modern web-based platform for visual prompt engineering and product planning.
Transform vague ideas into production-ready prompts and PRDs. PromptArch is an AI orchestration platform designed for software architects and Vibe Coders, featuring a **plan-first workflow** with multi-provider AI support and live canvas rendering.
**Developed by Roman | RyzenAdvanced**
- **Gitea Repository**: [admin/PromptArch](https://github.rommark.dev/admin/PromptArch)
- **Live Site**: [rommark.dev/tools/promptarch](https://rommark.dev/tools/promptarch/)
- **Telegram**: [@VibeCodePrompterSystem](https://t.me/VibeCodePrompterSystem)
## Core Capabilities
| Feature | Description |
|---------|-------------|
| **AI Assist** | Plan-first workflow: describe a task, get a structured plan, approve, then generate working code with live preview |
| **Prompt Enhancer** | Refine vague prompts into surgical instructions using 9 enhancement strategies and 11+ intent patterns |
| **PRD Generator** | Convert ideas into structured Product Requirements Documents |
| **Action Plan** | Decompose PRDs into actionable development steps and framework recommendations |
| **Google Ads Generator** | Generate ad campaigns with XLSX and HTML report export |
| **Slides Generator** | Create presentation decks from prompts |
| **Market Researcher** | AI-powered market research and analysis |
## Features
### Plan-First Workflow (v1.3.0)
- AI generates a structured plan (architecture, tech stack, files, steps) before any code
- Plan Review Card with **Modify Plan**, **Start Coding**, and **Skip to Code** actions
- After code generation: **Preview** canvas + **Request Modifications** buttons
- Streaming plan mode with real-time parsing and canvas suppression
### Multi-Provider AI (4 Providers)
| Provider | Auth | Models |
|----------|------|--------|
| **Qwen Code** | OAuth (2,000 free req/day) | Qwen Coder models |
| **Ollama Cloud** | API Key | Open-source models |
| **Z.AI Plan** | API Key | GLM general + coding models |
| **OpenRouter** | API Key | 20+ models (Gemini, Llama, Mistral, etc.) |
### Visual Canvas
- Live code rendering with `[PREVIEW]` tags
- HTML, React, Python, and more — rendered in-browser
- Auto-detect renderable vs. code-only previews
### Enhanced Prompt Engine
- 9 strategies: clarify, add-context, add-constraints, structure, add-examples, set-tone, expand, simplify, chain-of-thought
- Context-aware strategy selection based on detected intent
- 11+ intent detection patterns (coding, creative, analysis, etc.)
### Other
- Multi-language support (English, Russian, Hebrew)
- Download generated artifacts as ZIP
- Push to GitHub integration
- Resilient multi-tier provider fallbacks
## Quick Start
1. **Clone & Install**:
```bash
git clone https://github.rommark.dev/admin/PromptArch.git
cd PromptArch
npm install
```
2. **Configuration**:
Copy `.env.example` to `.env` and add your API keys:
```bash
cp .env.example .env
```
Configure at least one provider:
- **Qwen**: Get OAuth credentials from [qwen.ai](https://qwen.ai)
- **Ollama**: Get API key from [ollama.com/cloud](https://ollama.com/cloud)
- **Z.AI**: Get API key from [docs.z.ai](https://docs.z.ai)
- **OpenRouter**: Get API key from [openrouter.ai/keys](https://openrouter.ai/keys) (free tier available)
3. **Launch**:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) to begin.
## Tech Stack
- **Framework**: Next.js 15 (App Router, Turbopack)
- **Styling**: Tailwind CSS
- **State Management**: Zustand
- **Components**: shadcn/ui (Radix UI)
- **Icons**: Lucide React
- **Markdown**: react-markdown
- **Language**: TypeScript
## Project Structure
```
promptarch/
components/
AIAssist.tsx # Main AI chat with plan-first workflow (1453 lines)
PromptEnhancer.tsx # Prompt enhancement UI with intent detection (556 lines)
SettingsPanel.tsx # Provider configuration and API key management (569 lines)
Sidebar.tsx # Navigation sidebar
GoogleAdsGenerator.tsx # Google Ads campaign generator
PRDGenerator.tsx # Product Requirements Document generator
ActionPlanGenerator.tsx # Action plan decomposition
SlidesGenerator.tsx # Presentation deck generator
MarketResearcher.tsx # Market research tool
HistoryPanel.tsx # Chat history management
lib/
enhance-engine.ts # Modular prompt enhancement (9 strategies)
store.ts # Zustand state store
artifact-utils.ts # Preview/rendering utilities
export-utils.ts # Export to XLSX/HTML/ZIP
services/
qwen-oauth.ts # Qwen OAuth streaming service
ollama-cloud.ts # Ollama Cloud streaming service
zai-plan.ts # Z.AI Plan streaming service
openrouter.ts # OpenRouter streaming service
model-adapter.ts # Unified provider adapter
adapter-instance.ts # Provider registry
i18n/
translations.ts # EN/RU/HE translations
types/
index.ts # TypeScript interfaces
```
## Versioning
This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html). See [CHANGELOG.md](CHANGELOG.md) for detailed release notes.
| Version | Date | Highlights |
|---------|------|------------|
| [1.3.0](CHANGELOG.md#130---2025-03-18) | 2025-03-18 | Plan-first workflow, OpenRouter, post-coding UX, enhanced prompt engine |
| [1.2.0](CHANGELOG.md#120---2025-01-19) | 2025-01-19 | SEO agent fixes, Z.AI API validation |
| [1.1.0](CHANGELOG.md#110---2025-01-15) | 2025-01-15 | GitHub push, XLSX/HTML export, OAuth management |
| [1.0.0](CHANGELOG.md#100---2025-01-01) | 2025-01-01 | Initial release |
## Development
```bash
npm install # Install dependencies
npm run dev # Development server (Turbopack)
npm run build # Production build
npm start # Start production server
npm run lint # Lint code
```
## Attribution & Credits
**Author**: Roman | RyzenAdvanced
- **Gitea**: [admin/PromptArch](https://github.rommark.dev/admin/PromptArch)
- **Telegram**: [@VibeCodePrompterSystem](https://t.me/VibeCodePrompterSystem)
**Forked from**: [ClavixDev/Clavix](https://github.com/ClavixDev/Clavix)
- Visual and architectural evolution of the Clavix framework
**Development Platform**: [TRAE.AI IDE](https://trae.ai) powered by [GLM 4.7](https://z.ai/subscribe?ic=R0K78RJKNW)
## License
ISC
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.