Initialize PromptArch: The Prompt Enhancer (Fork of ClavixDev/Clavix)
This commit is contained in:
Gemini AI
@@ -0,0 +1,287 @@
|
||||
# PromptArch Implementation Plan
|
||||
|
||||
## Phase 1: Project Setup & Foundation
|
||||
|
||||
* Initialize Next.js 14+ with TypeScript, TailwindCSS, shadcn/ui
|
||||
|
||||
* Set up project structure: `/app`, `/components`, `/lib`, `/services`
|
||||
|
||||
* Configure environment variables for all API keys
|
||||
|
||||
* Set up state management (Zustand or Context API)
|
||||
|
||||
* Configure ESLint, Prettier, TypeScript strict mode
|
||||
|
||||
## Phase 2: API Integration Layer
|
||||
|
||||
### 2.1 Qwen Code OAuth Integration
|
||||
|
||||
* Create `/lib/services/qwen-oauth.ts`
|
||||
|
||||
* Implement OAuth flow (browser-based authentication)
|
||||
|
||||
* Create proxy service wrapper for OpenAI-compatible API
|
||||
|
||||
* Handle credential management (\~/.qwen/oauth\_creds.json parsing)
|
||||
|
||||
* Implement token refresh logic (2000 daily requests tracking)
|
||||
|
||||
### 2.2 Ollama Cloud API Integration
|
||||
|
||||
* Create `/lib/services/ollama-cloud.ts`
|
||||
|
||||
* Implement client with OLLAMA\_API\_KEY authentication
|
||||
|
||||
* Support chat completions and generate endpoints
|
||||
|
||||
* Model listing and selection interface
|
||||
|
||||
* Stream response handling
|
||||
|
||||
### 2.3 Z.AI Plan API Integration
|
||||
|
||||
* Create `/lib/services/zai-plan.ts`
|
||||
|
||||
* Implement both general and coding endpoints
|
||||
|
||||
* Bearer token authentication
|
||||
|
||||
* Model selection (glm-4.7, glm-4.5, glm-4.5-air)
|
||||
|
||||
* Request/response handling with error management
|
||||
|
||||
### 2.4 Unified Model Interface
|
||||
|
||||
* Create `/lib/services/model-adapter.ts`
|
||||
|
||||
* Abstract interface for all providers
|
||||
|
||||
* Standardize request/response format
|
||||
|
||||
* Provider selection and fallback logic
|
||||
|
||||
* Usage tracking and quota management
|
||||
|
||||
## Phase 3: Core PromptArch Features
|
||||
|
||||
### 3.1 Prompt Engineering Workflow
|
||||
|
||||
* **Input Panel:** Textarea for raw human prompt
|
||||
|
||||
* **Enhancement Engine:** Transform prompts using:
|
||||
|
||||
* Clavix's 20 patterns and 11 intents
|
||||
|
||||
* Professional prompt structure (Context, Task, Constraints, Output Format)
|
||||
|
||||
* Code-specific templates for coding agents
|
||||
|
||||
* **Output Display:** Show enhanced prompt with diff comparison
|
||||
|
||||
### 3.2 PRD Generation Module
|
||||
|
||||
* Guided Socratic questioning UI
|
||||
|
||||
* 15 specialized patterns (RequirementPrioritizer, UserPersonaEnricher, etc.)
|
||||
|
||||
* Structured PRD template with sections:
|
||||
|
||||
* Overview & Objectives
|
||||
|
||||
* User Personas & Use Cases
|
||||
|
||||
* Functional Requirements
|
||||
|
||||
* Non-functional Requirements
|
||||
|
||||
* Technical Architecture
|
||||
|
||||
* Success Metrics
|
||||
|
||||
### 3.3 Action Plan Generator
|
||||
|
||||
* Convert PRD to actionable implementation plan
|
||||
|
||||
* Task breakdown with priorities (High/Medium/Low)
|
||||
|
||||
* Dependency graph visualization
|
||||
|
||||
* Framework and technology recommendations
|
||||
|
||||
* Coding architecture guidelines
|
||||
|
||||
### 3.4 Framework & Architecture Recommendations
|
||||
|
||||
* Analyze project requirements and suggest:
|
||||
|
||||
* Frontend framework (React/Next.js/Astro/etc.)
|
||||
|
||||
* Backend architecture (REST/GraphQL/Serverless)
|
||||
|
||||
* Database choices based on scale
|
||||
|
||||
* Authentication patterns
|
||||
|
||||
* Deployment strategy
|
||||
|
||||
## Phase 4: Modern UI/UX Design
|
||||
|
||||
### 4.1 Layout & Navigation
|
||||
|
||||
* Sidebar with workflow stages (Prompt → PRD → Plan → Output)
|
||||
|
||||
* Top bar with model selector and settings
|
||||
|
||||
* Responsive design for desktop and tablet
|
||||
|
||||
* Dark/light mode toggle
|
||||
|
||||
### 4.2 Interactive Components
|
||||
|
||||
* **Prompt Input Panel:** Real-time analysis indicators
|
||||
|
||||
* **Split View:** Original vs Enhanced prompt comparison
|
||||
|
||||
* **Progressive Disclosure:** Collapsible PRD sections
|
||||
|
||||
* **Drag-and-Drop:** Reorder tasks in action plan
|
||||
|
||||
* **Copy/Export:** One-click copy outputs
|
||||
|
||||
### 4.3 Workflow Visualizations
|
||||
|
||||
* Pipeline diagram showing current stage
|
||||
|
||||
* Dependency graph for tasks
|
||||
|
||||
* Progress tracking with checkmarks
|
||||
|
||||
* Status badges (Draft/In Progress/Complete)
|
||||
|
||||
### 4.4 Settings & Configuration
|
||||
|
||||
* API key management interface
|
||||
|
||||
* Model selection per stage
|
||||
|
||||
* Provider fallback configuration
|
||||
|
||||
* Usage statistics dashboard
|
||||
|
||||
* Theme customization
|
||||
|
||||
## Phase 5: Advanced Features
|
||||
|
||||
### 5.1 Multi-Model Support
|
||||
|
||||
* Select different models for different stages:
|
||||
|
||||
* Qwen Code for prompt enhancement
|
||||
|
||||
* Ollama Cloud for PRD generation
|
||||
|
||||
* Z.AI Plan for action planning
|
||||
|
||||
* Model comparison side-by-side
|
||||
|
||||
* Cost estimation per model
|
||||
|
||||
### 5.2 Template Library
|
||||
|
||||
* Pre-built prompt templates for common scenarios:
|
||||
|
||||
* Web Development
|
||||
|
||||
* Mobile App Development
|
||||
|
||||
* API Development
|
||||
|
||||
* Data Science/ML
|
||||
|
||||
* DevOps/Infrastructure
|
||||
|
||||
* Custom template creation
|
||||
|
||||
### 5.3 History & Persistence
|
||||
|
||||
* Save all generated outputs to local storage
|
||||
|
||||
* Version history of prompts and PRDs
|
||||
|
||||
* Search and filter past projects
|
||||
|
||||
* Export to Markdown, JSON, or PDF
|
||||
|
||||
### 5.4 Collaboration Features
|
||||
|
||||
* Share outputs via URL
|
||||
|
||||
* Export prompts for Claude Code, Cursor, Windsurf
|
||||
|
||||
* Integration with slash command format
|
||||
|
||||
* Copy-ready templates for AI agents
|
||||
|
||||
## Phase 6: Testing & Quality Assurance
|
||||
|
||||
* Unit tests for API integration layer
|
||||
|
||||
* Integration tests with mock providers
|
||||
|
||||
* E2E tests for complete workflows
|
||||
|
||||
* Accessibility testing (WCAG AA)
|
||||
|
||||
* Performance optimization
|
||||
|
||||
## Technical Stack
|
||||
|
||||
```
|
||||
Frontend: Next.js 14 (App Router) + TypeScript
|
||||
UI Library: shadcn/ui + Radix UI + TailwindCSS
|
||||
State: Zustand
|
||||
Forms: React Hook Form + Zod
|
||||
HTTP: Fetch API + Axios (fallback)
|
||||
Icons: Lucide React
|
||||
Charts: Recharts (for visualizations)
|
||||
Markdown: react-markdown + remark/rehype
|
||||
```
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
promptarch/
|
||||
├── app/
|
||||
│ ├── layout.tsx
|
||||
│ ├── page.tsx
|
||||
│ ├── prompt-enhance/
|
||||
│ ├── prd-generator/
|
||||
│ ├── action-plan/
|
||||
│ └── settings/
|
||||
├── components/
|
||||
│ ├── ui/ (shadcn components)
|
||||
│ ├── workflow/
|
||||
│ ├── panels/
|
||||
│ └── visualizations/
|
||||
├── lib/
|
||||
│ ├── services/
|
||||
│ │ ├── qwen-oauth.ts
|
||||
│ │ ├── ollama-cloud.ts
|
||||
│ │ ├── zai-plan.ts
|
||||
│ │ └── model-adapter.ts
|
||||
│ ├── store.ts
|
||||
│ ├── utils.ts
|
||||
│ └── patterns/
|
||||
├── types/
|
||||
│ └── index.ts
|
||||
└── public/
|
||||
```
|
||||
|
||||
## Key Differentiators
|
||||
|
||||
1. **Unified Multi-Model Workflow:** Seamlessly switch between Qwen, Ollama, and Z.AI
|
||||
2. **Professional Prompt Engineering:** 20 patterns + 11 intents from Clavix, enhanced
|
||||
3. **Complete Development Lifecycle:** From vague idea to verified implementation
|
||||
4. **Modern Web UI:** Not just CLI - full interactive experience
|
||||
5. **Coding Agent Ready:** Outputs optimized for Claude Code, Cursor, Windsurf, etc.
|
||||
|
||||
Reference in New Issue
Block a user