288 lines
6.1 KiB
Markdown
288 lines
6.1 KiB
Markdown
# 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.
|
|
|