chore: slim docs by removing retrace and planning artifacts
This commit is contained in:
Dwindi Ramadhana
@@ -1,299 +0,0 @@
|
||||
# Agentic Vibe UI Design Plan
|
||||
|
||||
## Concept Overview
|
||||
Transform the settings page into an **AI-first, developer-centric interface** that reflects the "agentic" nature of the plugin - autonomous, intelligent, and workflow-driven.
|
||||
|
||||
## Design Philosophy
|
||||
|
||||
### Core Principles
|
||||
1. **Terminal/CLI Aesthetic** - Embrace developer tools aesthetics (VS Code, terminal, code editors)
|
||||
2. **Real-time Feedback** - Show AI "thinking" and processing states
|
||||
3. **Workflow Visualization** - Display the 5-phase workflow prominently
|
||||
4. **Data-Driven** - Emphasize metrics, costs, and performance
|
||||
5. **Dark Mode First** - Modern, eye-friendly interface
|
||||
|
||||
---
|
||||
|
||||
## Proposed Design Elements
|
||||
|
||||
### 1. **Terminal-Inspired Header**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ > wp-agentic-writer --version 0.1.3 │
|
||||
│ [●] Connected to OpenRouter API │
|
||||
│ [i] 142 articles generated | $12.45 total cost │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Monospace font (Fira Code, JetBrains Mono)
|
||||
- Green/amber status indicators
|
||||
- Command-line style output
|
||||
- Real-time API connection status
|
||||
|
||||
### 2. **Workflow Pipeline Visualization**
|
||||
```
|
||||
[Scribble] → [Research] → [Plan] → [Execute] → [Revise]
|
||||
✓ ✓ ✓ ⟳ ○
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Horizontal pipeline with progress indicators
|
||||
- Show which phase is currently active
|
||||
- Click to jump to relevant settings
|
||||
- Animated transitions between phases
|
||||
|
||||
### 3. **Code Editor-Style Tabs**
|
||||
```
|
||||
┌─[ General ]─┬─[ Models ]─┬─[ Cost Log ]─┬─[ Guide ]─┐
|
||||
│ │
|
||||
│ Settings content here... │
|
||||
│ │
|
||||
└────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- VS Code-style tab design
|
||||
- File icon indicators
|
||||
- Close/minimize animations
|
||||
- Breadcrumb navigation
|
||||
|
||||
### 4. **Terminal Output for Cost Log**
|
||||
```
|
||||
$ tail -f /var/log/wpaw/costs.log
|
||||
|
||||
[2026-01-26 12:30:15] POST #142 | claude-3.5-sonnet | writing | $0.0847
|
||||
[2026-01-26 12:28:03] POST #141 | gemini-2.5-flash | planning | $0.0012
|
||||
[2026-01-26 12:25:41] POST #140 | gpt-4o | image | $0.0030
|
||||
[2026-01-26 12:20:18] POST #139 | claude-3.5-sonnet | writing | $0.0921
|
||||
|
||||
> filter --model claude-3.5-sonnet --date today
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Log file aesthetic
|
||||
- Syntax highlighting for different actions
|
||||
- Command-line style filters
|
||||
- Real-time streaming updates
|
||||
|
||||
### 5. **AI Model Cards with Stats**
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ anthropic/claude-3.5-sonnet │
|
||||
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 87% usage │
|
||||
│ │
|
||||
│ • 142 requests this month │
|
||||
│ • $8.45 total cost │
|
||||
│ • Avg response: 1.2s │
|
||||
│ • Quality score: 9.2/10 │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Progress bars for usage
|
||||
- Real-time metrics
|
||||
- Performance indicators
|
||||
- Cost breakdown
|
||||
|
||||
### 6. **Live Activity Monitor**
|
||||
```
|
||||
┌─ System Status ──────────────────────────────┐
|
||||
│ │
|
||||
│ CPU: ▓▓▓▓▓▓▓▓░░░░░░░░ 45% │
|
||||
│ API: ▓▓░░░░░░░░░░░░░░ 12% │
|
||||
│ Queue: 3 pending requests │
|
||||
│ │
|
||||
│ [●] Writing article #143... │
|
||||
│ [○] Waiting for refinement... │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Real-time processing status
|
||||
- Queue visualization
|
||||
- Resource usage meters
|
||||
- Active task indicators
|
||||
|
||||
---
|
||||
|
||||
## Color Scheme Options
|
||||
|
||||
### Option A: **Dark Terminal** (Recommended)
|
||||
```css
|
||||
Background: #1e1e1e (VS Code dark)
|
||||
Foreground: #d4d4d4
|
||||
Accent: #4ec9b0 (teal/cyan)
|
||||
Success: #4ec9b0
|
||||
Warning: #ce9178
|
||||
Error: #f48771
|
||||
```
|
||||
|
||||
### Option B: **Cyberpunk Neon**
|
||||
```css
|
||||
Background: #0a0e27
|
||||
Foreground: #e0e0e0
|
||||
Accent: #00ffff (cyan)
|
||||
Success: #00ff00
|
||||
Warning: #ffff00
|
||||
Error: #ff0066
|
||||
```
|
||||
|
||||
### Option C: **Hacker Green**
|
||||
```css
|
||||
Background: #0c0c0c
|
||||
Foreground: #00ff00
|
||||
Accent: #00cc00
|
||||
Success: #00ff00
|
||||
Warning: #ffcc00
|
||||
Error: #ff3300
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
### Recommended Fonts
|
||||
1. **Monospace:** JetBrains Mono, Fira Code, Source Code Pro
|
||||
2. **UI Text:** Inter, SF Pro, Segoe UI
|
||||
3. **Headers:** Space Grotesk, Outfit
|
||||
|
||||
### Font Sizes
|
||||
- Terminal output: 13px
|
||||
- Body text: 14px
|
||||
- Headers: 18px-24px
|
||||
- Code: 12px
|
||||
|
||||
---
|
||||
|
||||
## Interactive Elements
|
||||
|
||||
### 1. **Command Palette** (Ctrl/Cmd + K)
|
||||
```
|
||||
> Search settings...
|
||||
─────────────────────────────────────
|
||||
→ Change writing model
|
||||
→ View cost breakdown
|
||||
→ Refresh API models
|
||||
→ Export cost log
|
||||
→ Test API connection
|
||||
```
|
||||
|
||||
### 2. **Toast Notifications**
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ ✓ Settings saved successfully │
|
||||
│ Changes applied to 6 models │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3. **Inline Validation**
|
||||
```
|
||||
API Key: ••••••••••••••••••••••••••• [✓]
|
||||
└─ Valid • Last tested 2m ago
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Animation & Transitions
|
||||
|
||||
### Key Animations
|
||||
1. **Typing effect** for terminal output
|
||||
2. **Pulse animation** for active processes
|
||||
3. **Slide transitions** between tabs
|
||||
4. **Fade in/out** for modals and toasts
|
||||
5. **Progress bars** with smooth fills
|
||||
|
||||
### Micro-interactions
|
||||
- Hover effects on buttons (glow, scale)
|
||||
- Click feedback (ripple effect)
|
||||
- Loading spinners (terminal-style)
|
||||
- Success checkmarks (animated)
|
||||
|
||||
---
|
||||
|
||||
## Implementation Phases
|
||||
|
||||
### Phase 1: Foundation (Quick Win)
|
||||
- [ ] Apply dark theme color scheme
|
||||
- [ ] Switch to monospace fonts for key areas
|
||||
- [ ] Add terminal-style header
|
||||
- [ ] Implement basic animations
|
||||
|
||||
### Phase 2: Enhanced UX
|
||||
- [ ] Create workflow pipeline visualization
|
||||
- [ ] Redesign cost log as terminal output
|
||||
- [ ] Add model usage statistics
|
||||
- [ ] Implement command palette
|
||||
|
||||
### Phase 3: Advanced Features
|
||||
- [ ] Real-time activity monitor
|
||||
- [ ] Live API status indicators
|
||||
- [ ] Performance metrics dashboard
|
||||
- [ ] Advanced filtering with CLI-style commands
|
||||
|
||||
### Phase 4: Polish
|
||||
- [ ] Add sound effects (optional)
|
||||
- [ ] Implement keyboard shortcuts
|
||||
- [ ] Create onboarding tour
|
||||
- [ ] Add theme switcher (light/dark/custom)
|
||||
|
||||
---
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### CSS Framework
|
||||
- Keep Bootstrap 5 for grid/utilities
|
||||
- Add custom CSS for terminal aesthetic
|
||||
- Use CSS variables for theming
|
||||
|
||||
### JavaScript Libraries
|
||||
- Keep existing: jQuery, Select2
|
||||
- Add: anime.js (animations), typed.js (typing effect)
|
||||
- Consider: xterm.js (full terminal emulation)
|
||||
|
||||
### Performance
|
||||
- Lazy load terminal output
|
||||
- Virtualize long cost logs
|
||||
- Debounce real-time updates
|
||||
- Cache API responses
|
||||
|
||||
---
|
||||
|
||||
## Inspiration Sources
|
||||
|
||||
1. **VS Code Settings** - Clean, organized, searchable
|
||||
2. **GitHub CLI** - Terminal aesthetic, clear output
|
||||
3. **Vercel Dashboard** - Modern, data-driven
|
||||
4. **Railway.app** - Developer-focused, beautiful
|
||||
5. **Linear.app** - Smooth animations, keyboard-first
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Review & Approve** this design direction
|
||||
2. **Create mockups** for key screens
|
||||
3. **Build prototype** of one section (e.g., cost log)
|
||||
4. **Gather feedback** and iterate
|
||||
5. **Implement** in phases
|
||||
|
||||
---
|
||||
|
||||
## Questions to Consider
|
||||
|
||||
1. Should we support **light mode** or go dark-only?
|
||||
2. Do we want **sound effects** for actions?
|
||||
3. Should the terminal be **interactive** (accept commands)?
|
||||
4. Do we need **mobile responsiveness** or desktop-only?
|
||||
5. Should we add **AI assistant chat** in the settings?
|
||||
|
||||
---
|
||||
|
||||
## Estimated Development Time
|
||||
|
||||
- **Phase 1:** 4-6 hours
|
||||
- **Phase 2:** 8-12 hours
|
||||
- **Phase 3:** 12-16 hours
|
||||
- **Phase 4:** 6-8 hours
|
||||
|
||||
**Total:** ~30-42 hours for full implementation
|
||||
@@ -1,468 +0,0 @@
|
||||
# WP Agentic Writer - Defect Report
|
||||
|
||||
**Date:** January 29, 2026
|
||||
**Reporter:** Development Team
|
||||
**Testing Session:** Image Generation Feature Integration
|
||||
|
||||
---
|
||||
|
||||
## Executive Summary
|
||||
|
||||
After comprehensive flow tracing, **4 critical defects** and **multiple integration gaps** were identified. The image generation backend is functional, but frontend integration is incomplete.
|
||||
|
||||
---
|
||||
|
||||
## Defect #1: "Create Outline Now" Button - Mode Timing Issue
|
||||
|
||||
### Symptom
|
||||
Clicking "Create Outline Now" only prefills English message and changes mode. User expects automatic outline generation.
|
||||
|
||||
### Root Cause Analysis
|
||||
|
||||
**File:** `@/Users/dwindown/Local Sites/bricks/app/public/wp-content/plugins/wp-agentic-writer/assets/js/sidebar.js:4432-4444`
|
||||
|
||||
```javascript
|
||||
onClick: async () => {
|
||||
setAgentMode('planning'); // Line 4434
|
||||
const outlineMessage = 'Create an outline based on our discussion';
|
||||
setInput(outlineMessage); // Line 4438
|
||||
setTimeout(() => {
|
||||
sendMessage(); // Line 4443
|
||||
}, 100);
|
||||
}
|
||||
```
|
||||
|
||||
**Problem:** React's `setState` is asynchronous. When `sendMessage()` is called 100ms later:
|
||||
1. `agentMode` state may not have updated yet in the closure
|
||||
2. `input` state may not have updated yet
|
||||
3. The `sendMessage()` function reads stale state values
|
||||
|
||||
**Flow Trace:**
|
||||
```
|
||||
User clicks "Create Outline Now"
|
||||
↓
|
||||
setAgentMode('planning') called - state update QUEUED
|
||||
↓
|
||||
setInput('Create an outline...') called - state update QUEUED
|
||||
↓
|
||||
100ms timeout fires
|
||||
↓
|
||||
sendMessage() runs with STALE state (agentMode might still be 'chat')
|
||||
↓
|
||||
Line 3084: if (agentMode === 'chat' && !hasMentions) → TRUE (stale state!)
|
||||
↓
|
||||
Chat API called instead of generate-plan
|
||||
```
|
||||
|
||||
### Expected Behavior
|
||||
Button should directly trigger planning flow with proper mode context, bypassing React state timing issues.
|
||||
|
||||
### Recommended Fix
|
||||
Pass mode and message directly to sendMessage, not relying on state:
|
||||
|
||||
```javascript
|
||||
onClick: async () => {
|
||||
setAgentMode('planning');
|
||||
const outlineMessage = 'Create an outline based on our discussion';
|
||||
|
||||
// Call API directly instead of relying on state
|
||||
await triggerPlanGeneration(outlineMessage, {
|
||||
mode: 'planning',
|
||||
autoTrigger: true
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Or use a dedicated function that doesn't depend on `agentMode` state.
|
||||
|
||||
---
|
||||
|
||||
## Defect #2: Clarity Check Not Triggered for Planning Mode
|
||||
|
||||
### Symptom
|
||||
Cost tracking shows `clarity_check` was never called when using "Create Outline Now".
|
||||
|
||||
### Root Cause Analysis
|
||||
|
||||
**Flow Trace through `sendMessage()`:**
|
||||
|
||||
```
|
||||
Line 3049: shouldShowPlan = (agentMode === 'planning')
|
||||
|
||||
If agentMode is still 'chat' (due to Defect #1):
|
||||
Line 3084: if (agentMode === 'chat' && !hasMentions) → TRUE
|
||||
→ Enters CHAT flow (NOT planning flow)
|
||||
→ Calls /chat API
|
||||
→ Clarity check is NOT in this branch
|
||||
```
|
||||
|
||||
**If agentMode correctly updated to 'planning':**
|
||||
```
|
||||
Line 3077: if (agentMode === 'planning' && !hasMentions && currentPlanRef.current)
|
||||
→ FALSE because currentPlanRef.current is null (no existing plan)
|
||||
→ Falls through
|
||||
|
||||
Line 3084: if (agentMode === 'chat' && !hasMentions)
|
||||
→ FALSE because agentMode is 'planning'
|
||||
→ Falls through
|
||||
|
||||
Line 3225: if (!hasMentions && refineableBlocks.length > 0)
|
||||
→ FALSE if no content exists yet
|
||||
→ Falls through
|
||||
|
||||
Line 3262: if (!hasMentions)
|
||||
→ TRUE
|
||||
→ Enters clarity check + generate-plan flow ✓
|
||||
```
|
||||
|
||||
**Conclusion:** The clarity check SHOULD work if agentMode is correctly set to 'planning'. The root cause is **Defect #1** - the timing issue with state updates.
|
||||
|
||||
### Recommended Fix
|
||||
Fix Defect #1, which will automatically fix this defect.
|
||||
|
||||
---
|
||||
|
||||
## Defect #3: Numbered List with Bold Title + Bullets - Incorrect Conversion
|
||||
|
||||
### Symptom
|
||||
Markdown like:
|
||||
```markdown
|
||||
1. **Jadikan AI sebagai Asisten**
|
||||
- Gunakan untuk mempercepat pekerjaan
|
||||
- Manfaatkan sebagai sumber referensi
|
||||
|
||||
1. **Terus Belajar dan Beradaptasi**
|
||||
- Ikuti perkembangan teknologi AI
|
||||
```
|
||||
|
||||
Renders as:
|
||||
- Ordered list with item "1. **Jadikan AI sebagai Asisten**"
|
||||
- Separate unordered list with bullets
|
||||
- **New** ordered list restarting at "1." for next section
|
||||
|
||||
User sees "1. 1. 1." instead of "1. 2. 3."
|
||||
|
||||
### Root Cause Analysis
|
||||
|
||||
**File:** `@/Users/dwindown/Local Sites/bricks/app/public/wp-content/plugins/wp-agentic-writer/includes/class-markdown-parser.php:261-274`
|
||||
|
||||
```php
|
||||
// Handle ordered lists.
|
||||
if ( preg_match( '/^\d+\.\s+(.+)$/', $trimmed, $matches ) ) {
|
||||
// ... creates ordered list item
|
||||
$list_items[] = self::parse_inline_markdown( $matches[1] );
|
||||
continue;
|
||||
}
|
||||
```
|
||||
|
||||
**Problem:** The parser correctly identifies numbered items, but when an empty line or different list type appears, it flushes the current list. Each section becomes a **separate** ordered list block, each starting at 1.
|
||||
|
||||
The `merge_consecutive_ordered_lists()` function at line 674 only merges **consecutive** ordered lists. But the structure has:
|
||||
```
|
||||
ordered list (1 item)
|
||||
unordered list (bullets)
|
||||
ordered list (1 item) ← NOT consecutive, won't merge
|
||||
unordered list (bullets)
|
||||
```
|
||||
|
||||
### Expected Behavior (per user request)
|
||||
For numbered items with bold titles followed by bullet sub-content:
|
||||
|
||||
```
|
||||
1. **Bold Title** → core/paragraph with "1. <strong>Bold Title</strong>"
|
||||
- bullet item → core/list (unordered)
|
||||
- bullet item
|
||||
|
||||
2. **Next Title** → core/paragraph with "2. <strong>Next Title</strong>"
|
||||
- more bullets → core/list (unordered)
|
||||
```
|
||||
|
||||
This structure:
|
||||
- Prevents the "1. 1. 1." numbering issue
|
||||
- Creates logical grouping
|
||||
- Maintains proper section hierarchy
|
||||
|
||||
### Recommended Fix
|
||||
|
||||
**Option A:** Detect pattern `^\d+\.\s+\*\*(.+)\*\*$` (numbered + bold) and treat as paragraph:
|
||||
|
||||
```php
|
||||
// Handle numbered items with bold title (treat as paragraph, not list)
|
||||
if ( preg_match( '/^(\d+)\.\s+\*\*(.+)\*\*\s*$/', $trimmed, $matches ) ) {
|
||||
// Create paragraph with manual numbering
|
||||
$content = $matches[1] . '. <strong>' . self::parse_inline_markdown( $matches[2] ) . '</strong>';
|
||||
$blocks[] = self::create_paragraph_block( $content );
|
||||
continue;
|
||||
}
|
||||
```
|
||||
|
||||
**Option B:** Pre-process markdown to normalize this pattern before parsing.
|
||||
|
||||
---
|
||||
|
||||
## Defect #4: Image Blocks Missing `data-agent-image-id` Attribute
|
||||
|
||||
### Symptom
|
||||
Generated image blocks have no way to:
|
||||
1. Confirm agent assigned an image ID
|
||||
2. View the recommended prompt/alt text
|
||||
3. Trigger image generation modal
|
||||
4. Connect to backend image recommendations
|
||||
|
||||
### Root Cause Analysis
|
||||
|
||||
**File:** `@/Users/dwindown/Local Sites/bricks/app/public/wp-content/plugins/wp-agentic-writer/includes/class-markdown-parser.php:644-664`
|
||||
|
||||
```php
|
||||
private static function create_image_placeholder_block( $description ) {
|
||||
$alt = trim( $description );
|
||||
$attrs = array(
|
||||
'id' => 0,
|
||||
'url' => '',
|
||||
'alt' => $alt,
|
||||
'caption' => '',
|
||||
'sizeSlug' => 'large',
|
||||
'linkDestination' => 'none',
|
||||
);
|
||||
// ❌ MISSING: 'data-agent-image-id' => 'img_xxx'
|
||||
```
|
||||
|
||||
**The `data-agent-image-id` attribute is documented in:**
|
||||
- `IMAGE_GENERATION_IMPLEMENTATION_PLAN.md`
|
||||
- `IMAGE_GENERATION_README.md`
|
||||
- `image-gen-flow.md`
|
||||
- `image-modal.js` (expects this attribute)
|
||||
|
||||
**But NEVER implemented in the actual code!**
|
||||
|
||||
### Missing Integration Points
|
||||
|
||||
1. **Markdown Parser:** Must generate unique `agent_image_id` and add to block attrs
|
||||
2. **Backend Storage:** Must save recommendations with matching IDs to `wp_wpaw_images` table
|
||||
3. **Block Toolbar:** Must add "Generate Image" button for image blocks with this attribute
|
||||
4. **Modal Trigger:** Must open image modal after article generation or from toolbar
|
||||
|
||||
### Recommended Fix
|
||||
|
||||
**Step 1:** Update `create_image_placeholder_block()`:
|
||||
|
||||
```php
|
||||
private static function create_image_placeholder_block( $description, $image_index = 0 ) {
|
||||
$alt = trim( $description );
|
||||
$agent_image_id = 'img_' . uniqid(); // Or use index-based ID
|
||||
|
||||
$attrs = array(
|
||||
'id' => 0,
|
||||
'url' => '',
|
||||
'alt' => $alt,
|
||||
'caption' => '',
|
||||
'sizeSlug' => 'large',
|
||||
'linkDestination' => 'none',
|
||||
'data-agent-image-id' => $agent_image_id,
|
||||
);
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2:** Track and return image IDs during article generation
|
||||
|
||||
**Step 3:** Register toolbar button for image blocks (see below)
|
||||
|
||||
---
|
||||
|
||||
## Missing Integration #1: Image Block Toolbar Button
|
||||
|
||||
### Current State
|
||||
No "Generate Image" button exists in image block toolbar.
|
||||
|
||||
### Required Implementation
|
||||
|
||||
**File to create:** Extend `block-refine.js` or create new `block-image-generate.js`
|
||||
|
||||
```javascript
|
||||
// Add toolbar button to core/image blocks with data-agent-image-id
|
||||
const withImageGenerateToolbar = createHigherOrderComponent((BlockEdit) => {
|
||||
return (props) => {
|
||||
const { clientId } = props;
|
||||
const block = useSelect(
|
||||
(select) => select('core/block-editor').getBlock(clientId),
|
||||
[clientId]
|
||||
);
|
||||
|
||||
if (!block || block.name !== 'core/image') {
|
||||
return wp.element.createElement(BlockEdit, props);
|
||||
}
|
||||
|
||||
const agentImageId = block.attributes['data-agent-image-id'];
|
||||
if (!agentImageId) {
|
||||
return wp.element.createElement(BlockEdit, props);
|
||||
}
|
||||
|
||||
const openImageModal = () => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('wpaw:open-image-modal', {
|
||||
detail: { agentImageId, blockId: clientId }
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return wp.element.createElement(
|
||||
wp.element.Fragment,
|
||||
null,
|
||||
wp.element.createElement(BlockEdit, props),
|
||||
wp.element.createElement(
|
||||
BlockControls,
|
||||
null,
|
||||
wp.element.createElement(
|
||||
ToolbarGroup,
|
||||
null,
|
||||
wp.element.createElement(ToolbarButton, {
|
||||
icon: 'format-image',
|
||||
label: 'Generate AI Image',
|
||||
onClick: openImageModal,
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
}, 'withImageGenerateToolbar');
|
||||
|
||||
addFilter(
|
||||
'editor.BlockEdit',
|
||||
'wp-agentic-writer/image-generate-toolbar',
|
||||
withImageGenerateToolbar
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Missing Integration #2: Image Modal Trigger After Article Generation
|
||||
|
||||
### Current State
|
||||
`image-modal.js` component exists but is never rendered/triggered.
|
||||
|
||||
### Required Implementation
|
||||
|
||||
**In `sidebar.js`, after article execution completes:**
|
||||
|
||||
```javascript
|
||||
// After all sections are written and blocks inserted:
|
||||
const checkForImagePlaceholders = () => {
|
||||
const blocks = wp.data.select('core/block-editor').getBlocks();
|
||||
const imagePlaceholders = blocks.filter(
|
||||
block => block.name === 'core/image' &&
|
||||
block.attributes['data-agent-image-id']
|
||||
);
|
||||
|
||||
if (imagePlaceholders.length > 0) {
|
||||
// Open image review modal
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('wpaw:open-image-review-modal', {
|
||||
detail: {
|
||||
postId: postId,
|
||||
imageCount: imagePlaceholders.length
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
**In `image-modal.js`, listen for event:**
|
||||
|
||||
```javascript
|
||||
useEffect(() => {
|
||||
const handleOpenModal = (event) => {
|
||||
setPostId(event.detail.postId);
|
||||
setIsOpen(true);
|
||||
loadRecommendations(event.detail.postId);
|
||||
};
|
||||
|
||||
window.addEventListener('wpaw:open-image-review-modal', handleOpenModal);
|
||||
return () => window.removeEventListener('wpaw:open-image-review-modal', handleOpenModal);
|
||||
}, []);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Missing Integration #3: Backend Image ID Generation
|
||||
|
||||
### Current State
|
||||
`[IMAGE: description]` placeholders are converted to blocks, but:
|
||||
- No unique ID generated
|
||||
- No storage in `wp_wpaw_images` table during article generation
|
||||
- No link between block and database record
|
||||
|
||||
### Required Implementation
|
||||
|
||||
**During article generation in `class-gutenberg-sidebar.php`:**
|
||||
|
||||
1. Parse `[IMAGE: ...]` placeholders before block conversion
|
||||
2. Generate unique `agent_image_id` for each
|
||||
3. Store in `wp_wpaw_images` table with post_id, prompt, alt_text
|
||||
4. Pass image IDs to markdown parser for block attribute injection
|
||||
|
||||
```php
|
||||
// In handle_generate_article or handle_execute_plan:
|
||||
$image_placeholders = [];
|
||||
preg_match_all('/\[IMAGE:\s*(.+?)\]/i', $markdown_content, $matches);
|
||||
|
||||
foreach ($matches[1] as $index => $description) {
|
||||
$agent_image_id = 'img_' . $post_id . '_' . ($index + 1);
|
||||
$image_placeholders[] = [
|
||||
'agent_image_id' => $agent_image_id,
|
||||
'description' => $description,
|
||||
];
|
||||
|
||||
// Save to database
|
||||
$image_manager = WP_Agentic_Writer_Image_Manager::get_instance();
|
||||
// ... save recommendation
|
||||
}
|
||||
|
||||
// Convert markdown with image IDs
|
||||
$blocks = WP_Agentic_Writer_Markdown_Parser::to_blocks($markdown_content, $image_placeholders);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Priority Matrix
|
||||
|
||||
| Defect | Severity | Impact | Fix Effort |
|
||||
|--------|----------|--------|------------|
|
||||
| #1 - Create Outline timing | **High** | Blocks main workflow | Low |
|
||||
| #2 - Clarity check | **High** | Poor content quality | Depends on #1 |
|
||||
| #3 - Numbered list | **Medium** | Visual formatting | Medium |
|
||||
| #4 - Image IDs missing | **Critical** | Image feature broken | Medium |
|
||||
| Toolbar button | **Critical** | No way to trigger images | Medium |
|
||||
| Modal trigger | **Critical** | No user-facing image feature | Medium |
|
||||
| Backend ID generation | **Critical** | No data persistence | Medium |
|
||||
|
||||
---
|
||||
|
||||
## Recommended Fix Order
|
||||
|
||||
1. **Defect #1** - Fix timing issue (enables #2)
|
||||
2. **Defect #4 + Backend ID generation** - Core image functionality
|
||||
3. **Toolbar button** - User can trigger image generation
|
||||
4. **Modal trigger** - Automatic flow after article generation
|
||||
5. **Defect #3** - Formatting improvement (lower priority)
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist After Fixes
|
||||
|
||||
- [ ] Click "Create Outline Now" → Clarity quiz appears (if needed)
|
||||
- [ ] Click "Create Outline Now" → Plan generated automatically
|
||||
- [ ] Cost tracking shows `clarity_check` action
|
||||
- [ ] Numbered + bold items render as paragraphs with manual numbering
|
||||
- [ ] Image blocks have `data-agent-image-id` attribute in inspector
|
||||
- [ ] Image blocks show "Generate AI Image" in toolbar
|
||||
- [ ] After article generation, image modal opens automatically
|
||||
- [ ] Can generate variants for each image placeholder
|
||||
- [ ] Can select and commit variant to Media Library
|
||||
- [ ] Block updates with real image after commit
|
||||
|
||||
---
|
||||
|
||||
**Report Status:** Complete
|
||||
**Next Steps:** Implement fixes in priority order
|
||||
Reference in New Issue
Block a user