wp-agentic-writer/FRONTEND_IMPLEMENTATION.md

Frontend Implementation Guide

This document outlines all frontend changes needed to complete the agentic context implementation.

---

Summary of Required Changes

Phase 1.2 & 1.3: Writing Mode UX

• Add empty state check and UI
• Add warning for notes in Writing mode
• Add CSS for empty state

Phase 2.4 & 2.5: Agentic Features

• Add summarization function
• Add intent detection function
• Add contextual action cards
• Add CSS for contextual actions

Phase 3: UX Enhancements

• Add context indicator
• Add /reset command
• Add context mode settings (backend)

---

Implementation Status

✅ Backend Complete:

• Chat history sent to all endpoints
• /summarize-context endpoint added
• /detect-intent endpoint added
• Cost tracking supports new operations

⏳ Frontend Pending:

• Writing mode empty state
• Writing mode notes warning
• Summarization logic
• Intent detection logic
• Context indicator
• /reset command
• Context mode settings

---

Code Locations

sidebar.js Key Functions to Add/Modify:

1. shouldShowWritingEmptyState() - NEW
2. renderWritingEmptyState() - NEW
3. handleExecuteArticle() - MODIFY (add plan check)
4. handleSendMessage() - MODIFY (add writing mode warning)
5. summarizeChatHistory() - NEW
6. detectUserIntent() - NEW
7. renderContextualAction() - NEW
8. renderContextIndicator() - NEW
9. handleResetCommand() - NEW

sidebar.css Additions:

1. .wpaw-writing-empty-state styles
2. .wpaw-contextual-action styles
3. .wpaw-context-indicator styles

---

Next Steps

1. Implement Writing mode empty state (Phase 1.2)
2. Implement Writing mode notes warning (Phase 1.3)
3. Implement summarization (Phase 2.4)
4. Implement intent detection (Phase 2.5)
5. Implement context indicator (Phase 3.1)
6. Implement /reset command (Phase 3.2)
7. Implement context settings (Phase 3.3)

---

Current Focus: Implementing all frontend changes systematically