`
+
+### 2. Variable Extraction Timing in `handleWelcomeStart`
+- **Legacy:** `const keyword` extracted inside the `if` block
+- **Refactored:** `const keyword` extracted before the `if` check
+
+### 3. File Length Difference
+- **Legacy:** 12,347 lines
+- **Refactored:** 11,773 lines
+- **Difference:** ~574 lines (JSX is more concise than `createElement`)
+
+---
+
+## ✅ Verified Identical Functions
+
+The following functions appear to be identical between both versions:
+
+- `renderRefineAllConfirmModal` (L6389-6432)
+- `renderWelcomeScreen` (L9005-9182)
+- `renderChatTab` (L11586-12018)
+- `renderFocusKeywordBar` (L9254-9458)
+- `renderMessages` (L9997-10913)
+- `handleFocusKeywordChange` (L1072-1078)
+- `renderConfigTab` (L10918-11433)
+- `renderGlobalStatusBar` (L11449-11583)
+- `renderCostTab` (L12058-12304)
+- All state initialization hooks
+- All ref declarations (`useRef` patterns)
+- API endpoint calls and response handling
+
+---
+
+## Recommendations
+
+### Option A: Fix Refactored Version (Recommended)
+Revert `handleWelcomeStart` to match legacy behavior and remove the `startNewConversation` call:
+
+```javascript
+const handleWelcomeStart = () => {
+ if (welcomeKeywordInput.trim()) {
+ const keyword = welcomeKeywordInput.trim();
+ handleFocusKeywordChange(keyword);
+ }
+ setAgentMode(welcomeStartMode);
+ setShowWelcome(false);
+ setTimeout(() => {
+ if (inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, 100);
+};
+```
+
+### Option B: Update Both Files
+If the new behavior (calling `startNewConversation` on welcome start) is intentional, update the legacy `sidebar.js` to match:
+
+1. Make `handleWelcomeStart` async and call `startNewConversation`
+2. Update `startNewConversation` to accept options
+3. Add `setSelectedFocusKeyword` call
+
+---
+
+## Files
+
+| File | Path |
+|------|------|
+| Legacy | `/Users/dwindown/Local Sites/bricks/app/public/wp-content/plugins/wp-agentic-writer/assets/js/sidebar.js` |
+| Refactored | `/Users/dwindown/Local Sites/bricks/app/public/wp-content/plugins/wp-agentic-writer/assets/js/src/index.jsx` |
+| Dist (correct behavior) | `/Users/dwindown/Local Sites/bricks/app/public/wp-content/plugins/wp-agentic-writer/assets/js/dist/sidebar.js` |
+
+---
+
+## Appendix: Diff Summary
+
+```
+handleWelcomeStart:
+- Legacy: synchronous, no API call, focuses input
+- Refactored: async, calls startNewConversation(), no focus
+
+startNewConversation:
+- Legacy: no parameters, hardcoded mode="chat"
+- Refactored: options parameter, dynamic mode and focusKeyword
+```
+
+---
+
+*Generated by Zed Agent during code review*
diff --git a/SIDEBAR_1_TO_1_REAL_MIGRATION_TASKLIST.md b/SIDEBAR_1_TO_1_REAL_MIGRATION_TASKLIST.md
new file mode 100644
index 0000000..1a497e5
--- /dev/null
+++ b/SIDEBAR_1_TO_1_REAL_MIGRATION_TASKLIST.md
@@ -0,0 +1,152 @@
+# WP Agentic Writer Sidebar 1:1 Real Migration Tasklist
+
+**Source of truth:** `assets/js/sidebar.js`
+**Audit ledger:** `SIDEBAR_1_TO_1_TASKLIST.md`
+**Migration plan:** `SIDEBAR_1_TO_1_MIGRATION.md`
+**Migration target:** `assets/js/src/index.jsx`
+
+This tasklist tracks real implementation progress only. Do not check an item because the behavior exists in `sidebar.js`; check it only after the migrated target, build pipeline, or runtime has actually been implemented and verified.
+
+## Current Status
+
+- [x] Preserve `SIDEBAR_1_TO_1_TASKLIST.md` as the Phase 0-14 parity/audit ledger.
+- [x] Create monolithic migration target at `assets/js/src/index.jsx`.
+- [x] Convert all `wp.element.createElement` / `React.createElement` render calls in the monolith to JSX.
+- [x] Complete Phase A manual JSX conversion verification.
+- [x] Preserve intentional `document.createElement("div")` DOM usage.
+- [x] Verify migrated JSX parses with `tsc --allowJs --checkJs false --jsx preserve --noEmit`.
+- [x] Verify migrated JSX still contains all 226 class inventory tokens.
+- [x] Verify endpoint inventory remains present after JSX conversion.
+- [x] Verify Gutenberg/browser side-effect inventory remains present after JSX conversion.
+- [x] Verify final plugin registration still renders `ConnectedSidebar`.
+- [x] Build pipeline is created and verified.
+- [x] Runtime parity smoke is complete with accepted exception for source-unreachable writing empty-state branch.
+- [x] Enqueue switch has been made to migrated built output.
+- [x] No extraction has been performed.
+
+## Real Migration Rules
+
+- [x] Keep `assets/js/sidebar.js` untouched as the source of truth.
+- [x] Keep `assets/js/src/index.jsx` as the monolithic migration target.
+- [x] Do not switch WordPress enqueue to migrated output until compiled output is verified.
+- [x] Do not extract helper files until monolith runtime parity is proven.
+- [x] Do not rename functions, state variables, refs, class names, endpoint strings, storage keys, or event names.
+- [x] Do not simplify JSX conditions, children order, callbacks, object shapes, SVG strings, or `dangerouslySetInnerHTML`.
+- [x] Record every real migration step here immediately after it is done.
+
+## Phase A - JSX Conversion Verification
+
+- [x] Convert plugin icon from `wp.element.createElement("img")` to JSX.
+- [x] Convert render surfaces from `wp.element.createElement` to JSX.
+- [x] Convert final main return tree to JSX.
+- [x] Preserve `RawHTML` usage as JSX component usage.
+- [x] Preserve WordPress components: `PluginSidebarMoreMenuItem`, `PluginSidebar`, `Panel`, `TextareaControl`, `TextControl`, `CheckboxControl`, and `Button`.
+- [x] Preserve dynamic class expressions.
+- [x] Preserve `dangerouslySetInnerHTML` SVG/html strings.
+- [x] Preserve stream/helper/runtime code outside render conversion.
+- [x] Manually audit converted JSX comments and expression containers for parser-safe, behavior-neutral output.
+- [x] Manually audit `renderRefineAllConfirmModal` against source lines 6389-6455 after full conversion.
+- [x] Manually audit `renderClarification` against source lines 8477-8829.
+- [x] Manually audit conversation session actions against source lines 8830-9004.
+- [x] Fix JSX spread-child artifact in older session list: `...availableSessions.slice(1).map(...)` is now `{availableSessions.slice(1).map(...)}`.
+- [x] Manually audit `renderWelcomeScreen` against source lines 9005-9184.
+- [x] Manually audit `renderWritingEmptyState` against source lines 9185-9253.
+- [x] Manually audit `renderFocusKeywordBar` against source lines 9254-9459.
+- [x] Manually audit `renderAgentWorkspaceCard` against source lines 9460-9629.
+- [x] Manually audit `renderContextualAction` against source lines 9633-9996.
+- [x] Manually audit `renderMessages` against source lines 9997-10917.
+- [x] Manually audit `renderConfigTab` against source lines 10918-11434.
+- [x] Manually audit `renderGlobalStatusBar` against source lines 11449-11585.
+- [x] Manually audit `renderChatTab` against source lines 11586-12020.
+- [x] Manually audit `renderCostTab` against source lines 12058-12306.
+- [x] Manually audit main component return tree against source lines 12307-12346.
+
+## Phase B - Build Pipeline
+
+- [x] Audit current PHP enqueue path and dependencies before creating a build pipeline.
+- [x] Decide the minimal build tool needed for `assets/js/src/index.jsx`: TypeScript CLI only, no React scaffold, no bundler.
+- [x] Ensure JSX compiles to the same element factory expected by WordPress: `wp.element.createElement`.
+- [x] Ensure generated output keeps WordPress globals and does not introduce new runtime globals unless explicitly required.
+- [x] Add only the minimal package/build files needed for the monolith: `tsconfig.sidebar.json`.
+- [x] Generate a built file without changing the active enqueue.
+- [x] Verify built output contains expected plugin registration and no missing dependencies.
+- [x] Verify built output has no syntax errors.
+- [x] Record build command and output file path: `tsc -p tsconfig.sidebar.json` -> `assets/js/dist/sidebar.js`.
+
+## Phase C - Runtime Parity Smoke
+
+- [x] Load Gutenberg editor with the existing `assets/js/sidebar.js` runtime as baseline.
+- [x] Load migrated built output without changing behavior.
+- [x] Verify baseline CDP smoke loads post `684`, registers `wp-agentic-writer`, opens `wp-agentic-writer/wp-agentic-writer`, and has no captured console errors.
+- [x] Verify migrated CDP smoke serves `assets/js/dist/sidebar.js` through request interception without changing PHP enqueue; `interceptedMigratedDist: true`, SHA-256 `9685574363e7489935528340c071fbf0c32f6c85236d735b56d54050ca57a952`.
+- [x] Confirm sidebar menu item appears with the same icon and label.
+- [x] Verify baseline and migrated runtime plugin icon props: `alt: WP Agentic Writer`, `width: 20px`, `height: 20px`, `assets/img/icon.svg`.
+- [x] Verify baseline and migrated Gutenberg options menu contains `WP Agentic Writer` under Panels.
+- [x] Confirm sidebar panel title/icon renders.
+- [x] Verify baseline and migrated sidebar title images include `alt: WP Agentic Writer`, `width: 24px`, `height: 24px`, `assets/img/icon.svg`.
+- [x] Confirm status bar buttons render and preserve active states.
+- [x] Confirm chat tab renders welcome, workspace, messages, command input, mentions, slash menu, and modal branches; empty-state is accepted as source-unreachable through normal runtime.
+- [x] Verify chat existing-session surface in baseline and migrated runtime: workspace card, messages list, command area, command input, and active Chat status button.
+- [x] Verify welcome/session surface in baseline and migrated runtime: Sessions status button, welcome prompt, continue session, explore/start outline/start writing actions.
+- [x] Accept chat empty-state branch as source-unreachable through normal runtime.
+- [x] Empty-state exception recorded: source guard requires `agentMode === "writing"`, no `currentPlanRef.current`, and zero editor blocks. Source tracing shows empty hydration resets to `chat`, plan hydration sets `planning`, welcome/start UI sets only `chat` or `planning`, and the only natural `writing` path is `executePlanFromCard`, which requires `currentPlanRef.current`; existing empty post `593` also hydrates an older conversation/plan, so no clean natural runtime fixture was available without mutating DB/session state or instrumenting React state.
+- [x] Verify mention autocomplete branch.
+- [x] Verify baseline and migrated mention autocomplete: takeover enabled input, `.wpaw-mention-autocomplete` rendered, 61 `.wpaw-mention-option` entries including `@this`, `@previous`, `@next`, `@all`, `@title`, and block targets.
+- [x] Verify slash menu branch.
+- [x] Verify baseline and migrated slash menu: textarea accepted `/`, `.wpaw-mention-autocomplete` rendered, 4 slash command options including `add below`, `add above`, `append code block`, and `reformat`.
+- [x] Verify refine-all confirmation modal branch.
+- [x] Verify baseline and migrated refine-all confirmation modal: `@all` request on post `684` resolved 35 text blocks, `.wpaw-refine-confirm-overlay` rendered `Confirm @all Refinement`, block-count body text, checkbox, `Cancel`, and `Continue`; `Cancel` closed the overlay; no console errors; no message-persist request fired before page close.
+- [x] Confirm config tab renders every control and SEO section.
+- [x] Confirm cost tab renders cards, budget status, action summary, history, and settings link.
+- [x] Confirm no console syntax/runtime errors from migrated output.
+- [x] Confirm no endpoint URL, method, header, body shape, stream handling, or error handling changed.
+- [x] Verify static source/dist request inventory: 33 endpoint strings, 44 `fetch(` tokens, 2 `XMLHttpRequest`, 2 `xhr.open`, 40 nonce header values, 29 JSON content-type headers, 29 JSON body serializations, 8 GET, 28 POST, 2 DELETE, 9 stream readers/decoders, 23 thrown errors, 16 abort-error checks, and 28 `wpawLog.error` calls.
+- [x] Confirm editor locks, localStorage keys, beforeunload handlers, global listeners, abort handling, and stream reader lifecycle still work.
+- [x] Verify runtime session-lock branch in baseline and migrated smoke: session lock banner renders, takeover enables disabled command input.
+- [x] Verify static source/dist lifecycle inventory: session lock endpoints, `tab_id`, forced takeover, heartbeat functions, `keepalive`, localStorage calls, beforeunload add/remove pairs, `wpaw:insert-mention` listener, abort/cancel calls, and stream reader assignments/read loops all match.
+
+## Phase D - Enqueue Switch
+
+- [x] Switch enqueue only after Phase A, Phase B, and Phase C are complete, with the recorded source-unreachable empty-state exception accepted.
+- [x] Keep rollback path to original `assets/js/sidebar.js`.
+- [x] Verify WordPress dependency handles match the migrated output: built globals `wp.blocks`, `wp.components`, `wp.data`, `wp.editPost`, `wp.element`, and `wp.plugins` map to enqueued handles `wp-blocks`, `wp-components`, `wp-data`, `wp-edit-post`, `wp-element`, and `wp-plugins`; no missing handles.
+- [x] Verify plugin loads in Gutenberg after enqueue switch: real enqueue loaded `assets/js/dist/sidebar.js` once, did not load `assets/js/sidebar.js`, registered `wp-agentic-writer`, opened `wp-agentic-writer/wp-agentic-writer`, rendered sidebar menu/title/icon, status buttons, chat/config/cost/sessions surfaces, and had no captured console errors.
+- [x] Verify `ConnectedSidebar` still receives `postId`: real enqueue smoke on post `684` triggered post-specific REST calls including `/post-config/684`, `/cost-tracking/684`, `/writing-state/684`, `/section-blocks/684`, and `/conversations/post/684`.
+- [x] Verify no duplicate sidebar/plugin registration occurs: real enqueue smoke found one `assets/js/dist/sidebar.js` resource, zero `assets/js/sidebar.js` resources, and `pluginNameCount: 1` for `wp-agentic-writer`.
+
+## Phase E - Post-Switch Cleanup
+
+- [x] Keep `assets/js/sidebar.js` until migrated runtime is proven stable.
+- [x] Do not delete the monolith source target.
+- [x] Do not extract helpers until extraction has a separate source-range task.
+- [ ] Commit only the real migration files intended for this step.
+
+## Post-Switch User Test Fixes
+
+- [x] Fix REST fatals from extracted controllers calling sidebar helper methods that were still private: exposed controller-used helper methods on `WP_Agentic_Writer_Gutenberg_Sidebar`.
+- [x] Fix `/generate-plan` fatal from missing `WPAW_Rate_Limiter`: load `includes/class-rate-limiter.php` from the main plugin bootstrap.
+- [x] Fix `/post-new.php` session carry-over: migrated history loader now does not auto-hydrate any session when `postId` is `0`, and the fallback only treats `post_id === 0` as unassigned.
+- [x] Restore welcome Start Writing 1:1 behavior: `handleWelcomeStart` is synchronous, does not call `startNewConversation`, sets the selected mode, hides welcome, and focuses the input like `assets/js/sidebar.js`.
+- [x] Fix start-new-session 500: `WP_Agentic_Writer_Conversation_Manager::generate_session_id()` now returns 32-character hex IDs that fit the existing `session_id VARCHAR(32)` table column and the REST route regex.
+- [x] Fix blank chat response with local/9router streaming: local backend stream parser now accepts `choices[0].message.content`, text-completion, Ollama-style, and simple content/response payloads in addition to `choices[0].delta.content`.
+- [x] Fix local/9router stream-empty edge case: when streaming returns HTTP 200 but no extractable content, `chat_stream()` now falls back to non-streaming `chat()` and emits that response as a single assistant message.
+- [x] Restore `/chat` source-of-truth backend path: `handle_chat_request()` and `stream_chat_request()` now run inside `WP_Agentic_Writer_Gutenberg_Sidebar` again instead of delegating to the extracted chat controller.
+- [x] Verify restored `/chat` route-level streaming smoke on post `717` emits `conversational_stream`, final `conversational`, and `complete`, and stores both user and assistant messages.
+- [x] Verify restored `/chat` route-level streaming smoke on post `717` with the saved `_wpaw_post_config` and `web_search` enabled also emits assistant content and stores both user and assistant messages.
+- [x] Fix silent empty provider completion on the active restored `/chat` path: local backend retries once when the non-streaming fallback returns empty content, and the active in-class stream handler emits an error instead of completing silently if content is still empty.
+- [x] Verify post `719` browser-equivalent route smoke with saved `_wpaw_post_config` and `web_search` enabled stores both user and assistant messages after the retry/empty guard patch.
+- [x] Fix Zed refactor defect report: reverted migrated `handleWelcomeStart` and `startNewConversation` signatures/side effects to match `assets/js/sidebar.js`, then rebuilt `assets/js/dist/sidebar.js`.
+- [x] Restore Sessions tab listing on `/post-new.php`: prior sessions are listed for manual navigation while the history loader still prevents automatic continuation.
+- [x] Rebuild migrated output with `tsc -p tsconfig.sidebar.json`.
+- [x] Verify PHP syntax for changed bootstrap/sidebar/controller files.
+- [x] Verify migrated `assets/js/dist/sidebar.js` syntax with `node --check`.
+- [x] Verify REST smoke checks: `post-config/684` GET `200`, `post-config/684` update `200`, `check-clarity` JSON request `200` with no AI call, and `generate-plan` empty-topic JSON request returns expected `400 no_topic` instead of a PHP fatal.
+- [ ] Re-run authenticated `/wp-admin/post-new.php` browser probe after browser auth is available; current headless probe is blocked at `wp-login.php?reauth=1` because generated WP auth cookies are rejected by the web server even though they validate in WP CLI.
+
+## Optional Phase F - Extraction Later
+
+- [ ] Extract only one helper group at a time.
+- [ ] Record source range and destination file before extraction.
+- [ ] Move code without renaming public/internal symbols.
+- [ ] Re-run the same parity checks for the moved range.
+- [ ] Do not delete the monolith source range until the moved range is checked line-by-line.
diff --git a/SIDEBAR_1_TO_1_TASKLIST.md b/SIDEBAR_1_TO_1_TASKLIST.md
index ecdd64c..a7db3b6 100644
--- a/SIDEBAR_1_TO_1_TASKLIST.md
+++ b/SIDEBAR_1_TO_1_TASKLIST.md
@@ -2,11 +2,17 @@
**Source task plan:** `SIDEBAR_1_TO_1_MIGRATION.md`
**Source of truth:** `assets/js/sidebar.js`
-**Mode:** planning/tasklist only. No implementation code, no build step, no inferred behavior.
+**Mode:** active 1:1 migration. No build step, no inferred behavior.
Use this tasklist to execute the migration described in `SIDEBAR_1_TO_1_MIGRATION.md`. Every checkbox must be completed against `assets/js/sidebar.js`, not memory.
-**Current status:** planning docs are in place and the abandoned React rebuild scaffold has been removed from `assets/js`. No build was run, no enqueue switch was made, and implementation now needs to restart from the migration plan rather than from a preexisting React target.
+**Current status:** Real 1:1 monolith migration is complete in `assets/js/src/index.jsx` for mechanical `wp.element.createElement` to JSX conversion. The migrated file parses with `tsc --allowJs --checkJs false --jsx preserve --noEmit`, class inventory still verifies 226 tokens, endpoint and Gutenberg/browser side-effect inventories remain present, and only intentional `document.createElement` DOM usage remains. No build was run, no enqueue switch was made, and no extraction was performed.
+
+**Implementation tracker:** Continue real migration work in `SIDEBAR_1_TO_1_REAL_MIGRATION_TASKLIST.md`. This document remains the Phase 0-14 parity/audit ledger.
+
+**Readiness statement:** Phase 0 through Phase 14 have been checked twice against the current `assets/js/sidebar.js` source of truth and are considered complete for monolith parity. Optional Phase 15 is intentionally excluded because extraction must wait until after the 1:1 monolith migration. Do not re-open uncertainty about Phase 0-14 unless `assets/js/sidebar.js`, `SIDEBAR_1_TO_1_MIGRATION.md`, or `assets/js/src/index.jsx` changes. The project is ready to start the actual 1:1 migration work: mechanical `createElement` to JSX conversion inside the monolith, with no behavior changes.
+
+**Active conversion rule:** During JSX conversion, each completed range must be recorded below with its original source line range. The global `createElement` definition-of-done item is checked only after every `wp.element.createElement` render call in the monolith has been converted and verified.
## Ground Rules
@@ -17,19 +23,19 @@ Use this tasklist to execute the migration described in `SIDEBAR_1_TO_1_MIGRATIO
- [x] Do not extract helper files during the first migration pass.
- [x] Do not change visible text, labels, placeholders, icons, SVG markup, classes, inline styles, aria attributes, roles, or conditional render gates.
- [x] Do not replace `RawHTML`, markdown logic, stream handling, abort handling, localStorage keys, endpoint paths, request bodies, or Gutenberg APIs.
-- [ ] Keep the first target as a monolithic JSX port.
+- [x] Keep the first target as a monolithic JSX port.
## Definition of Done for Each Range
-- [ ] Source range is copied or represented completely.
-- [ ] `createElement` conversion keeps the same tag/component.
-- [ ] Props are preserved 1:1.
-- [ ] Children order is preserved 1:1.
-- [ ] Conditional gates are preserved in the same branch position.
-- [ ] State/ref/effect ordering is preserved.
-- [ ] Callback boundaries and dependency arrays are preserved.
-- [ ] Inline styles, string literals, titles, placeholders, labels, and SVG strings are preserved.
-- [ ] Any migrated range is checked against the original source lines before moving on.
+- [x] Source range is copied or represented completely.
+- [x] `createElement` conversion keeps the same tag/component.
+- [x] Props are preserved 1:1.
+- [x] Children order is preserved 1:1.
+- [x] Conditional gates are preserved in the same branch position.
+- [x] State/ref/effect ordering is preserved.
+- [x] Callback boundaries and dependency arrays are preserved.
+- [x] Inline styles, string literals, titles, placeholders, labels, and SVG strings are preserved.
+- [x] Any migrated range is checked against the original source lines before moving on.
## Phase 0 - Source Lock and Boundaries
@@ -45,236 +51,241 @@ Use this tasklist to execute the migration described in `SIDEBAR_1_TO_1_MIGRATIO
## Phase 1 - Monolith Skeleton
-- [ ] Create the migrated target as one monolithic sidebar component.
-- [ ] Map every WordPress dependency from lines 8-15.
-- [ ] Preserve `pluginIcon` behavior from lines 31-35.
-- [ ] Preserve component prop shape: `AgenticWriterSidebar = ({ postId })`.
-- [ ] Preserve `mapSelectToProps` behavior from lines 12349-12352.
-- [ ] Preserve `ConnectedSidebar` behavior from lines 12355-12356.
-- [ ] Preserve `registerPlugin("wp-agentic-writer")` behavior from lines 12358-12362.
-- [ ] Do not split files yet.
+- [x] Create the migrated target as one monolithic sidebar component.
+- [x] Map every WordPress dependency from lines 8-15.
+- [x] Preserve `pluginIcon` behavior from lines 31-35.
+- [x] Preserve component prop shape: `AgenticWriterSidebar = ({ postId })`.
+- [x] Preserve `mapSelectToProps` behavior from lines 12349-12352.
+- [x] Preserve `ConnectedSidebar` behavior from lines 12355-12356.
+- [x] Preserve `registerPlugin("wp-agentic-writer")` behavior from lines 12358-12362.
+- [x] Do not split files yet.
## Phase 2 - State, Refs, and Constants
-- [ ] Migrate settings and error formatting: lines 40-138.
-- [ ] Migrate chat/top-level state: lines 139-149.
-- [ ] Migrate session lock state and refs: lines 152-160.
-- [ ] Migrate config defaults, config state, and config refs: lines 163-188.
-- [ ] Migrate cost/provider state and provider metadata helper: lines 191-223.
-- [ ] Migrate editor/refinement lock state and refs: lines 224-237.
-- [ ] Migrate SEO audit state: lines 240-243.
-- [ ] Migrate clarification, pending plan, and request refs: lines 246-268.
-- [ ] Migrate active operation refs/state: lines 269-279.
-- [ ] Migrate writing state: lines 280-289.
-- [ ] Migrate workspace snapshot/collapse state and toggle: lines 290-321.
-- [ ] Migrate mention/slash/input refs and state: lines 323-336.
-- [ ] Migrate focus keyword state and persistence refs: lines 338-347.
-- [ ] Migrate welcome state: lines 349-352.
-- [ ] Migrate undo stack and max size: lines 354-356.
-- [ ] Migrate Memanto restore state/ref: lines 358-366.
-- [ ] Verify state/ref/hook order matches `sidebar.js` exactly.
+- [x] Migrate settings and error formatting: lines 40-138.
+- [x] Migrate chat/top-level state: lines 139-149.
+- [x] Migrate session lock state and refs: lines 152-160.
+- [x] Migrate config defaults, config state, and config refs: lines 163-188.
+- [x] Migrate cost/provider state and provider metadata helper: lines 191-223.
+- [x] Migrate editor/refinement lock state and refs: lines 224-237.
+- [x] Migrate SEO audit state: lines 240-243.
+- [x] Migrate clarification, pending plan, and request refs: lines 246-268.
+- [x] Migrate active operation refs/state: lines 269-279.
+- [x] Migrate writing state: lines 280-289.
+- [x] Migrate workspace snapshot/collapse state and toggle: lines 290-321.
+- [x] Migrate mention/slash/input refs and state: lines 323-336.
+- [x] Migrate focus keyword state and persistence refs: lines 338-347.
+- [x] Migrate welcome state: lines 349-352.
+- [x] Migrate undo stack and max size: lines 354-356.
+- [x] Migrate Memanto restore state/ref: lines 358-366.
+- [x] Verify state/ref/hook order matches `sidebar.js` exactly.
## Phase 3 - Effects, Saving, Timeline, and Editor Locks
-- [ ] Migrate agent mode reset effect: lines 367-371.
-- [ ] Migrate post config load effect: lines 373-400.
-- [ ] Migrate `savePostConfig`: lines 402-448.
-- [ ] Migrate debounced post config effect: lines 449-473.
-- [ ] Migrate cost tracking effect: lines 474-499.
-- [ ] Migrate `normalizeWritingState`: lines 500-510.
-- [ ] Migrate `saveWritingState`: lines 511-539.
-- [ ] Migrate `persistWritingStatePatch`: lines 540-550.
-- [ ] Migrate writing state load effect: lines 551-585.
-- [ ] Migrate scroll refs/effect: lines 586-595.
-- [ ] Migrate timeline regex/status constants and helpers: lines 596-673.
-- [ ] Migrate active operation helpers: lines 674-728.
-- [ ] Migrate refine-all confirmation callbacks: lines 729-752.
-- [ ] Migrate undo snapshot helpers: lines 753-812.
-- [ ] Migrate post saving lock effects: lines 813-841.
-- [ ] Migrate editor input lock and DOM blocker effect: lines 842-981.
-- [ ] Migrate text/config/keyword helpers and welcome start: lines 1020-1194.
+- [x] Migrate agent mode reset effect: lines 367-371.
+- [x] Migrate post config load effect: lines 373-400.
+- [x] Migrate `savePostConfig`: lines 402-448.
+- [x] Migrate debounced post config effect: lines 449-473.
+- [x] Migrate cost tracking effect: lines 474-499.
+- [x] Migrate `normalizeWritingState`: lines 500-510.
+- [x] Migrate `saveWritingState`: lines 511-539.
+- [x] Migrate `persistWritingStatePatch`: lines 540-550.
+- [x] Migrate writing state load effect: lines 551-585.
+- [x] Migrate scroll refs/effect: lines 586-595.
+- [x] Migrate timeline regex/status constants and helpers: lines 596-673.
+- [x] Migrate active operation helpers: lines 674-728.
+- [x] Migrate refine-all confirmation callbacks: lines 729-752.
+- [x] Migrate undo snapshot helpers: lines 753-812.
+- [x] Migrate post saving lock effects: lines 813-841.
+- [x] Migrate editor input lock and DOM blocker effect: lines 842-981.
+- [x] Migrate text/config/keyword helpers and welcome start: lines 1020-1194.
## Phase 4 - SEO, Workspace, Sessions, and Locks
-- [ ] Migrate `runSeoAudit`: lines 1195-1269.
-- [ ] Migrate SEO fix instruction helpers: lines 1270-1348.
-- [ ] Migrate `handleSeoAuditFix`: lines 1349-1459.
-- [ ] Migrate `generateMetaDescription`: lines 1460-1563.
-- [ ] Migrate block preview helpers: lines 1564-1599.
-- [ ] Migrate workspace snapshot helper/effects: lines 1600-1668.
-- [ ] Migrate beforeunload/session restore effects: lines 1669-1716.
-- [ ] Migrate session storage sanitizing and hydration: lines 1717-1781.
-- [ ] Migrate session message persistence: lines 1782-1889.
-- [ ] Migrate session lock acquire/release/heartbeat/takeover: lines 1890-2026.
-- [ ] Migrate lock/chat-history/post-session effects: lines 2027-2300.
-- [ ] Migrate `loadPostSessions`: lines 2301-2397.
-- [ ] Migrate `openSessionById`: lines 2398-2515.
+- [x] Migrate `runSeoAudit`: lines 1195-1269.
+- [x] Migrate SEO fix instruction helpers: lines 1270-1348.
+- [x] Migrate `handleSeoAuditFix`: lines 1349-1459.
+- [x] Migrate `generateMetaDescription`: lines 1460-1563.
+- [x] Migrate block preview helpers: lines 1564-1599.
+- [x] Migrate workspace snapshot helper/effects: lines 1600-1668.
+- [x] Migrate beforeunload/session restore effects: lines 1669-1716.
+- [x] Migrate session storage sanitizing and hydration: lines 1717-1781.
+- [x] Migrate session message persistence: lines 1782-1889.
+- [x] Migrate session lock acquire/release/heartbeat/takeover: lines 1890-2026.
+- [x] Migrate lock/chat-history/post-session effects: lines 2027-2300.
+- [x] Migrate `loadPostSessions`: lines 2301-2397.
+- [x] Migrate `openSessionById`: lines 2398-2515.
## Phase 5 - Mentions, Commands, Plans, and Agent Decisions
-- [ ] Migrate stream target and mention token helpers: lines 2516-2569.
-- [ ] Migrate title refinement: lines 2570-2689.
-- [ ] Migrate slash command parsing/options/block index: lines 2690-2758.
-- [ ] Migrate target block resolution and insert refinement block: lines 2759-2870.
-- [ ] Migrate plan streaming: lines 2871-3188.
-- [ ] Migrate retry helpers: lines 3189-3473.
-- [ ] Migrate plan block/preview helpers: lines 3474-3604.
-- [ ] Migrate section block helpers and persistence: lines 3605-3696.
-- [ ] Migrate plan task/target/matching/status/index helpers: lines 3697-3906.
-- [ ] Migrate chat summary, intent detection, context, reset, plan message, keyword suggestion, and runtime helpers: lines 3907-4218.
-- [ ] Migrate plan ID, intent classifier, and action decider: lines 4219-4320.
+- [x] Migrate stream target and mention token helpers: lines 2516-2569.
+- [x] Migrate title refinement: lines 2570-2689.
+- [x] Migrate slash command parsing/options/block index: lines 2690-2758.
+- [x] Migrate target block resolution and insert refinement block: lines 2759-2870.
+- [x] Migrate plan streaming: lines 2871-3188.
+- [x] Migrate retry helpers: lines 3189-3473.
+- [x] Migrate plan block/preview helpers: lines 3474-3604.
+- [x] Migrate section block helpers and persistence: lines 3605-3696.
+- [x] Migrate plan task/target/matching/status/index helpers: lines 3697-3906.
+- [x] Migrate chat summary, intent detection, context, reset, plan message, keyword suggestion, and runtime helpers: lines 3907-4218.
+- [x] Migrate plan ID, intent classifier, and action decider: lines 4219-4320.
## Phase 6 - Execution, Refinement, and Block Context
-- [ ] Migrate `executePlanFromCard`: lines 4321-4768.
-- [ ] Migrate stop execution: lines 4769-4794.
-- [ ] Migrate clear chat context: lines 4795-4870.
-- [ ] Migrate serialized block creation: lines 4871-4953.
-- [ ] Migrate block reformatting: lines 4954-5056.
-- [ ] Migrate plan revision: lines 5057-5142.
-- [ ] Migrate edit plan apply/cancel: lines 5143-5280.
-- [ ] Migrate clarification context effect/helper: lines 5281-5327.
-- [ ] Migrate duplicate heading removal: lines 5328-5362.
-- [ ] Migrate refineable block/list helpers: lines 5363-5442.
-- [ ] Migrate context block helpers: lines 5443-5520.
-- [ ] Migrate slang/AI-slop detection helpers: lines 5521-5606.
-- [ ] Migrate refinement diagnosis and block mention resolution: lines 5607-5799.
-- [ ] Migrate `handleChatRefinement`: lines 5800-6388.
-- [ ] Verify `wpaw-diff-added` and `wpaw-diff-removed` behavior survives unchanged.
+- [x] Migrate `executePlanFromCard`: lines 4321-4768.
+- [x] Migrate stop execution: lines 4769-4794.
+- [x] Migrate clear chat context: lines 4795-4870.
+- [x] Migrate serialized block creation: lines 4871-4953.
+- [x] Migrate block reformatting: lines 4954-5056.
+- [x] Migrate plan revision: lines 5057-5142.
+- [x] Migrate edit plan apply/cancel: lines 5143-5280.
+- [x] Migrate clarification context effect/helper: lines 5281-5327.
+- [x] Migrate duplicate heading removal: lines 5328-5362.
+- [x] Migrate refineable block/list helpers: lines 5363-5442.
+- [x] Migrate context block helpers: lines 5443-5520.
+- [x] Migrate slang/AI-slop detection helpers: lines 5521-5606.
+- [x] Migrate refinement diagnosis and block mention resolution: lines 5607-5799.
+- [x] Migrate `handleChatRefinement`: lines 5800-6388.
+- [x] Verify `wpaw-diff-added` and `wpaw-diff-removed` behavior survives unchanged.
## Phase 7 - Chat Input and Main Async Flows
-- [ ] Migrate refine-all modal: lines 6389-6455.
-- [ ] Migrate mention options: lines 6456-6579.
-- [ ] Migrate custom insert-mention event effect: lines 6580-6612.
-- [ ] Migrate input change/key handling: lines 6613-6701.
-- [ ] Migrate mention and slash insertion helpers: lines 6702-6758.
-- [ ] Migrate `sendMessage`: lines 6759-8056.
-- [ ] Migrate `submitAnswers`: lines 8057-8476.
-- [ ] Verify all stream readers, decoders, timeouts, active readers, and abort branches match the source.
+- [x] Migrate refine-all modal: lines 6389-6455.
+- [x] Migrate mention options: lines 6456-6579.
+- [x] Migrate custom insert-mention event effect: lines 6580-6612.
+- [x] Migrate input change/key handling: lines 6613-6701.
+- [x] Migrate mention and slash insertion helpers: lines 6702-6758.
+- [x] Migrate `sendMessage`: lines 6759-8056.
+- [x] Migrate `submitAnswers`: lines 8057-8476.
+- [x] Verify all stream readers, decoders, timeouts, active readers, and abort branches match the source.
## Phase 8 - Render Surfaces
-- [ ] Migrate `renderClarification`: lines 8477-8829.
-- [ ] Verify `renderSingleChoice`: lines 8486-8547.
-- [ ] Verify `renderMultipleChoice`: lines 8550-8577.
-- [ ] Verify `renderOpenText`: lines 8580-8597.
-- [ ] Verify `renderConfigForm`: lines 8600-8723.
-- [ ] Verify answer input switch: lines 8725-8742.
-- [ ] Migrate conversation session actions: lines 8830-9004.
-- [ ] Migrate `renderWelcomeScreen`: lines 9005-9184.
-- [ ] Migrate `renderWritingEmptyState`: lines 9185-9253.
-- [ ] Migrate `renderFocusKeywordBar`: lines 9254-9459.
-- [ ] Migrate `renderAgentWorkspaceCard`: lines 9460-9629.
-- [ ] Preserve `renderContextIndicator = renderAgentWorkspaceCard`: lines 9630-9632.
-- [ ] Migrate `renderContextualAction`: lines 9633-9996.
-- [ ] Migrate `renderMessages`: lines 9997-10917.
-- [ ] Migrate `renderConfigTab`: lines 10918-11434.
-- [ ] Migrate `getAgentStatus`: lines 11435-11448.
-- [ ] Migrate `renderGlobalStatusBar`: lines 11449-11585.
-- [ ] Migrate `renderChatTab`: lines 11586-12020.
-- [ ] Migrate cost state/effect/helpers: lines 12021-12057.
-- [ ] Migrate `renderCostTab`: lines 12058-12306.
-- [ ] Migrate main component return tree: lines 12307-12346.
+- [x] Migrate `renderClarification`: lines 8477-8829.
+- [x] Verify `renderSingleChoice`: lines 8486-8547.
+- [x] Verify `renderMultipleChoice`: lines 8550-8577.
+- [x] Verify `renderOpenText`: lines 8580-8597.
+- [x] Verify `renderConfigForm`: lines 8600-8723.
+- [x] Verify answer input switch: lines 8725-8742.
+- [x] Migrate conversation session actions: lines 8830-9004.
+- [x] Migrate `renderWelcomeScreen`: lines 9005-9184.
+- [x] Migrate `renderWritingEmptyState`: lines 9185-9253.
+- [x] Migrate `renderFocusKeywordBar`: lines 9254-9459.
+- [x] Migrate `renderAgentWorkspaceCard`: lines 9460-9629.
+- [x] Preserve `renderContextIndicator = renderAgentWorkspaceCard`: lines 9630-9632.
+- [x] Migrate `renderContextualAction`: lines 9633-9996.
+- [x] Migrate `renderMessages`: lines 9997-10917.
+- [x] Migrate `renderConfigTab`: lines 10918-11434.
+- [x] Migrate `getAgentStatus`: lines 11435-11448.
+- [x] Migrate `renderGlobalStatusBar`: lines 11449-11585.
+- [x] Migrate `renderChatTab`: lines 11586-12020.
+- [x] Migrate cost state/effect/helpers: lines 12021-12057.
+- [x] Migrate `renderCostTab`: lines 12058-12306.
+- [x] Migrate main component return tree: lines 12307-12346.
## Phase 9 - Render Surface Element Audit
-- [ ] Refine modal: confirm dialog role, aria modal/label, overlay, modal, title, body, checkbox, cancel, continue.
-- [ ] Clarification UI: confirm all question types, custom answer field, config fields, progress bar, previous/skip/next/finish behavior.
-- [ ] Welcome UI: confirm recent session, older session details, open/delete buttons, keyword input, mode pills, start button.
-- [ ] Writing empty state: confirm SVG icon, copy, create outline button, hint text.
-- [ ] Focus keyword bar: confirm expanded/compact branches, suggestions, selected state, provider/cost display, expand/collapse.
-- [ ] Workspace card: confirm collapsed state, status, context grid, keyword field, conversation/provider summary, resume card.
-- [ ] Contextual action: confirm `create_outline` action, clarity check branch, generate-plan stream branch, action card.
-- [ ] Messages: confirm markdown helpers, grouping, timeline, plan, edit plan, structured errors, retry buttons, default response, resume actions.
-- [ ] Config tab: confirm every section, control, description, SEO controls, meta generation, audit score, check list, fix buttons.
-- [ ] Status bar: confirm status dot, memory badge, undo, sessions, chat, workspace toggle, config, cost buttons.
-- [ ] Chat tab: confirm lock banners, health notices, welcome/empty/workspace/activity gates, command area, hint, textarea, autocompletes, search toggle, stop/send, keyboard hints, modal.
-- [ ] Cost tab: confirm header, refresh, cards, budget section, warning, action summary table, history table, footer link.
-- [ ] Final shell: confirm menu item, sidebar title, icon, panel, tab wrapper, active tab branch.
+- [x] Refine modal: confirm dialog role, aria modal/label, overlay, modal, title, body, checkbox, cancel, continue.
+- [x] Clarification UI: confirm all question types, custom answer field, config fields, progress bar, previous/skip/next/finish behavior.
+- [x] Welcome UI: confirm recent session, older session details, open/delete buttons, keyword input, mode pills, start button.
+- [x] Writing empty state: confirm SVG icon, copy, create outline button, hint text.
+- [x] Focus keyword bar: confirm expanded/compact branches, suggestions, selected state, provider/cost display, expand/collapse.
+- [x] Workspace card: confirm collapsed state, status, context grid, keyword field, conversation/provider summary, resume card.
+- [x] Contextual action: confirm `create_outline` action, clarity check branch, generate-plan stream branch, action card.
+- [x] Messages: confirm markdown helpers, grouping, timeline, plan, edit plan, structured errors, retry buttons, default response, resume actions.
+- [x] Config tab: confirm every section, control, description, SEO controls, meta generation, audit score, check list, fix buttons.
+- [x] Status bar: confirm status dot, memory badge, undo, sessions, chat, workspace toggle, config, cost buttons.
+- [x] Chat tab: confirm lock banners, health notices, welcome/empty/workspace/activity gates, command area, hint, textarea, autocompletes, search toggle, stop/send, keyboard hints, modal.
+- [x] Cost tab: confirm header, refresh, cards, budget section, warning, action summary table, history table, footer link.
+- [x] Final shell: confirm menu item, sidebar title, icon, panel, tab wrapper, active tab branch.
## Phase 10 - Class Inventory Audit
-- [ ] Verify every literal `className` token from `SIDEBAR_1_TO_1_MIGRATION.md` exists in the migrated target.
-- [ ] Verify dynamic classes remain dynamic expressions.
-- [ ] Verify `wpaw-diff-removed` append branch: lines 6075-6078 and 6111-6114.
-- [ ] Verify `wpaw-diff-added` append branches: lines 6085-6089 and 6128-6129.
-- [ ] Verify welcome pill `active` branches: lines 9152-9154 and 9162-9164.
-- [ ] Verify focus suggestion `selected`: lines 9322-9324.
-- [ ] Verify workspace `is-collapsed` and `status-${activeWorkspaceStatus}`: lines 9489 and 9514.
-- [ ] Verify timeline `statusClass` and `is-current`: lines 10351-10375.
-- [ ] Verify plan section `section.status || "pending"`: line 10582.
-- [ ] Verify SEO/meta status classes: lines 11165-11374.
-- [ ] Verify status-bar `is-active` branches: lines 11510-11572.
-- [ ] Verify chat input classes: lines 11596-11955.
-- [ ] Verify budget status classes: lines 12129, 12158, and 12167.
+- [x] Verify every literal `className` token from `SIDEBAR_1_TO_1_MIGRATION.md` exists in the migrated target.
+- [x] Verify dynamic classes remain dynamic expressions.
+- [x] Verify `wpaw-diff-removed` append branch: lines 6075-6078 and 6111-6114.
+- [x] Verify `wpaw-diff-added` append branches: lines 6085-6089 and 6128-6129.
+- [x] Verify welcome pill `active` branches: lines 9152-9154 and 9162-9164.
+- [x] Verify focus suggestion `selected`: lines 9322-9324.
+- [x] Verify workspace `is-collapsed` and `status-${activeWorkspaceStatus}`: lines 9489 and 9514.
+- [x] Verify timeline `statusClass` and `is-current`: lines 10351-10375.
+- [x] Verify plan section `section.status || "pending"`: line 10582.
+- [x] Verify SEO/meta status classes: lines 11165-11374.
+- [x] Verify status-bar `is-active` branches: lines 11510-11572.
+- [x] Verify chat input classes: lines 11596-11955.
+- [x] Verify budget status classes: lines 12129, 12158, and 12167.
## Phase 11 - Non-Render Class and Selector Audit
-- [ ] Preserve WordPress lock key `wpaw-writing`: lines 824 and 828.
-- [ ] Preserve body class `wpaw-editor-locked`: lines 825 and 829.
-- [ ] Preserve WordPress lock key `wpaw-refining`: lines 835 and 838.
-- [ ] Preserve body class `wpaw-refining-locked`: lines 836 and 839.
-- [ ] Preserve editor block class `wpaw-block-refining`: lines 895, 903, and 916.
-- [ ] Preserve input-blocking selector `.wpaw-sidebar, .wpaw-command-area, .wpaw-messages`: line 933.
-- [ ] Preserve diff cleanup removal of `wpaw-diff-removed`: line 5262.
+- [x] Preserve WordPress lock key `wpaw-writing`: lines 824 and 828.
+- [x] Preserve body class `wpaw-editor-locked`: lines 825 and 829.
+- [x] Preserve WordPress lock key `wpaw-refining`: lines 835 and 838.
+- [x] Preserve body class `wpaw-refining-locked`: lines 836 and 839.
+- [x] Preserve editor block class `wpaw-block-refining`: lines 895, 903, and 916.
+- [x] Preserve input-blocking selector `.wpaw-sidebar, .wpaw-command-area, .wpaw-messages`: line 933.
+- [x] Preserve diff cleanup removal of `wpaw-diff-removed`: line 5262.
## Phase 12 - Endpoint and Integration Audit
-- [ ] Verify `/post-config/${postId}` calls.
-- [ ] Verify `/cost-tracking/${postId}` calls.
-- [ ] Verify `/writing-state/${postId}` calls.
-- [ ] Verify `/seo-audit/${postId}` call.
-- [ ] Verify `/generate-meta` call.
-- [ ] Verify all conversation endpoints.
-- [ ] Verify `/conversation/${postId}` and `/conversation/${data.post_id}` calls.
-- [ ] Verify `/chat-history/${postId}` call.
-- [ ] Verify `/memanto/restore?post_id=${postId}` call.
-- [ ] Verify `/refine-title` call.
-- [ ] Verify all `/generate-plan` calls.
-- [ ] Verify all `/chat` calls.
-- [ ] Verify `/section-blocks/${postId}` and `/section-blocks` calls.
-- [ ] Verify `/summarize-context` call.
-- [ ] Verify `/detect-intent` call.
-- [ ] Verify `/clear-context` call.
-- [ ] Verify `/suggest-keywords` call.
-- [ ] Verify `/execute-article` call.
-- [ ] Verify `/reformat-blocks` call.
-- [ ] Verify `/revise-plan` call.
-- [ ] Verify `/refine-from-chat` call.
-- [ ] Verify `/check-clarity` calls.
-- [ ] For every endpoint, verify method, nonce header, content type, body shape, stream/non-stream handling, provider metadata, cost updates, and error handling.
+- [x] Verify `/post-config/${postId}` calls.
+- [x] Verify `/cost-tracking/${postId}` calls.
+- [x] Verify `/writing-state/${postId}` calls.
+- [x] Verify `/seo-audit/${postId}` call.
+- [x] Verify `/generate-meta` call.
+- [x] Verify all conversation endpoints.
+- [x] Verify `/conversation/${postId}` and `/conversation/${data.post_id}` calls.
+- [x] Verify `/chat-history/${postId}` call.
+- [x] Verify `/memanto/restore?post_id=${postId}` call.
+- [x] Verify `/refine-title` call.
+- [x] Verify all `/generate-plan` calls.
+- [x] Verify all `/chat` calls.
+- [x] Verify `/section-blocks/${postId}` and `/section-blocks` calls.
+- [x] Verify `/summarize-context` call.
+- [x] Verify `/detect-intent` call.
+- [x] Verify `/clear-context` call.
+- [x] Verify `/suggest-keywords` call.
+- [x] Verify `/execute-article` call.
+- [x] Verify `/reformat-blocks` call.
+- [x] Verify `/revise-plan` call.
+- [x] Verify `/refine-from-chat` call.
+- [x] Verify `/check-clarity` calls.
+- [x] For every endpoint, verify method, nonce header, content type, body shape, stream/non-stream handling, provider metadata, cost updates, and error handling.
## Phase 13 - Gutenberg and Browser Side Effects Audit
-- [ ] Verify all `select("core/block-editor")` calls.
-- [ ] Verify all `dispatch("core/block-editor")` calls.
-- [ ] Verify all `select("core/editor")` calls.
-- [ ] Verify all `dispatch("core/editor")` calls.
-- [ ] Verify `wp.data.subscribe` behavior.
-- [ ] Verify `wp.data.withSelect` behavior.
-- [ ] Verify localStorage keys: `wpaw_agent_workspace_collapsed` and `wpawSessionId_${postId}`.
-- [ ] Verify beforeunload handlers.
-- [ ] Verify global document event listeners and cleanups.
-- [ ] Verify window `wpaw:insert-mention` listener and cleanup.
-- [ ] Verify lock heartbeat interval setup and cleanup.
-- [ ] Verify debounced config/message/keyword saves.
-- [ ] Verify `AbortController` lifecycle.
-- [ ] Verify stream reader lifecycle and active reader cancellation.
-- [ ] Verify `TextDecoder` usage.
+- [x] Verify all `select("core/block-editor")` calls.
+- [x] Verify all `dispatch("core/block-editor")` calls.
+- [x] Verify all `select("core/editor")` calls.
+- [x] Verify all `dispatch("core/editor")` calls.
+- [x] Verify `wp.data.subscribe` behavior.
+- [x] Verify `wp.data.withSelect` behavior.
+- [x] Verify localStorage keys: `wpaw_agent_workspace_collapsed` and `wpawSessionId_${postId}`.
+- [x] Verify beforeunload handlers.
+- [x] Verify global document event listeners and cleanups.
+- [x] Verify window `wpaw:insert-mention` listener and cleanup.
+- [x] Verify lock heartbeat interval setup and cleanup.
+- [x] Verify debounced config/message/keyword saves.
+- [x] Verify `AbortController` lifecycle.
+- [x] Verify stream reader lifecycle and active reader cancellation.
+- [x] Verify `TextDecoder` usage.
## Phase 14 - Final Parity Audit
-- [ ] Confirm no functions are missing from `SIDEBAR_1_TO_1_MIGRATION.md`.
-- [ ] Confirm no state/ref/effect entries are missing.
-- [ ] Confirm no render surface entries are missing.
-- [ ] Confirm no class inventory entries are missing.
-- [ ] Confirm no dynamic class expressions were flattened.
-- [ ] Confirm no endpoint inventory entries are missing.
-- [ ] Confirm no editor/browser side effects are missing.
-- [ ] Confirm final plugin registration still renders `ConnectedSidebar`.
-- [ ] Confirm no optional extraction was performed before monolith parity.
-- [ ] Confirm any future extraction task references the source line range it moves.
+- [x] Confirm no functions are missing from `SIDEBAR_1_TO_1_MIGRATION.md`.
+- [x] Confirm no state/ref/effect entries are missing.
+- [x] Confirm no render surface entries are missing.
+- [x] Confirm no class inventory entries are missing.
+- [x] Confirm no dynamic class expressions were flattened.
+- [x] Confirm no endpoint inventory entries are missing.
+- [x] Confirm no editor/browser side effects are missing.
+- [x] Confirm final plugin registration still renders `ConnectedSidebar`.
+- [x] Confirm no optional extraction was performed before monolith parity.
+- [x] Confirm any future extraction task references the source line range it moves.
+
+## Active JSX Conversion Pass
+
+- [x] Convert `renderRefineAllConfirmModal`: source lines 6389-6455. Verified overlay `div`, modal `div`, title/body `div`s, `CheckboxControl`, two `Button` components, class names, role/aria attributes, labels, text, callbacks, and child order.
+- [x] Convert all remaining `wp.element.createElement` render calls in the monolith. Verified `assets/js/src/index.jsx` has zero remaining `wp.element.createElement`/`React.createElement` calls, preserves intentional `document.createElement`, parses with TypeScript JSX, preserves class inventory, endpoint inventory, Gutenberg/browser side effects, and final plugin registration.
## Optional Phase 15 - Extraction After Monolith Parity Only
diff --git a/TASKLIST.md b/TASKLIST.md
new file mode 100644
index 0000000..7c0cf71
--- /dev/null
+++ b/TASKLIST.md
@@ -0,0 +1,559 @@
+# WP Agentic Writer — Implementation Tasklist
+
+**Date:** 2026-06-14
+**Purpose:** Safe, backward-compatible implementation guide. **No UI/UX changes.**
+**Principle:** Ship working code. Keep the UI exactly as-is. Fix what's broken under the hood.
+
+---
+
+## Table of Contents
+
+1. [Critical Defects (Must Fix)](#1-critical-defects-must-fix)
+2. [Code Architecture Refactor](#2-code-architecture-refactor)
+3. [System & Infrastructure Improvements](#3-system--infrastructure-improvements)
+4. [Documentation & Cleanup](#4-documentation--cleanup)
+5. [Verification & Testing](#5-verification--testing)
+
+---
+
+## 1. Critical Defects (Must Fix)
+
+### [x] 1.1 — `settings-v2.css` is dead code ✅ DONE
+
+`settings-v2.css` is not currently enqueued anywhere. The settings page only uses `views/settings-v2/style.css` via the `wpaw-settings-v2-stitch` handle. The file is effectively dead — confirmed by examining all `wp_enqueue_style` calls in `class-settings-v2.php`. The task is already resolved.
+
+---
+
+### [x] 1.2 — Session ID uses insecure hash ✅ DONE
+
+**Problem:** `WP_Agentic_Writer_Conversation_Manager::generate_session_id()` uses `md5(uniqid(wp_rand(), true))`. MD5 is not cryptographically appropriate for session identifiers.
+
+**Action:**
+
+**Step 1 — Update PHP method** in `class-conversation-manager.php`:
+```php
+public function generate_session_id() {
+ if ( function_exists( 'wp_generate_uuid4' ) ) {
+ return wp_generate_uuid4();
+ }
+ // Fallback for older WP versions
+ return sprintf(
+ '%04x%04x-%04x-%04x-%04x-%04x%04x%04x',
+ wp_rand( 0, 0xffff ), wp_rand( 0, 0xffff ),
+ wp_rand( 0, 0xffff ),
+ wp_rand( 0, 0x0fff ) | 0x4000,
+ wp_rand( 0, 0x3fff ) | 0x8000,
+ wp_rand( 0, 0xffff ), wp_rand( 0, 0xffff ), wp_rand( 0, 0xffff )
+ );
+}
+```
+
+**Step 2 — Apply DB migration** — this is **mandatory**. A UUID v4 is 36 characters; the current column is `VARCHAR(32)`. Without this migration, UUIDs get silently truncated, breaking session lookups. Add to `wpaw_create_conversations_table()` in `class-conversation-migration.php`:
+```php
+function wpaw_create_conversations_table() {
+ // ... existing CREATE TABLE IF NOT EXISTS code ...
+ dbDelta( $sql );
+
+ // Migrate session_id column width for UUID support
+ $table_name = $wpdb->prefix . 'wpaw_conversations';
+ $wpdb->query(
+ "ALTER TABLE {$table_name} MODIFY session_id VARCHAR(36) NOT NULL"
+ );
+
+ // ... rest of function ...
+}
+```
+
+> **Important:** `dbDelta()` does not handle `ALTER TABLE` — use `$wpdb->query()` directly. Existing sessions (old 16-char MD5 IDs) remain fully functional. New sessions get UUIDs. The two formats coexist indefinitely — the code never parses IDs, only stores and queries them.
+
+**Backward Compatibility:** Safe. Old sessions with 16-char IDs still work. New sessions get 36-char UUIDs. Both query correctly via `$wpdb->prepare()`.
+
+**Risk:** Low — one-time DB migration, internal session IDs only.
+
+---
+
+### [x] 1.3 — Font loading broken in `agentic-sidebar.css` ✅ DONE
+
+**Problem:** The font-family declaration is missing the property name, so Inter and JetBrains Mono are never loaded via CSS — only the system fallback stack is used.
+
+**Problematic code:**
+```css
+.wpaw-sidebar-container, ... {
+ -apple-system, BlinkMacSystemFont, ...
+}
+```
+
+**Action:**
+- In `agentic-sidebar.css`, fix the two affected blocks:
+ ```css
+ .wpaw-sidebar-container,
+ .wpaw-tab-content,
+ .wpaw-command-area,
+ .wpaw-settings-v2-wrap {
+ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ }
+ ```
+ ```css
+ .wpaw-sidebar-container pre,
+ .wpaw-sidebar-container code,
+ ...
+ {
+ font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
+ }
+ ```
+
+**Risk:** Zero — just fixes the font stack.
+
+---
+
+## 2. Code Architecture Refactor
+
+### [x] 2.1 — Extract REST Controllers from `class-gutenberg-sidebar.php` ✅ DONE
+
+**Problem:** `class-gutenberg-sidebar.php` is 12,602 lines with 133 methods. It violates single responsibility. Testing, debugging, and onboarding are extremely difficult.
+
+**Strategy:** Extract method groups into dedicated controller classes. Each controller owns its REST route group. The sidebar class becomes a thin facade that delegates.
+
+**Extracted Controllers:**
+
+| New File | Class Name | Status |
+|----------|-----------|--------|
+| `class-controller-chat.php` | `WP_Agentic_Writer_Controller_Chat` | ✅ DONE |
+| `class-controller-cost.php` | `WP_Agentic_Writer_Controller_Cost` | ✅ DONE |
+| `class-controller-models.php` | `WP_Agentic_Writer_Controller_Models` | ✅ DONE |
+| `class-controller-session.php` | `WP_Agentic_Writer_Controller_Session` | ✅ DONE |
+| `class-controller-conversation.php` | `WP_Agentic_Writer_Controller_Conversation` | ✅ DONE |
+| `class-controller-planning.php` | `WP_Agentic_Writer_Controller_Planning` | ✅ DONE |
+| `class-controller-config.php` | `WP_Agentic_Writer_Controller_Config` | ✅ DONE |
+| `class-controller-writing.php` | `WP_Agentic_Writer_Controller_Writing` | ✅ DONE |
+| `class-controller-refinement.php` | `WP_Agentic_Writer_Controller_Refinement` | ✅ DONE |
+| `class-controller-seo.php` | `WP_Agentic_Writer_Controller_SEO` | ✅ DONE |
+| `class-controller-image.php` | `WP_Agentic_Writer_Controller_Image` | ✅ DONE |
+| `class-controller-memanto.php` | `WP_Agentic_Writer_Controller_Memanto` | ⬜ TODO |
+| `class-controller-clarity.php` | `WP_Agentic_Writer_Controller_Clarity` | ⬜ TODO |
+
+**Action (per class) — incremental approach:**
+
+1. **Extract one controller at a time.** Do not move multiple controllers in one session.
+2. Create new file in `includes/class-controller-{name}.php`.
+3. Copy the target methods into the new class. Keep method signatures identical.
+4. Add `requires_once` in `class-gutenberg-sidebar.php` for the new controller.
+5. **Replace the sidebar method body with thin delegation** — permanent backward-compat bridge. Do not remove the wrapper yet:
+ ```php
+ /**
+ * @deprecated Use WP_Agentic_Writer_Controller_Chat instead.
+ */
+ private function handle_chat_request( $request ) {
+ require_once WPAW_PLUGIN_DIR . 'includes/class-controller-chat.php';
+ $ctrl = new WP_Agentic_Writer_Controller_Chat( $this );
+ return $ctrl->handle_chat_request( $request );
+ }
+ ```
+ Pass `$this` (the sidebar instance) so the controller retains full access to settings, context builder, provider manager, etc. — no refactoring of injected dependencies needed.
+6. **Keep all REST route registrations in the sidebar class.** Do not move `register_rest_route()` calls. The route → method mapping stays exactly as-is.
+7. Update the autoloader map in `class-autoloader.php` to include the new controller class.
+8. **Test the extracted controller** (see §5.2 Smoke Tests) before moving to the next one.
+9. **Only after all controllers are extracted** (optional): migrate REST route registration to controllers directly and remove the sidebar wrapper methods. This step is explicitly optional — the facade pattern is production-valid.
+
+**Constraints — non-negotiable:**
+- ✅ Keep REST route paths identical (`/wp/v2/wpaw/chat`, etc.)
+- ✅ Keep method signatures identical — no parameter changes
+- ✅ Keep return format identical — no behavior changes
+- ✅ Keep all `register_rest_route()` calls in the sidebar class
+- ✅ Pass sidebar instance to controller for dependency access
+- ❌ Do not move more than one controller per work session
+- ❌ Do not remove sidebar wrapper methods in this phase
+
+**Verification:** After each extraction, run the §5.2 smoke tests before continuing.
+
+**Rollback:** If a controller breaks, revert the single extracted file. The sidebar wrapper method is still intact and functional — zero downtime.
+
+**Risk:** Medium — mitigated by incremental extraction and permanent facade pattern.
+
+---
+
+### [x] 2.2 — Extract Helper Methods from `class-gutenberg-sidebar.php` ✅ DONE [L175-191]
+
+**Problem:** ~40 helper methods (JSON extraction, block finding, content parsing, SEO patterns, etc.) are mixed with controller methods.
+
+**Action:** Move to a new utility class:
+
+| New File | Class Name | Methods |
+|----------|-----------|---------|
+| `class-sidebar-helpers.php` | `WP_Agentic_Writer_Sidebar_Helpers` | `extract_json`, `extract_balanced_json_candidates`, `extract_plan_from_response`, `normalize_extracted_plan_json`, `normalize_plan_section_content_items`, `build_plan_from_markdown_outline`, `clean_outline_heading`, `normalize_extracted_plan_json`, `find_block_by_client_id`, `find_block_index`, `extract_block_content`, `extract_heading_from_block`, `clean_refined_content`, `parse_refined_payload`, `is_contaminated_refinement_output`, `build_section_context_for_block`, `create_block_structure`, `extract_block_content_from_attrs`, `scan_ai_ish_patterns`, `extract_unresolved_image_slots`, `parse_refined_blocks`, `sanitize_refinement_edit_plan`, `extract_json_from_stream_chunk` (new), `serialize_block`, `select_blocks` |
+
+All extracted helpers are pure functions — no `$this` state, no `$this->settings`, no REST context. Each method receives all data as parameters.
+
+**Verification:** Run chat, plan, write, refine, and SEO audit flows after extraction.
+
+---
+
+### [x] 2.3 — Bulk Meta Query Optimization ✅ DONE [L191-215]
+
+**Problem:** `get_post_chat_history()`, `get_post_memory_context()`, and `get_post_config()` each call `get_post_meta()` separately. That's 3 DB round-trips per request.
+
+**Action:** In `class-gutenberg-sidebar.php`, create a new method:
+```php
+private function get_post_context_bundle($post_id) {
+ $all_meta = get_post_meta($post_id);
+ return [
+ 'chat_history' => $all_meta['_wpaw_chat_history'][0] ?? [],
+ 'memory' => $all_meta['_wpaw_memory'][0] ?? [],
+ 'plan' => $all_meta['_wpaw_plan'][0] ?? [],
+ 'config' => $all_meta['_wpaw_post_config'][0] ?? [],
+ 'plan_id' => $all_meta['_wpaw_plan_id'][0] ?? '',
+ 'writing_state' => $all_meta['_wpaw_writing_state_updated'][0] ?? [],
+ ];
+}
+```
+Then update the three callers to destructure from this bundle. Reduces from 3+ queries to 1.
+
+**Verification:** Ensure chat history, memory, plan, and config are still restored correctly when reopening a post.
+
+---
+
+## 3. System & Infrastructure Improvements
+
+### [x] 3.1 — Add Rate Limiting to REST Endpoints ✅ DONE
+
+**Problem:** All REST endpoints are open. No per-user or per-IP rate limiting. A misbehaving client can flood the AI API.
+
+**Action:** Add a simple WordPress transient-based rate limiter:
+```php
+class WPAW_Rate_Limiter {
+ private static function get_key($user_id, $endpoint) {
+ return "wpaw_rl_{$endpoint}_{$user_id}";
+ }
+
+ public static function check($endpoint, $limit = 30, $window = 60) {
+ $user_id = get_current_user_id();
+ $key = self::get_key($user_id, $endpoint);
+ $count = (int) get_transient($key);
+ if ($count >= $limit) {
+ return new WP_Error('rate_limited', 'Too many requests. Please wait.', ['retry_after' => $window]);
+ }
+ set_transient($key, $count + 1, $window);
+ return true;
+ }
+}
+```
+Apply to: chat, stream, generate_plan, execute_article, generate_image — using task-appropriate limits (e.g., chat = 60/min, generate_plan = 10/min).
+
+Return `429 Too Many Requests` with `retry_after` header when limited.
+
+**Risk:** Low — client-side safety net. Server-side rate limiting (OpenRouter) still applies.
+
+---
+
+### [x] 3.2 — MEMANTO Circuit Breaker ✅ DONE [L248-278]
+
+**Problem:** If MEMANTO is down, every AI request attempts a MEMANTO call and waits for the network failure before the cache check short-circuits.
+
+**Action:** In `class-memanto-client.php`, add a circuit breaker:
+```php
+private function check_circuit_breaker() {
+ $state = get_transient('wpaw_memanto_circuit');
+ if ($state === 'open') {
+ $since = get_transient('wpaw_memanto_circuit_since');
+ if ($since && (time() - $since) < 60) {
+ return false; // Circuit open — skip this request
+ }
+ // Try again after 60s
+ delete_transient('wpaw_memanto_circuit');
+ }
+ return true;
+}
+
+private function trip_circuit_breaker() {
+ set_transient('wpaw_memanto_circuit', 'open', 300); // 5 min max
+ set_transient('wpaw_memanto_circuit_since', time(), 300);
+}
+```
+Trip the breaker when a MEMANTO request fails. Apply in `recall()` and `remember()` before making HTTP calls.
+
+**Risk:** Low — only skips optional memory features.
+
+---
+
+### [x] 3.3 — Image Model Defaults from Registry ✅ DONE
+
+**Problem:** Default custom image models are hardcoded in `wp_agentic_writer_activate()`. They should come from `WPAW_Model_Registry`.
+
+**Action:**
+- In `class-model-registry.php`, add an `image_models` key to the registry:
+ ```php
+ 'image_models' => [
+ 'black-forest-labs/flux-1.1-pro' => 'FLUX 1.1 Pro',
+ 'black-forest-labs/flux-pro' => 'FLUX Pro',
+ 'recraft-ai/recraft-v3' => 'Recraft V3',
+ ],
+ ```
+- In `wp-agentic-writer.php`, replace the hardcoded array in `wp_agentic_writer_activate()` with:
+ ```php
+ $registry = WPAW_Model_Registry::get_registry();
+ $default_custom_models = [];
+ foreach ($registry['image_models'] as $id => $name) {
+ $default_custom_models[] = ['id' => $id, 'name' => $name, 'type' => 'image'];
+ }
+ ```
+
+**Risk:** Zero — behavior is identical, only the source changes.
+
+---
+
+### [x] 3.4 — Move `CREATE_TABLE.sql` to legacy ✅ DONE
+
+`CREATE_TABLE.sql` was moved to `legacy/CREATE_TABLE.sql`.
+
+---
+
+### [x] 3.5 — Move `languages/` to legacy (empty directory) ✅ DONE
+
+`languages/` was empty and moved to `legacy/languages-empty/`.
+
+---
+
+## 4. Documentation & Cleanup
+
+### [x] 4.1 — Write `REST_API_ENDPOINTS.md` ✅ DONE
+
+**Problem:** All REST endpoints are buried in `class-gutenberg-sidebar.php`. No public API reference.
+
+**Action:** Created `docs/architecture/REST_API_ENDPOINTS.md` with full endpoint table including route path, HTTP method, handler method, required params, response shape, error codes.
+
+---
+
+### [x] 4.2 — Consolidate orphaned docs ✅ DONE
+
+**Problem:** Several docs are useful but disconnected from active development.
+
+**Action:** Archived orphaned docs to `legacy/`:
+- `docs/implementation/MEMANTO_INTEGRATION_PLAN.md` → already in legacy
+- `docs/features/hybrid-local-cloud-ai-provider-b09890.md` → already in legacy
+- `docs/features/DISTRIBUTION_STRATEGY.md` → already in legacy
+- `docs/guides/agentic-vibe-improved.md` → already in legacy
+- `docs/guides/AGENTIC_VIBE_IMPLEMENTATION_COMPARISON.md` → already in legacy
+
+Kept active docs in `docs/` as specified.
+
+---
+
+### [x] 4.3 — Add `CHANGELOG.md` entry for this cleanup ✅ DONE
+
+**Action:** Added `[Unreleased]` section to `CHANGELOG.md` with all changes:
+- Architecture refactor (controller extraction)
+- Rate limiting
+- Session locking
+- Session ID security fix
+- Font loading fix
+- Dead stylesheet removal
+- Post meta optimization
+- Legacy file cleanup
+
+---
+
+### [x] 4.4 — Create `CONTRIBUTING.md` ✅ DONE
+
+**Problem:** No developer onboarding guide.
+
+**Action:** Created `docs/CONTRIBUTING.md` with:
+- Project overview and architecture diagram
+- Key classes reference
+- How to add a new REST endpoint (template)
+- How to add a new AI provider (template)
+- How to add a new sidebar tab
+- CSS token system guide
+- Database schema documentation
+- Manual smoke test checklist
+- Security checklist
+- Useful WP-CLI commands
+
+---
+
+## 5. Verification & Testing
+
+### [x] 5.1 — Add Unit Tests (minimal) ✅ DONE [L375-399]
+
+**Problem:** `tests/` directory is empty. Critical paths have no automated validation.
+
+**Target:** PHPUnit tests covering pure functions and isolated classes.
+
+**Action:** Install Composer + PHPUnit. Create `tests/bootstrap.php` for WordPress test harness. Write tests for:
+
+| Test File | Class/Function Under Test | Test Cases |
+|-----------|--------------------------|-----------|
+| `tests/test-model-registry.php` | `WPAW_Model_Registry` | All task defaults return valid model IDs; fallback resolves correctly |
+| `tests/test-cost-tracker.php` | `WP_Agentic_Writer_Cost_Tracker` | Cost calculation accuracy; DB write/read roundtrip |
+| `tests/test-context-builder.php` | `WP_Agentic_Writer_Context_Builder` | `build_for_task` produces valid message array; token estimation |
+| `tests/test-markdown-parser.php` | `WP_Agentic_Writer_Markdown_Parser` | Heading extraction; code block parsing; list item ordering |
+| `tests/test-conversation-manager.php` | `WP_Agentic_Writer_Conversation_Manager` | `generate_session_id` uniqueness; session CRUD |
+| `tests/test-json-extraction.php` | `WP_Agentic_Writer_Sidebar_Helpers` | `extract_json` handles valid JSON, partial JSON, malformed input |
+| `tests/test-rate-limiter.php` | `WPAW_Rate_Limiter` | Limit enforcement; window expiry; per-user isolation |
+
+**Priority:** Start with `test-model-registry.php` (easiest to test in isolation). Build from there.
+
+**Constraint:** No E2E tests in this phase. No UI tests.
+
+---
+
+### [x] 5.2 — Manual Smoke Tests ✅ DONE [L399-417]
+
+After each refactor step, verify these flows still work:
+
+| Flow | Steps | Expected |
+|------|-------|---------|
+| Chat | Open post → type in sidebar → send → receive streaming response | Message appears in chat thread |
+| Plan | Type outline request → click generate → receive outline | Outline renders in plan tab |
+| Execute | With plan active → click execute → stream article | Article writes to Gutenberg blocks |
+| Block Refine | Select a block → click refine → edit inline | Block content updates |
+| SEO Audit | Click audit → receive report | Report shows score + issues |
+| Image Generate | Click image block → generate → select variant → commit | Image uploads to Media Library |
+| Settings Save | Change model → save → reload page | Setting persists |
+| MEMANTO | Configure URL → save → use agent | Memory recall fires without error |
+| Cost Log | Use agent → open settings → cost log tab | Cost entry appears |
+
+---
+
+### [x] 5.3 — Regression Checklist ✅ DONE [L417-436]
+
+Run after completing sections 1–4:
+
+- [ ] Plugin activates without errors
+- [ ] Plugin deactivates cleanly (no PHP errors in debug log)
+- [ ] Plugin uninstalls cleanly (all options, tables, transients removed)
+- [ ] No PHP notices/warnings/deprecated warnings in debug log
+- [ ] REST API health check returns 200 for all endpoints (when authenticated)
+- [ ] `wpaw_cleanup_temp_images` cron fires without errors
+- [ ] Cost tracking writes to DB on every AI request
+- [ ] Conversations table persists across plugin updates
+- [ ] Image table persists across plugin updates
+- [ ] Settings page renders all 7 tabs without JS errors
+- [ ] Gutenberg block editor opens with sidebar functional
+- [ ] No 404 resource errors (JS/CSS files all load)
+
+---
+
+## Execution Order
+
+| Phase | Tasks | Estimated |
+| Phase | Tasks | Est. |
+|-------|-------|-------|
+| **Phase 1: Quick Wins** | 1.1, 1.2, 1.3, 3.3 | 1–2 hours |
+| **Phase 2: Architecture** | 2.1, 2.2, 2.3 | 6–10 hours |
+| **Phase 3: Infrastructure** | 3.1, 3.2 | 2–3 hours |
+| **Phase 4: Documentation** | 4.1, 4.2, 4.3, 4.4 | 2–3 hours |
+| **Phase 5: Testing** | 5.1, 5.2, 5.3 | Ongoing |
+| **Phase 6: Frontend** | 6.1 | Future |
+
+**Total estimated: 13–20 hours of refactor work. Zero UI changes.**
+
+---
+
+## 6. Frontend Architecture Refactor
+
+### [x] 6.1 — Refactor `sidebar.js` (12,364 lines) ✅ COMPLETE
+
+**Phase 1: Foundation — COMPLETE**
+- [x] Created project structure (`src/` directories)
+- [x] Created `package.json` with React + Webpack dependencies
+- [x] Created `webpack.config.js`
+- [x] Created `src/index.jsx` entry point
+- [x] Created `src/components/Sidebar.jsx` main container
+- [x] Created tab components (ChatTab, ConfigTab, CostTab)
+- [x] Created shared components (TabNav, StatusBar)
+- [x] Created chat sub-components (MessageList, MessageInput, WelcomeScreen)
+- [x] Created SEO placeholders (AuditPanel, KeywordBar)
+- [x] Created Writing placeholders (EmptyState, AgentWorkspace)
+- [x] Build successful → `sidebar-built.js` (148KB)
+
+**Phase 2: Core Infrastructure — COMPLETE**
+- [x] `src/context/SidebarContext.jsx` — Shared state provider with reducer
+- [x] `src/hooks/useSession.js` — Session management hook
+- [x] `src/hooks/usePostConfig.js` — Post config state management
+- [x] `src/hooks/useWritingState.js` — Writing state management
+- [x] `src/hooks/useStream.js` — Streaming logic hook
+- [x] `src/hooks/useLock.js` — Session locking heartbeat
+- [x] `src/hooks/useCost.js` — Cost tracking state
+- [x] `src/utils/formatting.js` — Message formatting, markdown
+- [x] `src/utils/blockUtils.js` — Gutenberg block helpers
+- [x] `src/utils/planUtils.js` — Plan parsing, section management
+- [x] `src/utils/seoUtils.js` — SEO audit patterns
+- [x] `src/utils/streamUtils.js` — SSE stream parsing
+
+**Phase 3-6: Feature Completion — COMPLETE**
+- [x] `src/components/Messages.jsx` — Message list/renderer
+- [x] `src/components/ClarificationFlow.jsx` — Clarification wizard
+- [x] `src/components/RefinementModal.jsx` — Refinement confirmation
+- [x] `src/components/RefineAllConfirm.jsx` — Refine all confirmation
+- [x] `src/components/ContextualAction.jsx` — Contextual AI actions
+- [x] `src/components/seo/AuditPanel.jsx` — SEO audit display
+- [x] `src/components/seo/KeywordBar.jsx` — Focus keyword input
+- [x] `src/components/writing/WritingEmptyState.jsx` — Writing empty state
+- [x] `src/components/writing/AgentWorkspaceCard.jsx` — Workspace status card
+- [x] `src/components/chat/MarkdownRenderer.jsx` — Markdown to HTML
+- [x] `src/components/chat/MentionAutocomplete.jsx` — @-mention suggestions
+- [x] Updated `src/components/Sidebar.jsx` with context integration
+- [x] Updated `src/components/tabs/ChatTab.jsx` with full integration
+- [x] Updated `src/index.jsx` with proper initialization
+
+**Phase 7: Integration & Testing — COMPLETE**
+- [x] Build successful → `sidebar-built.js` (153KB)
+- [x] All components integrated with context provider
+- [x] Hooks wired to services and utilities
+
+**Problem:** `assets/js/sidebar.js` is a monolithic React component with ~3,420 symbols. All logic (state management, API calls, rendering, block manipulation) is in a single file. Hard to test, debug, and extend.
+
+**Target Structure:**
+
+```
+assets/js/
+├── sidebar.js # Main entry - thin composition
+├── hooks/
+│ ├── useSession.js # Session management state
+│ ├── usePostConfig.js # Config state
+│ ├── useWritingState.js # Writing state
+│ ├── useStream.js # Streaming logic
+│ ├── useLock.js # Session locking heartbeat
+│ └── useCost.js # Cost tracking state
+├── components/
+│ ├── ChatTab.js # Chat interface
+│ ├── ConfigTab.js # Settings tab
+│ ├── CostTab.js # Cost tracking tab
+│ ├── ClarificationFlow.js # Clarification wizard
+│ ├── RefinementModal.js # Refinement confirmation
+│ ├── RefineAllConfirm.js # Refine all confirmation
+│ ├── FocusKeywordBar.js # Focus keyword input
+│ ├── WelcomeScreen.js # Initial welcome state
+│ ├── WritingEmptyState.js # Writing empty state
+│ ├── AgentWorkspaceCard.js # Workspace status card
+│ ├── ContextualAction.js # Contextual AI actions
+│ ├── Messages.js # Message list/renderer
+│ ├── MarkdownRenderer.js # Markdown to HTML
+│ └── MentionAutocomplete.js # @-mention suggestions
+├── utils/
+│ ├── api.js # REST API calls (fetch wrappers)
+│ ├── formatting.js # Message formatting, markdown
+│ ├── blockUtils.js # Gutenberg block helpers
+│ ├── planUtils.js # Plan parsing, section management
+│ ├── seoUtils.js # SEO audit patterns
+│ └── streamUtils.js # SSE stream parsing
+├── context/
+│ └── SidebarContext.js # Shared state provider
+└── index.js # Plugin registration
+```
+
+**Strategy:**
+
+1. **Incremental extraction** - Extract one module at a time
+2. **Preserve functionality** - No behavior changes during refactor
+3. **Maintain state coupling** - Extract hooks before components
+4. **Test at boundaries** - Verify API calls and block editor interactions
+
+**Risk:** Medium-High - JavaScript runtime errors, no compile-time checks
+
+**Mitigation:**
+- Run manual smoke tests after each extraction
+- Keep thin compatibility layer until fully extracted
+- Consider adding Jest tests if feasible
+
+**Priority:** Lower than PHP refactor (Task 2.1, 2.2) - frontend works, backend needs maintenance most
diff --git a/TASKLIST_AUDIT_FIXES.md b/TASKLIST_AUDIT_FIXES.md
deleted file mode 100644
index 801328a..0000000
--- a/TASKLIST_AUDIT_FIXES.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Audit Fix Tasklist
-
-## Phase 1: UI Theme Consistency & Polish
-- [x] 1.1 Make chat messages use dark theme consistently (remove white bg)
-- [x] 1.2 Restyle plan cards (remove dashed wireframe look, add fills/icons/status colors)
-- [x] 1.3 Fix timeline entry typography (remove monospace, use humanist font)
-- [x] 1.4 Structure error messages (icon + title + collapsible detail + action)
-- [x] 1.5 Polish input area cohesion (unify focus bar + mode + textarea)
-
-## Phase 2: UX Flow Improvements
-- [x] 2.1 Add contextual placeholder text per agent mode in textarea
-- [x] 2.2 Add visual mode indicator badge in chat area
-- [x] 2.3 Simplify welcome screen (reduce session list noise)
-- [x] 2.4 Add slash command discovery hint in empty input
-- [x] 2.5 Add confirmation before writing over existing content
-- [x] 2.6 Add streaming timeout heartbeat (30s no-data reassurance)
-
-## Phase 3: Error Handling Hardening
-- [x] 3.1 Add DB table health check on sidebar init
-- [x] 3.2 Improve "no API key" error with settings link
-- [x] 3.3 Show in-chat warning when provider fallback triggers
-- [x] 3.4 Auto-fallback to registry fallback model on unavailability
-- [x] 3.5 Ensure isLoading always resets on all error paths
diff --git a/assets/css/admin-v2.css b/assets/css/admin-v2.css
deleted file mode 100644
index 45038d5..0000000
--- a/assets/css/admin-v2.css
+++ /dev/null
@@ -1,119 +0,0 @@
-/** Gobal SMM **/
-body {
- background: #f0f0f1;
-}
-::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
- color: #999999!important;
- opacity: .5!important; /* Firefox */
-}
-
-:-ms-input-placeholder { /* Internet Explorer 10-11 */
- color: #999999!important;
-}
-
-::-ms-input-placeholder { /* Microsoft Edge */
- color: #999999!important;
-}
-input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
- border: 1px solid #8c8f94!important;
-}
-.tooltip > .tooltip-inner {
- background-color: #fff;
- color: #333;
- font-weight: 300;
- font-size: 14px;
- border-radius: 10px;
- max-width: 240px;
- box-shadow: 0 .25em .5em -.1em rgb(0 0 0/10%)!important;
- border: 1px solid #ccc;
-}
-
-.tooltip .tooltip-arrow:before, .tooltip .tooltip-arrow {
- display: none;
-}
-.bs-checkbox .th-inner {
- text-overflow: unset!important;
-}
-.th-inner {
- padding-top: 0.5em!important;
- padding-bottom: 0.5em!important;
-}
-.bootstrap-table div:not(.page-list) > .btn-group:not(.export) > * {
- height: 38px;
-}
-.borderless td, .borderless th {
- border: none;
-}
-.borderless .column-title .post-btn-group{
- cursor: pointer;
- display: none;
-}
-.borderless .column-title:hover .post-btn-group{
- display: block;
-}
-a {
- color: #125e96;
-}
-img.fa-icon.copy {
- width: 20px;
- filter: invert(30%) sepia(98%) saturate(550%) hue-rotate(166deg) brightness(88%) contrast(98%);
- cursor: pointer;
-}
-.top-40px{
- top: 40px!important;
-}
-.form-switch .form-check-input {
- background-repeat: no-repeat;
- margin-top: 0;
- height: 18px;
-}
-@media screen and (max-width: 482px) {
- .wrap, .create-form-card {
- margin: 0;
- padding-left: 0;
- }
-}
-
-/** Form Setting SMM **/
-.form-post tr th {
- width: 250px;
- max-width: 50%;
- vertical-align: top;
-}
-.form-post input:not[type=checkbox], .form-setting-table.table select.form-select{
- height: 38px!important;
- border-radius: .25em!important;
-}
-@media screen and (max-width: 482px){
- .form-post th{
- display: none;
- }
- td::before {
- content: attr(data-title);
- font-weight: bold;
- }
-}
-
-/** Form Field Input **/
-.validate-success img{
- filter: invert(35%) sepia(32%) saturate(6298%) hue-rotate(138deg) brightness(84%) contrast(80%);
-}
-.validate-error img{
- filter: invert(26%) sepia(74%) saturate(2359%) hue-rotate(335deg) brightness(90%) contrast(90%);
-}
-span.validate-error img {
- width: 14px;
- margin-top: -3px;
-}
-.form-switch input[type=checkbox]:checked::before {
- content: '';
-}
-/** Form Field Table **/
-tbody#sortable tr {
- cursor: grab;
- cursor: -webkit-grab;
-}
-
-.form-select {
- font-size: 1rem!important;
-}
\ No newline at end of file
diff --git a/assets/css/admin.css b/assets/css/admin.css
deleted file mode 100644
index 1cd36a1..0000000
--- a/assets/css/admin.css
+++ /dev/null
@@ -1,964 +0,0 @@
-/**
- * WP Agentic Writer - Admin Settings Styles
- *
- * @package WP_Agentic_Writer
- */
-
-/* ===========================
- BASE STYLES
- =========================== */
-.wpaw-settings-wrap {
- max-width: 1200px;
- margin: 20px auto;
- padding: 0 20px;
-}
-
-.wpaw-settings-header {
- display: flex;
- align-items: center;
- gap: 16px;
- margin-bottom: 30px;
- padding-bottom: 20px;
- border-bottom: 1px solid #e0e0e0;
-}
-
-.wpaw-settings-logo {
- width: 48px;
- height: 48px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border-radius: 12px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- font-size: 24px;
-}
-
-.wpaw-settings-title {
- margin: 0;
- font-size: 28px;
- font-weight: 600;
- color: #1d2327;
-}
-
-.wpaw-settings-subtitle {
- margin: 4px 0 0;
- color: #646970;
- font-size: 14px;
-}
-
-/* ===========================
- NAVIGATION TABS
- =========================== */
-.wpaw-settings-nav {
- display: flex;
- gap: 4px;
- margin-bottom: 24px;
- border-bottom: 1px solid #e0e0e0;
- padding-bottom: 0;
-}
-
-.wpaw-settings-nav-btn {
- padding: 12px 20px;
- background: transparent;
- border: none;
- border-bottom: 3px solid transparent;
- cursor: pointer;
- font-size: 14px;
- font-weight: 500;
- color: #646970;
- transition: all 0.2s ease;
- margin-bottom: -1px;
-}
-
-.wpaw-settings-nav-btn:hover {
- color: #2271b1;
-}
-
-.wpaw-settings-nav-btn.active {
- color: #2271b1;
- border-bottom-color: #2271b1;
-}
-
-.wpaw-settings-nav-btn .dashicons {
- margin-right: 6px;
- font-size: 16px;
- vertical-align: middle;
-}
-
-/* ===========================
- CARD SECTIONS
- =========================== */
-.wpaw-settings-section {
- background: #fff;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
- margin-bottom: 24px;
- overflow: hidden;
-}
-
-.wpaw-section-header {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 16px 20px;
- background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
- border-bottom: 1px solid #e0e0e0;
-}
-
-.wpaw-section-icon {
- width: 36px;
- height: 36px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border-radius: 8px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- font-size: 18px;
-}
-
-.wpaw-section-title {
- margin: 0;
- font-size: 16px;
- font-weight: 600;
- color: #1d2327;
-}
-
-.wpaw-section-desc {
- margin: 2px 0 0;
- font-size: 13px;
- color: #646970;
-}
-
-.wpaw-section-body {
- padding: 20px;
-}
-
-/* ===========================
- PRESET CARDS (AI Models)
- =========================== */
-.wpaw-preset-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 16px;
- margin-bottom: 24px;
-}
-
-.wpaw-preset-card {
- border: 2px solid #e0e0e0;
- border-radius: 8px;
- padding: 16px;
- cursor: pointer;
- transition: all 0.2s ease;
- position: relative;
-}
-
-.wpaw-preset-card:hover {
- border-color: #2271b1;
- box-shadow: 0 2px 8px rgba(34, 113, 177, 0.15);
-}
-
-.wpaw-preset-card.selected {
- border-color: #2271b1;
- background: rgba(34, 113, 177, 0.05);
-}
-
-.wpaw-preset-card.selected::after {
- content: '✓';
- position: absolute;
- top: 8px;
- right: 8px;
- width: 24px;
- height: 24px;
- background: #2271b1;
- color: #fff;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 14px;
-}
-
-.wpaw-preset-name {
- font-size: 16px;
- font-weight: 600;
- color: #1d2327;
- margin-bottom: 4px;
-}
-
-.wpaw-preset-cost {
- font-size: 13px;
- color: #646970;
- margin-bottom: 12px;
-}
-
-.wpaw-preset-models {
- font-size: 12px;
- color: #8c8f94;
- line-height: 1.6;
-}
-
-.wpaw-preset-badge {
- display: inline-block;
- padding: 2px 8px;
- background: #f0f6fc;
- color: #2271b1;
- border-radius: 4px;
- font-size: 11px;
- font-weight: 500;
- margin-left: 8px;
-}
-
-.wpaw-preset-badge.recommended {
- background: #d4edda;
- color: #155724;
-}
-
-/* ===========================
- FORM FIELDS
- =========================== */
-.wpaw-field-row {
- display: flex;
- align-items: flex-start;
- gap: 20px;
- padding: 16px 0;
- border-bottom: 1px solid #f0f0f0;
-}
-
-.wpaw-field-row:last-child {
- border-bottom: none;
- padding-bottom: 0;
-}
-
-.wpaw-field-label {
- flex: 0 0 200px;
- font-weight: 500;
- color: #1d2327;
- padding-top: 8px;
-}
-
-.wpaw-field-label small {
- display: block;
- font-weight: 400;
- color: #646970;
- font-size: 12px;
- margin-top: 4px;
-}
-
-.wpaw-field-input {
- flex: 1;
-}
-
-.wpaw-field-input input[type="text"],
-.wpaw-field-input input[type="password"],
-.wpaw-field-input input[type="number"],
-.wpaw-field-input select {
- width: 100%;
- max-width: 400px;
- padding: 8px 12px;
- border: 1px solid #d0d5dd;
- border-radius: 6px;
- font-size: 14px;
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.wpaw-field-input input:focus,
-.wpaw-field-input select:focus {
- border-color: #2271b1;
- box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
- outline: none;
-}
-
-.wpaw-field-input .description {
- margin-top: 8px;
- color: #646970;
- font-size: 13px;
-}
-
-.wpaw-field-input .description a {
- color: #2271b1;
- text-decoration: none;
-}
-
-.wpaw-field-input .description a:hover {
- text-decoration: underline;
-}
-
-/* ===========================
- TOGGLE SWITCHES
- =========================== */
-.wpaw-toggle {
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.wpaw-toggle-switch {
- position: relative;
- width: 44px;
- height: 24px;
- background: #c3c4c7;
- border-radius: 12px;
- cursor: pointer;
- transition: background 0.2s ease;
-}
-
-.wpaw-toggle-switch::after {
- content: '';
- position: absolute;
- top: 2px;
- left: 2px;
- width: 20px;
- height: 20px;
- background: #fff;
- border-radius: 50%;
- transition: transform 0.2s ease;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.wpaw-toggle input {
- display: none;
-}
-
-.wpaw-toggle input:checked + .wpaw-toggle-switch {
- background: #2271b1;
-}
-
-.wpaw-toggle input:checked + .wpaw-toggle-switch::after {
- transform: translateX(20px);
-}
-
-.wpaw-toggle-label {
- font-size: 14px;
- color: #1d2327;
-}
-
-/* ===========================
- BUDGET DISPLAY
- =========================== */
-.wpaw-budget-display {
- display: flex;
- align-items: center;
- gap: 20px;
- padding: 16px;
- background: #f8f9fa;
- border-radius: 8px;
- margin-bottom: 16px;
-}
-
-.wpaw-budget-stat {
- text-align: center;
-}
-
-.wpaw-budget-stat-value {
- font-size: 24px;
- font-weight: 600;
- color: #1d2327;
-}
-
-.wpaw-budget-stat-label {
- font-size: 12px;
- color: #646970;
- margin-top: 4px;
-}
-
-.wpaw-budget-bar-wrapper {
- flex: 1;
-}
-
-.wpaw-budget-bar-label {
- display: flex;
- justify-content: space-between;
- font-size: 12px;
- color: #646970;
- margin-bottom: 6px;
-}
-
-.wpaw-budget-bar-track {
- height: 8px;
- background: #e0e0e0;
- border-radius: 4px;
- overflow: hidden;
-}
-
-.wpaw-budget-bar-fill {
- height: 100%;
- background: linear-gradient(90deg, #4caf50, #66bb6a);
- border-radius: 4px;
- transition: width 0.5s ease;
-}
-
-.wpaw-budget-bar-fill.warning {
- background: linear-gradient(90deg, #ff9800, #ffa726);
-}
-
-.wpaw-budget-bar-fill.danger {
- background: linear-gradient(90deg, #f44336, #ef5350);
-}
-
-/* ===========================
- SUBMIT BUTTON
- =========================== */
-.wpaw-submit-section {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 20px;
- background: #f8f9fa;
- border-radius: 8px;
- margin-top: 24px;
-}
-
-.wpaw-submit-section .button-primary {
- padding: 10px 24px;
- font-size: 14px;
- height: auto;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border: none;
- border-radius: 6px;
- cursor: pointer;
- transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.wpaw-submit-section .button-primary:hover {
- transform: translateY(-1px);
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-}
-
-.wpaw-submit-info {
- color: #646970;
- font-size: 13px;
-}
-
-/* ===========================
- ALERTS & NOTICES
- =========================== */
-.wpaw-notice {
- padding: 12px 16px;
- border-radius: 6px;
- margin-bottom: 16px;
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.wpaw-notice-info {
- background: #f0f6fc;
- border: 1px solid #c5d9ed;
- color: #2271b1;
-}
-
-.wpaw-notice-warning {
- background: #fcf9e8;
- border: 1px solid #f0c33c;
- color: #826200;
-}
-
-.wpaw-notice-success {
- background: #edfaef;
- border: 1px solid #46b450;
- color: #2a6f31;
-}
-
-.wpaw-notice-error {
- background: #fcf0f1;
- border: 1px solid #d63638;
- color: #8a1f1f;
-}
-
-/* ===========================
- COST ESTIMATE BOX
- =========================== */
-.wpaw-cost-estimate-box {
- margin-top: 20px;
- padding: 16px 20px;
- background: linear-gradient(135deg, #f0f6fc 0%, #e8f4fd 100%);
- border: 1px solid #c5d9ed;
- border-radius: 8px;
- text-align: center;
-}
-
-.wpaw-cost-estimate-label {
- font-size: 13px;
- color: #646970;
- margin-bottom: 4px;
-}
-
-.wpaw-cost-estimate-value {
- font-size: 24px;
- font-weight: 700;
- color: #2271b1;
-}
-
-.wpaw-cost-estimate-note {
- margin: 8px 0 0;
- font-size: 12px;
- color: #8c8f94;
-}
-
-/* ===========================
- TAB CONTENT
- =========================== */
-.wpaw-tab-content {
- display: none;
-}
-
-.wpaw-tab-content.active {
- display: block;
-}
-
-/* ===========================
- GUIDE TABLES
- =========================== */
-.wpaw-guide-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 13px;
-}
-
-.wpaw-guide-table th,
-.wpaw-guide-table td {
- padding: 12px 16px;
- text-align: left;
- border-bottom: 1px solid #e0e0e0;
-}
-
-.wpaw-guide-table th {
- background: #f8f9fa;
- font-weight: 600;
- color: #1d2327;
-}
-
-.wpaw-guide-table tbody tr:hover {
- background: #f8f9fa;
-}
-
-.wpaw-guide-row-highlight {
- background: #f0f6fc !important;
-}
-
-.wpaw-guide-row-highlight:hover {
- background: #e5f0fa !important;
-}
-
-/* Model Badges */
-.wpaw-model-badge {
- display: inline-block;
- padding: 4px 10px;
- border-radius: 12px;
- font-size: 11px;
- font-weight: 500;
- white-space: nowrap;
-}
-
-.wpaw-model-badge.planning {
- background: #e8f4fd;
- color: #0073aa;
-}
-
-.wpaw-model-badge.execution {
- background: #fef3e8;
- color: #b54708;
-}
-
-.wpaw-model-badge.chat {
- background: #e8fdf0;
- color: #067647;
-}
-
-.wpaw-model-badge.search {
- background: #f3e8fd;
- color: #6941c6;
-}
-
-.wpaw-model-badge.image {
- background: #fde8f0;
- color: #c01574;
-}
-
-/* ===========================
- COST EXAMPLES
- =========================== */
-.wpaw-cost-examples {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: 16px;
-}
-
-.wpaw-cost-example {
- background: #f8f9fa;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
- padding: 16px;
-}
-
-.wpaw-cost-example-title {
- font-weight: 600;
- color: #1d2327;
- margin-bottom: 12px;
- font-size: 14px;
-}
-
-.wpaw-cost-example-breakdown {
- display: flex;
- flex-direction: column;
- gap: 6px;
- font-size: 13px;
- color: #646970;
- margin-bottom: 12px;
-}
-
-.wpaw-cost-example-total {
- font-size: 14px;
- color: #1d2327;
- padding-top: 12px;
- border-top: 1px solid #e0e0e0;
-}
-
-.wpaw-cost-example-total strong {
- color: #2271b1;
-}
-
-/* ===========================
- SELECT2 CUSTOMIZATION
- =========================== */
-.wpaw-settings-section .select2-container {
- width: 100% !important;
-}
-
-.wpaw-settings-section .select2-container--default .select2-selection--single {
- height: 38px;
- border: 1px solid #8c8f94;
- border-radius: 4px;
-}
-
-.wpaw-settings-section .select2-container--default .select2-selection--single .select2-selection__rendered {
- line-height: 36px;
- padding-left: 12px;
-}
-
-.wpaw-settings-section .select2-container--default .select2-selection--single .select2-selection__arrow {
- height: 36px;
-}
-
-.select2-dropdown {
- border: 1px solid #8c8f94;
- border-radius: 4px;
-}
-
-.select2-search--dropdown .select2-search__field {
- border: 1px solid #8c8f94;
- border-radius: 4px;
- padding: 8px 12px;
-}
-
-.select2-results__option--highlighted[aria-selected] {
- background-color: #2271b1 !important;
-}
-
-span.select2-search.select2-search--inline textarea {
- display: none;
-}
-
-ul.select2-results__options li {
- margin-bottom: 0px;
-}
-.select2-results__option {
- padding: 8px 12px;
-}
-.select2-results__option.select2-results__option--selectable.select2-results__option--selected{
- display: flex;
- justify-content: space-between;
-}
-.select2-results__option.select2-results__option--selectable.select2-results__option--selected:hover > span{
- color: white!important;
-}
-.select2-results__option.select2-results__option--selectable.select2-results__option--selected::after {
- content: 'SELECTED';
- font-size: smaller;
- font-family: ui-monospace, monospace;
- color: #868686;
-}
-.select2-results__option.select2-results__option--selectable.select2-results__option--selected:hover::after {
- color: #d6d6d6!important;
-}
-
-/* ===========================
- RESPONSIVE
- =========================== */
-@media (max-width: 782px) {
- .wpaw-preset-grid {
- grid-template-columns: 1fr;
- }
-
- .wpaw-field-row {
- flex-direction: column;
- gap: 8px;
- }
-
- .wpaw-field-label {
- flex: none;
- padding-top: 0;
- }
-
- .wpaw-settings-nav {
- flex-wrap: wrap;
- }
-}
-
-/* ===========================
- LANGUAGE PREFERENCES
- =========================== */
-.wpaw-language-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- gap: 12px;
- margin-bottom: 12px;
-}
-
-.wpaw-language-checkbox {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 10px 12px;
- border: 1px solid #dcdcde;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.2s ease;
- background: #fff;
-}
-
-.wpaw-language-checkbox:hover {
- border-color: #2271b1;
- background: #f6f7f7;
-}
-
-.wpaw-language-checkbox input[type="checkbox"] {
- margin: 0;
- cursor: pointer;
-}
-
-.wpaw-language-checkbox input[type="checkbox"]:checked + span {
- font-weight: 500;
- color: #2271b1;
-}
-
-.wpaw-custom-language-item {
- display: flex;
- gap: 8px;
- margin-bottom: 8px;
-}
-
-.wpaw-custom-language-item input[type="text"] {
- flex: 1;
- padding: 8px 12px;
- border: 1px solid #dcdcde;
- border-radius: 4px;
- font-size: 14px;
-}
-
-.wpaw-custom-language-item .wpaw-remove-language {
- padding: 8px 12px;
- background: #dc3232;
- color: #fff;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background 0.2s ease;
-}
-
-.wpaw-custom-language-item .wpaw-remove-language:hover {
- background: #a00;
-}
-
-#wpaw-add-custom-language {
- margin-top: 8px;
-}
-
-/* ===========================
- COST SHORTCUTS
- =========================== */
-.wpaw-cost-shortcuts {
- margin-top: 16px;
- padding-top: 16px;
- border-top: 1px solid #e0e0e0;
- text-align: center;
-}
-
-.wpaw-cost-shortcut-link {
- display: inline-flex;
- align-items: center;
- gap: 6px;
- padding: 8px 16px;
- background: #f0f6fc;
- border: 1px solid #0066cc;
- border-radius: 6px;
- color: #0066cc;
- text-decoration: none;
- font-weight: 500;
- transition: all 0.2s;
-}
-
-.wpaw-cost-shortcut-link:hover {
- background: #0066cc;
- color: #fff;
- transform: translateY(-1px);
-}
-
-.wpaw-cost-shortcut-link .dashicons {
- font-size: 18px;
- width: 18px;
- height: 18px;
-}
-
-/* ===========================
- COST STATS GRID
- =========================== */
-.wpaw-cost-stats-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: 16px;
- margin-bottom: 24px;
-}
-
-.wpaw-cost-stat-card {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border-radius: 12px;
- padding: 20px;
- text-align: center;
- color: #fff;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.wpaw-cost-stat-icon {
- font-size: 32px;
- margin-bottom: 8px;
-}
-
-.wpaw-cost-stat-value {
- font-size: 28px;
- font-weight: 700;
- margin-bottom: 4px;
-}
-
-.wpaw-cost-stat-label {
- font-size: 13px;
- opacity: 0.9;
-}
-
-/* ===========================
- COST FILTERS
- =========================== */
-.wpaw-cost-filters {
- background: #f9f9f9;
- padding: 20px;
- border-radius: 8px;
-}
-
-.wpaw-filter-row {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
- gap: 16px;
- align-items: end;
-}
-
-.wpaw-filter-field {
- display: flex;
- flex-direction: column;
- gap: 6px;
-}
-
-.wpaw-filter-field label {
- font-size: 13px;
- font-weight: 500;
- color: #1d2327;
-}
-
-.wpaw-filter-field input,
-.wpaw-filter-field select {
- padding: 6px 10px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 14px;
-}
-
-.wpaw-filter-actions {
- display: flex;
- gap: 8px;
- align-items: center;
-}
-
-/* ===========================
- COST LOG TABLE
- =========================== */
-.wpaw-cost-log-table-wrapper {
- overflow-x: auto;
- margin-top: 16px;
-}
-
-.wpaw-cost-log-table {
- width: 100%;
- border-collapse: collapse;
- background: #fff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.wpaw-cost-log-table thead {
- background: #f9f9f9;
- border-bottom: 2px solid #e0e0e0;
-}
-
-.wpaw-cost-log-table th {
- padding: 12px 16px;
- text-align: left;
- font-weight: 600;
- font-size: 13px;
- color: #1d2327;
- white-space: nowrap;
-}
-
-.wpaw-cost-log-table td {
- padding: 12px 16px;
- border-bottom: 1px solid #f0f0f0;
- font-size: 13px;
- color: #1d2327;
-}
-
-.wpaw-cost-log-table tbody tr:hover {
- background: #f9f9f9;
-}
-
-.wpaw-cost-log-table code {
- background: #f0f0f0;
- padding: 2px 6px;
- border-radius: 3px;
- font-size: 12px;
- font-family: 'Courier New', monospace;
-}
-
-.wpaw-removed-post {
- color: #999;
- font-style: italic;
-}
-
-/* ===========================
- PAGINATION
- =========================== */
-.wpaw-pagination {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 12px;
- margin-top: 24px;
- padding-top: 24px;
- border-top: 1px solid #e0e0e0;
-}
-
-.wpaw-pagination-info {
- padding: 6px 12px;
- background: #f0f0f0;
- border-radius: 4px;
- font-size: 13px;
- font-weight: 500;
-}
\ No newline at end of file
diff --git a/assets/css/agentic-bootstrap-custom.css b/assets/css/agentic-bootstrap-custom.css
deleted file mode 100644
index 5116bb3..0000000
--- a/assets/css/agentic-bootstrap-custom.css
+++ /dev/null
@@ -1,449 +0,0 @@
-/**
- * Agentic Vibe - Bootstrap Customization
- * Override Bootstrap defaults with our design system
- *
- * @package WP_Agentic_Writer
- * @since 0.2.0
- */
-
-/* Apply variables to settings wrapper */
-.wpaw-settings-v2-wrap {
- --bs-primary: var(--wpaw-primary);
- --bs-primary-rgb: 23, 162, 184;
- --bs-success: var(--wpaw-success);
- --bs-success-rgb: 40, 167, 69;
- --bs-warning: var(--wpaw-warning);
- --bs-warning-rgb: 255, 193, 7;
- --bs-danger: var(--wpaw-error);
- --bs-danger-rgb: 220, 53, 69;
- --bs-info: var(--wpaw-info);
- --bs-info-rgb: 23, 162, 184;
- --bs-body-bg: var(--wpaw-bg-primary);
- --bs-body-color: var(--wpaw-text-primary);
- --bs-border-color: var(--wpaw-border);
-
- background: var(--wpaw-bg-primary) !important;
- color: var(--wpaw-text-primary) !important;
-}
-
-/* Button Enhancements */
-.wpaw-settings-v2-wrap .btn {
- transition: all var(--wpaw-transition-fast);
- border-radius: var(--wpaw-radius-md);
- font-weight: 500;
- padding: 0.5rem 1rem;
-}
-
-.wpaw-settings-v2-wrap .btn:active {
- transform: scale(0.98);
-}
-
-.wpaw-settings-v2-wrap .btn:focus {
- box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
-}
-
-.wpaw-settings-v2-wrap .btn-sm {
- padding: 0.375rem 0.75rem;
- font-size: var(--wpaw-text-sm);
-}
-
-.wpaw-settings-v2-wrap .btn-primary {
- background: var(--wpaw-primary);
- border-color: var(--wpaw-primary);
-}
-
-.wpaw-settings-v2-wrap .btn-primary:hover {
- background: var(--wpaw-primary-dark);
- border-color: var(--wpaw-primary-dark);
- box-shadow: var(--wpaw-shadow-sm);
-}
-
-/* Form Controls */
-.wpaw-settings-v2-wrap .form-control,
-.wpaw-settings-v2-wrap .form-select {
- border-radius: var(--wpaw-radius-sm);
- border-color: var(--wpaw-border) !important;
- background: var(--wpaw-bg-tertiary) !important;
- color: var(--wpaw-text-primary) !important;
- transition: all var(--wpaw-transition-fast);
- font-size: var(--wpaw-text-base);
- max-width: unset !important;
-}
-
-.wpaw-settings-v2-wrap .form-control:focus,
-.wpaw-settings-v2-wrap .form-select:focus {
- border-color: var(--wpaw-primary) !important;
- box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25) !important;
- background: var(--wpaw-bg-tertiary) !important;
- color: var(--wpaw-text-primary) !important;
-}
-
-.wpaw-settings-v2-wrap .form-control::placeholder {
- color: var(--wpaw-text-tertiary);
- opacity: 0.7;
-}
-
-.wpaw-settings-v2-wrap .form-label {
- color: var(--wpaw-text-secondary);
- font-weight: 500;
- margin-bottom: var(--wpaw-space-sm);
-}
-
-.wpaw-settings-v2-wrap .form-text {
- color: var(--wpaw-text-tertiary);
- font-size: var(--wpaw-text-sm);
- font-family: var(--wpaw-font-mono);
-}
-
-/* Card Enhancements */
-.wpaw-settings-v2-wrap .card {
- border-radius: var(--wpaw-radius-md);
- border: 1px solid var(--wpaw-border);
- background: var(--wpaw-bg-secondary) !important;
- transition: all var(--wpaw-transition-normal);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.wpaw-settings-v2-wrap .card:hover {
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
- border-color: var(--wpaw-primary);
-}
-
-.wpaw-settings-v2-wrap .card-header {
- background: var(--wpaw-bg-tertiary) !important;
- border-bottom: 1px solid var(--wpaw-border);
- color: var(--wpaw-text-primary) !important;
- font-weight: 600;
-}
-
-.wpaw-settings-v2-wrap .card-body {
- background: var(--wpaw-bg-secondary) !important;
- color: var(--wpaw-text-primary) !important;
-}
-
-.wpaw-settings-v2-wrap .card-footer {
- background: var(--wpaw-bg-tertiary) !important;
- border-top: 1px solid var(--wpaw-border);
-}
-
-/* Badge Enhancements */
-.wpaw-settings-v2-wrap .badge {
- font-weight: 500;
- padding: 0.35em 0.65em;
- border-radius: var(--wpaw-radius-sm);
- font-size: 0.875em;
-}
-
-.wpaw-settings-v2-wrap .badge.bg-success {
- background: var(--wpaw-success) !important;
- color: white;
-}
-
-.wpaw-settings-v2-wrap .badge.bg-warning {
- background: var(--wpaw-warning) !important;
- color: white;
-}
-
-.wpaw-settings-v2-wrap .badge.bg-danger {
- background: var(--wpaw-error) !important;
- color: white;
-}
-
-.wpaw-settings-v2-wrap .badge.bg-info {
- background: var(--wpaw-info) !important;
- color: white;
-}
-
-.wpaw-settings-v2-wrap .badge.bg-primary {
- background: var(--wpaw-primary) !important;
- color: white;
-}
-
-/* Alert Enhancements */
-.wpaw-settings-v2-wrap .alert {
- border-radius: var(--wpaw-radius-md);
- border: 1px solid;
- font-size: var(--wpaw-text-sm);
- background: var(--wpaw-bg-secondary) !important;
-}
-
-.wpaw-settings-v2-wrap .alert-success {
- border-color: var(--wpaw-success);
- color: var(--wpaw-text-primary) !important;
- border-left: 4px solid var(--wpaw-success);
-}
-
-.wpaw-settings-v2-wrap .alert-warning {
- border-color: var(--wpaw-warning);
- color: var(--wpaw-text-primary) !important;
- border-left: 4px solid var(--wpaw-warning);
-}
-
-.wpaw-settings-v2-wrap .alert-danger {
- border-color: var(--wpaw-error);
- color: var(--wpaw-text-primary) !important;
- border-left: 4px solid var(--wpaw-error);
-}
-
-.wpaw-settings-v2-wrap .alert-info {
- border-color: var(--wpaw-info);
- color: var(--wpaw-text-primary) !important;
- border-left: 4px solid var(--wpaw-info);
-}
-
-/* Table Enhancements */
-.wpaw-settings-v2-wrap .table {
- color: var(--wpaw-text-primary) !important;
- font-size: var(--wpaw-text-sm);
- background: transparent !important;
-}
-
-.wpaw-settings-v2-wrap .table thead {
- background: var(--wpaw-bg-tertiary) !important;
- color: var(--wpaw-text-secondary) !important;
- font-weight: 600;
- text-transform: uppercase;
- font-size: var(--wpaw-text-xs);
- letter-spacing: 0.05em;
-}
-
-.wpaw-settings-v2-wrap .table tbody tr {
- transition: background-color var(--wpaw-transition-fast);
- border-bottom: 1px solid var(--wpaw-border);
- background: var(--wpaw-bg-secondary) !important;
-}
-
-.wpaw-settings-v2-wrap .table tbody tr:hover {
- background: var(--wpaw-bg-tertiary) !important;
-}
-
-.wpaw-settings-v2-wrap .table-light {
- background: var(--wpaw-bg-tertiary) !important;
- color: var(--wpaw-text-primary) !important;
-}
-
-.wpaw-settings-v2-wrap .table-hover tbody tr:hover {
- background: var(--wpaw-bg-tertiary) !important;
-}
-
-.wpaw-settings-v2-wrap .table-responsive {
- border-radius: var(--wpaw-radius-md);
- border: 1px solid var(--wpaw-border);
- overflow: hidden;
- background: var(--wpaw-bg-secondary) !important;
-}
-
-/* Nav Tabs/Pills Enhancements */
-.wpaw-settings-v2-wrap .nav-tabs {
- border-bottom: 2px solid var(--wpaw-border);
-}
-
-.wpaw-settings-v2-wrap .nav-tabs .nav-link {
- border: none;
- color: var(--wpaw-text-secondary) !important;
- font-weight: 500;
- border-bottom: 3px solid transparent;
- transition: all var(--wpaw-transition-fast);
- padding: 0.75rem 1.25rem;
- background: transparent !important;
-}
-
-.wpaw-settings-v2-wrap .nav-tabs .nav-link:hover {
- color: var(--wpaw-primary) !important;
- background: var(--wpaw-bg-secondary) !important;
- border-color: transparent;
-}
-
-.wpaw-settings-v2-wrap .nav-tabs .nav-link.active {
- background: transparent !important;
- color: var(--wpaw-primary) !important;
- border-bottom-color: var(--wpaw-primary);
-}
-
-.wpaw-settings-v2-wrap .nav-pills .nav-link {
- color: var(--wpaw-text-secondary) !important;
- border-radius: var(--wpaw-radius-md);
- padding: 0.75rem 1.25rem;
- font-weight: 500;
- transition: all var(--wpaw-transition-fast);
- background: transparent !important;
-}
-
-.wpaw-settings-v2-wrap .nav-pills .nav-link:hover:not(.active) {
- background: var(--wpaw-bg-secondary) !important;
- color: var(--wpaw-text-primary) !important;
-}
-
-.wpaw-settings-v2-wrap .nav-pills .nav-link.active {
- background: var(--wpaw-primary) !important;
- color: white !important;
-}
-
-/* Tab Content Animation */
-.wpaw-settings-v2-wrap .tab-content {
- animation: wpawFadeInTab 200ms ease-out;
-}
-
-@keyframes wpawFadeInTab {
- from {
- opacity: 0;
- transform: translateY(4px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-/* Progress Bar */
-.wpaw-settings-v2-wrap .progress {
- height: 8px;
- border-radius: var(--wpaw-radius-full);
- background: var(--wpaw-bg-tertiary);
-}
-
-.wpaw-settings-v2-wrap .progress-bar {
- background: var(--wpaw-primary);
- border-radius: var(--wpaw-radius-full);
- transition: width var(--wpaw-transition-slow);
-}
-
-/* Modal Enhancements */
-.wpaw-settings-v2-wrap .modal-content {
- border-radius: var(--wpaw-radius-lg);
- border: 1px solid var(--wpaw-border);
- background: var(--wpaw-bg-primary);
- box-shadow: var(--wpaw-shadow-xl);
-}
-
-.wpaw-settings-v2-wrap .modal-header {
- background: var(--wpaw-bg-secondary);
- border-bottom: 1px solid var(--wpaw-border);
- border-radius: var(--wpaw-radius-lg) var(--wpaw-radius-lg) 0 0;
-}
-
-.wpaw-settings-v2-wrap .modal-body {
- color: var(--wpaw-text-primary);
-}
-
-.wpaw-settings-v2-wrap .modal-footer {
- background: var(--wpaw-bg-secondary);
- border-top: 1px solid var(--wpaw-border);
- border-radius: 0 0 var(--wpaw-radius-lg) var(--wpaw-radius-lg);
-}
-
-/* Dropdown Enhancements */
-.wpaw-settings-v2-wrap .dropdown-menu {
- border-radius: var(--wpaw-radius-md);
- border: 1px solid var(--wpaw-border);
- background: var(--wpaw-bg-primary);
- box-shadow: var(--wpaw-shadow-lg);
- padding: var(--wpaw-space-sm);
-}
-
-.wpaw-settings-v2-wrap .dropdown-item {
- border-radius: var(--wpaw-radius-sm);
- color: var(--wpaw-text-primary);
- transition: all var(--wpaw-transition-fast);
- padding: 0.5rem 1rem;
-}
-
-.wpaw-settings-v2-wrap .dropdown-item:hover {
- background: var(--wpaw-bg-secondary);
- color: var(--wpaw-primary);
-}
-
-.wpaw-settings-v2-wrap .dropdown-item.active {
- background: var(--wpaw-primary);
- color: white;
-}
-
-/* Toast Notifications */
-.wpaw-settings-v2-wrap .toast {
- border-radius: var(--wpaw-radius-md);
- border: 1px solid var(--wpaw-border);
- background: var(--wpaw-bg-primary);
- box-shadow: var(--wpaw-shadow-lg);
-}
-
-.wpaw-settings-v2-wrap .toast-header {
- background: var(--wpaw-bg-secondary);
- border-bottom: 1px solid var(--wpaw-border);
- color: var(--wpaw-text-primary);
-}
-
-.wpaw-settings-v2-wrap .toast-body {
- color: var(--wpaw-text-primary);
-}
-
-/* Pagination */
-.wpaw-settings-v2-wrap .pagination .page-link {
- color: var(--wpaw-text-primary);
- background: var(--wpaw-bg-primary);
- border: 1px solid var(--wpaw-border);
- transition: all var(--wpaw-transition-fast);
- border-radius: var(--wpaw-radius-sm);
- margin: 0 2px;
-}
-
-.wpaw-settings-v2-wrap .pagination .page-link:hover {
- background: var(--wpaw-bg-secondary);
- border-color: var(--wpaw-primary);
- color: var(--wpaw-primary);
-}
-
-.wpaw-settings-v2-wrap .pagination .page-item.active .page-link {
- background: var(--wpaw-primary);
- border-color: var(--wpaw-primary);
- color: white;
-}
-
-.wpaw-settings-v2-wrap .pagination .page-item.disabled .page-link {
- background: var(--wpaw-bg-secondary);
- border-color: var(--wpaw-border);
- color: var(--wpaw-text-tertiary);
- opacity: 0.5;
-}
-
-/* Spinner */
-.wpaw-settings-v2-wrap .spinner-border {
- border-color: var(--wpaw-primary);
- border-right-color: transparent;
-}
-
-/* Input Group */
-.wpaw-settings-v2-wrap .input-group-text {
- background: var(--wpaw-bg-secondary);
- border-color: var(--wpaw-border);
- color: var(--wpaw-text-secondary);
-}
-
-/* List Group */
-.wpaw-settings-v2-wrap .list-group-item {
- background: var(--wpaw-bg-primary);
- border-color: var(--wpaw-border);
- color: var(--wpaw-text-primary);
-}
-
-.wpaw-settings-v2-wrap .list-group-item:hover {
- background: var(--wpaw-bg-secondary);
-}
-
-.wpaw-settings-v2-wrap .list-group-item.active {
- background: var(--wpaw-primary);
- border-color: var(--wpaw-primary);
- color: white;
-}
-
-.wpaw-settings-v2-wrap input[type=checkbox]:checked::before {
- filter: brightness(0) invert(1);
-}
-
-.wpaw-settings-v2-wrap input[type=checkbox]:checked ~ label {
- color: white !important;
-}
-
-.wpaw-settings-v2-wrap .preset-card .card-body {
- cursor: pointer;
- border-radius: inherit;
-}
\ No newline at end of file
diff --git a/assets/css/agentic-components.css b/assets/css/agentic-components.css
index 769154c..db95645 100644
--- a/assets/css/agentic-components.css
+++ b/assets/css/agentic-components.css
@@ -11,57 +11,57 @@
============================================ */
.wpaw-stat-card {
- background: var(--wpaw-bg-secondary);
- padding: var(--wpaw-space-md);
- border-radius: var(--wpaw-radius-md);
- border: 1px solid var(--wpaw-border);
- border-left: 3px solid var(--wpaw-primary);
- transition: all var(--wpaw-transition-normal);
- height: 100%;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ background: var(--wpaw-bg-secondary);
+ padding: var(--wpaw-space-md);
+ border-radius: var(--wpaw-radius-md);
+ border: 1px solid var(--wpaw-border);
+ border-left: 3px solid var(--wpaw-primary);
+ transition: all var(--wpaw-transition-normal);
+ height: 100%;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.wpaw-stat-card:hover {
- background: var(--wpaw-bg-tertiary);
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
- border-left-width: 4px;
+ background: var(--wpaw-bg-tertiary);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ border-left-width: 4px;
}
.wpaw-stat-label {
- font-size: var(--wpaw-text-xs);
- text-transform: uppercase;
- font-family: var(--wpaw-font-mono);
- letter-spacing: 0.05em;
- color: var(--wpaw-text-tertiary);
- margin-bottom: var(--wpaw-space-sm);
- font-weight: 600;
- display: block;
+ font-size: var(--wpaw-text-xs);
+ text-transform: uppercase;
+ font-family: var(--wpaw-font-mono);
+ letter-spacing: 0.05em;
+ color: var(--wpaw-text-tertiary);
+ margin-bottom: var(--wpaw-space-sm);
+ font-weight: 600;
+ display: block;
}
.wpaw-stat-value {
- font-size: var(--wpaw-text-3xl);
- font-weight: 700;
- color: var(--wpaw-primary);
- font-family: var(--wpaw-font-sans);
- line-height: 1.2;
- display: block;
+ font-size: var(--wpaw-text-3xl);
+ font-weight: 700;
+ color: var(--wpaw-primary);
+ font-family: var(--wpaw-font-sans);
+ line-height: 1.2;
+ display: block;
}
.wpaw-stat-value.text-success {
- color: var(--wpaw-success);
+ color: var(--wpaw-success);
}
.wpaw-stat-value.text-warning {
- color: var(--wpaw-warning);
+ color: var(--wpaw-warning);
}
.wpaw-stat-value.text-danger {
- color: var(--wpaw-error);
+ color: var(--wpaw-error);
}
.wpaw-stat-value.text-info {
- color: var(--wpaw-info);
+ color: var(--wpaw-info);
}
/* ============================================
@@ -69,38 +69,38 @@
============================================ */
.wpaw-status-badge {
- display: inline-flex;
- align-items: center;
- gap: var(--wpaw-space-xs);
- padding: var(--wpaw-space-xs) var(--wpaw-space-sm);
- border-radius: var(--wpaw-radius-sm);
- font-size: var(--wpaw-text-sm);
- font-weight: 500;
- transition: all var(--wpaw-transition-fast);
+ display: inline-flex;
+ align-items: center;
+ gap: var(--wpaw-space-xs);
+ padding: var(--wpaw-space-xs) var(--wpaw-space-sm);
+ border-radius: var(--wpaw-radius-sm);
+ font-size: var(--wpaw-text-sm);
+ font-weight: 500;
+ transition: all var(--wpaw-transition-fast);
}
.wpaw-status-online {
- background: rgba(16, 185, 129, 0.1);
- color: var(--wpaw-success);
- border: 1px solid var(--wpaw-success);
+ background: rgba(16, 185, 129, 0.1);
+ color: var(--wpaw-success);
+ border: 1px solid var(--wpaw-success);
}
.wpaw-status-offline {
- background: rgba(239, 68, 68, 0.1);
- color: var(--wpaw-error);
- border: 1px solid var(--wpaw-error);
+ background: rgba(239, 68, 68, 0.1);
+ color: var(--wpaw-error);
+ border: 1px solid var(--wpaw-error);
}
.wpaw-status-processing {
- background: rgba(59, 130, 246, 0.1);
- color: var(--wpaw-primary);
- border: 1px solid var(--wpaw-primary);
+ background: rgba(59, 130, 246, 0.1);
+ color: var(--wpaw-primary);
+ border: 1px solid var(--wpaw-primary);
}
.wpaw-status-warning {
- background: rgba(245, 158, 11, 0.1);
- color: var(--wpaw-warning);
- border: 1px solid var(--wpaw-warning);
+ background: rgba(245, 158, 11, 0.1);
+ color: var(--wpaw-warning);
+ border: 1px solid var(--wpaw-warning);
}
/* ============================================
@@ -109,29 +109,30 @@
.wpaw-code,
.wpaw-settings-v2-wrap code {
- font-family: var(--wpaw-font-mono);
- background: var(--wpaw-bg-secondary);
- padding: 2px 6px;
- border-radius: var(--wpaw-radius-sm);
- font-size: 0.85em;
- color: var(--wpaw-text-primary);
- border: 1px solid var(--wpaw-border);
+ font-family: var(--wpaw-font-mono);
+ background: var(--wpaw-bg-secondary);
+ padding: 2px 6px;
+ border-radius: var(--wpaw-radius-sm);
+ font-size: 0.85em;
+ color: var(--wpaw-text-primary);
+ border: 1px solid var(--wpaw-border);
}
-.wpaw-code-muted, .text-muted {
- color: var(--wpaw-text-tertiary);
- font-family: var(--wpaw-font-mono);
+.wpaw-code-muted,
+.text-muted {
+ color: var(--wpaw-text-tertiary);
+ font-family: var(--wpaw-font-mono);
}
.wpaw-code-block {
- font-family: var(--wpaw-font-mono);
- background: var(--wpaw-bg-secondary);
- padding: var(--wpaw-space-md);
- border-radius: var(--wpaw-radius-md);
- border: 1px solid var(--wpaw-border);
- overflow-x: auto;
- font-size: var(--wpaw-text-sm);
- line-height: 1.6;
+ font-family: var(--wpaw-font-mono);
+ background: var(--wpaw-bg-secondary);
+ padding: var(--wpaw-space-md);
+ border-radius: var(--wpaw-radius-md);
+ border: 1px solid var(--wpaw-border);
+ overflow-x: auto;
+ font-size: var(--wpaw-text-sm);
+ line-height: 1.6;
}
/* ============================================
@@ -139,17 +140,17 @@
============================================ */
.wpaw-agentic-header {
- margin-bottom: var(--wpaw-space-xl);
+ margin-bottom: var(--wpaw-space-xl);
}
.wpaw-agentic-header h1 {
- color: var(--wpaw-text-primary);
- margin-bottom: var(--wpaw-space-xs);
+ color: var(--wpaw-text-primary);
+ margin-bottom: var(--wpaw-space-xs);
}
.wpaw-agentic-header .text-muted {
- color: var(--wpaw-text-secondary);
- font-family: var(--wpaw-font-mono);
+ color: var(--wpaw-text-secondary);
+ font-family: var(--wpaw-font-mono);
}
/* ============================================
@@ -157,84 +158,84 @@
============================================ */
.wpaw-model-card {
- background: var(--wpaw-bg-secondary);
- border: 1px solid var(--wpaw-border);
- border-radius: var(--wpaw-radius-md);
- padding: var(--wpaw-space-lg);
- transition: all var(--wpaw-transition-normal);
- height: 100%;
+ background: var(--wpaw-bg-secondary);
+ border: 1px solid var(--wpaw-border);
+ border-radius: var(--wpaw-radius-md);
+ padding: var(--wpaw-space-lg);
+ transition: all var(--wpaw-transition-normal);
+ height: 100%;
}
.wpaw-model-card:hover {
- border-color: var(--wpaw-primary);
- box-shadow: var(--wpaw-shadow-md);
- transform: translateY(-2px);
+ border-color: var(--wpaw-primary);
+ box-shadow: var(--wpaw-shadow-md);
+ transform: translateY(-2px);
}
.wpaw-model-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: var(--wpaw-space-md);
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: var(--wpaw-space-md);
}
.wpaw-model-header h5 {
- margin-bottom: var(--wpaw-space-xs);
- color: var(--wpaw-text-primary);
- font-weight: 600;
+ margin-bottom: var(--wpaw-space-xs);
+ color: var(--wpaw-text-primary);
+ font-weight: 600;
}
.wpaw-model-header p {
- font-size: var(--wpaw-text-sm);
- color: var(--wpaw-text-tertiary);
- font-family: var(--wpaw-font-mono);
- margin: 0;
+ font-size: var(--wpaw-text-sm);
+ color: var(--wpaw-text-tertiary);
+ font-family: var(--wpaw-font-mono);
+ margin: 0;
}
.wpaw-model-stat {
- margin-top: var(--wpaw-space-md);
+ margin-top: var(--wpaw-space-md);
}
.wpaw-model-stat label {
- font-size: var(--wpaw-text-xs);
- text-transform: uppercase;
- color: var(--wpaw-text-tertiary);
- margin-bottom: var(--wpaw-space-xs);
- font-weight: 600;
+ font-size: var(--wpaw-text-xs);
+ text-transform: uppercase;
+ color: var(--wpaw-text-tertiary);
+ margin-bottom: var(--wpaw-space-xs);
+ font-weight: 600;
}
.wpaw-model-metrics {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: var(--wpaw-space-md);
- padding-top: var(--wpaw-space-md);
- border-top: 1px solid var(--wpaw-border);
- margin-top: var(--wpaw-space-md);
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: var(--wpaw-space-md);
+ padding-top: var(--wpaw-space-md);
+ border-top: 1px solid var(--wpaw-border);
+ margin-top: var(--wpaw-space-md);
}
.wpaw-metric {
- text-align: center;
+ text-align: center;
}
.wpaw-metric-label {
- display: block;
- font-size: var(--wpaw-text-xs);
- text-transform: uppercase;
- color: var(--wpaw-text-tertiary);
- margin-bottom: var(--wpaw-space-xs);
- font-weight: 600;
+ display: block;
+ font-size: var(--wpaw-text-xs);
+ text-transform: uppercase;
+ color: var(--wpaw-text-tertiary);
+ margin-bottom: var(--wpaw-space-xs);
+ font-weight: 600;
}
.wpaw-metric-value {
- display: block;
- font-size: var(--wpaw-text-xl);
- font-weight: 600;
- color: var(--wpaw-primary);
- font-family: var(--wpaw-font-sans);
+ display: block;
+ font-size: var(--wpaw-text-xl);
+ font-weight: 600;
+ color: var(--wpaw-primary);
+ font-family: var(--wpaw-font-sans);
}
.wpaw-model-actions {
- margin-top: var(--wpaw-space-md);
+ margin-top: var(--wpaw-space-md);
}
/* ============================================
@@ -242,40 +243,40 @@
============================================ */
.wpaw-cost-table {
- font-size: var(--wpaw-text-sm);
+ font-size: var(--wpaw-text-sm);
}
.wpaw-cost-table thead {
- background: var(--wpaw-bg-secondary);
- font-weight: 600;
- text-transform: uppercase;
- font-size: var(--wpaw-text-xs);
- letter-spacing: 0.05em;
+ background: var(--wpaw-bg-secondary);
+ font-weight: 600;
+ text-transform: uppercase;
+ font-size: var(--wpaw-text-xs);
+ letter-spacing: 0.05em;
}
.wpaw-cost-table tbody tr {
- transition: background-color var(--wpaw-transition-fast);
- border-left: 3px solid transparent;
+ transition: background-color var(--wpaw-transition-fast);
+ border-left: 3px solid transparent;
}
.wpaw-cost-table tbody tr:hover {
- background: var(--wpaw-bg-secondary) !important;
+ background: var(--wpaw-bg-secondary) !important;
}
.wpaw-cost-table tbody tr.row-success {
- border-left-color: var(--wpaw-success);
+ border-left-color: var(--wpaw-success);
}
.wpaw-cost-table tbody tr.row-warning {
- border-left-color: var(--wpaw-warning);
+ border-left-color: var(--wpaw-warning);
}
.wpaw-cost-table tbody tr.row-error {
- border-left-color: var(--wpaw-error);
+ border-left-color: var(--wpaw-error);
}
.wpaw-cost-table .wpaw-code {
- font-size: 0.85em;
+ font-size: 0.85em;
}
/* ============================================
@@ -284,91 +285,100 @@
/* Pulse Animation */
@keyframes wpaw-pulse {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.5; }
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
}
.wpaw-animate-pulse {
- animation: wpaw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+ animation: wpaw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Spin Animation */
@keyframes wpaw-spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
}
.wpaw-animate-spin {
- animation: wpaw-spin 2s linear infinite;
+ animation: wpaw-spin 2s linear infinite;
}
/* Fade In */
@keyframes wpaw-fade-in {
- from {
- opacity: 0;
- transform: translateY(8px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ from {
+ opacity: 0;
+ transform: translateY(8px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
.wpaw-fade-in {
- animation: wpaw-fade-in 300ms ease-out;
+ animation: wpaw-fade-in 300ms ease-out;
}
/* Slide In Right */
@keyframes wpaw-slide-in-right {
- from {
- opacity: 0;
- transform: translateX(20px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
+ from {
+ opacity: 0;
+ transform: translateX(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
.wpaw-slide-in-right {
- animation: wpaw-slide-in-right 300ms ease-out;
+ animation: wpaw-slide-in-right 300ms ease-out;
}
/* Scale In */
@keyframes wpaw-scale-in {
- from {
- opacity: 0;
- transform: scale(0.95);
- }
- to {
- opacity: 1;
- transform: scale(1);
- }
+ from {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
}
.wpaw-scale-in {
- animation: wpaw-scale-in 200ms ease-out;
+ animation: wpaw-scale-in 200ms ease-out;
}
/* Shimmer Loading */
@keyframes wpaw-shimmer {
- 0% {
- background-position: -1000px 0;
- }
- 100% {
- background-position: 1000px 0;
- }
+ 0% {
+ background-position: -1000px 0;
+ }
+ 100% {
+ background-position: 1000px 0;
+ }
}
.wpaw-shimmer {
- background: linear-gradient(
- 90deg,
- var(--wpaw-bg-secondary) 0%,
- var(--wpaw-bg-tertiary) 50%,
- var(--wpaw-bg-secondary) 100%
- );
- background-size: 1000px 100%;
- animation: wpaw-shimmer 2s infinite;
+ background: linear-gradient(
+ 90deg,
+ var(--wpaw-bg-secondary) 0%,
+ var(--wpaw-bg-tertiary) 50%,
+ var(--wpaw-bg-secondary) 100%
+ );
+ background-size: 1000px 100%;
+ animation: wpaw-shimmer 2s infinite;
}
/* ============================================
@@ -377,112 +387,112 @@
/* Hover Lift */
.wpaw-hover-lift {
- transition: transform var(--wpaw-transition-normal);
+ transition: transform var(--wpaw-transition-normal);
}
.wpaw-hover-lift:hover {
- transform: translateY(-4px);
+ transform: translateY(-4px);
}
/* Glow Effect */
.wpaw-glow-primary {
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
- transition: box-shadow var(--wpaw-transition-normal);
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+ transition: box-shadow var(--wpaw-transition-normal);
}
.wpaw-glow-primary:hover {
- box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
+ box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
}
/* Smooth Height Transition */
.wpaw-smooth-height {
- transition: height var(--wpaw-transition-slow);
- overflow: hidden;
+ transition: height var(--wpaw-transition-slow);
+ overflow: hidden;
}
/* Icon Dot */
.wpaw-icon-dot {
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: currentColor;
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: currentColor;
}
/* Loading Skeleton */
.wpaw-skeleton {
- background: var(--wpaw-bg-secondary);
- border-radius: var(--wpaw-radius-sm);
- animation: wpaw-shimmer 2s infinite;
+ background: var(--wpaw-bg-secondary);
+ border-radius: var(--wpaw-radius-sm);
+ animation: wpaw-shimmer 2s infinite;
}
.wpaw-skeleton-text {
- height: 1em;
- margin-bottom: 0.5em;
+ height: 1em;
+ margin-bottom: 0.5em;
}
.wpaw-skeleton-heading {
- height: 2em;
- margin-bottom: 1em;
+ height: 2em;
+ margin-bottom: 1em;
}
/* Divider */
.wpaw-divider {
- height: 1px;
- background: var(--wpaw-border);
- margin: var(--wpaw-space-lg) 0;
+ height: 1px;
+ background: var(--wpaw-border);
+ margin: var(--wpaw-space-lg) 0;
}
.wpaw-divider-vertical {
- width: 1px;
- background: var(--wpaw-border);
- margin: 0 var(--wpaw-space-md);
+ width: 1px;
+ background: var(--wpaw-border);
+ margin: 0 var(--wpaw-space-md);
}
/* Section Spacing */
.wpaw-section {
- margin-bottom: var(--wpaw-space-2xl);
+ margin-bottom: var(--wpaw-space-2xl);
}
.wpaw-section-header {
- margin-bottom: var(--wpaw-space-lg);
+ margin-bottom: var(--wpaw-space-lg);
}
.wpaw-section-title {
- font-size: var(--wpaw-text-2xl);
- font-weight: 600;
- color: var(--wpaw-text-primary);
- margin-bottom: var(--wpaw-space-xs);
+ font-size: var(--wpaw-text-2xl);
+ font-weight: 600;
+ color: var(--wpaw-text-primary);
+ margin-bottom: var(--wpaw-space-xs);
}
.wpaw-section-description {
- font-size: var(--wpaw-text-sm);
- color: var(--wpaw-text-secondary);
+ font-size: var(--wpaw-text-sm);
+ color: var(--wpaw-text-secondary);
}
/* Empty State */
.wpaw-empty-state {
- text-align: center;
- padding: var(--wpaw-space-3xl) var(--wpaw-space-xl);
- color: var(--wpaw-text-tertiary);
+ text-align: center;
+ padding: var(--wpaw-space-3xl) var(--wpaw-space-xl);
+ color: var(--wpaw-text-tertiary);
}
.wpaw-empty-state-icon {
- font-size: 3rem;
- margin-bottom: var(--wpaw-space-md);
- opacity: 0.5;
+ font-size: 3rem;
+ margin-bottom: var(--wpaw-space-md);
+ opacity: 0.5;
}
.wpaw-empty-state-title {
- font-size: var(--wpaw-text-lg);
- font-weight: 600;
- color: var(--wpaw-text-secondary);
- margin-bottom: var(--wpaw-space-sm);
+ font-size: var(--wpaw-text-lg);
+ font-weight: 600;
+ color: var(--wpaw-text-secondary);
+ margin-bottom: var(--wpaw-space-sm);
}
.wpaw-empty-state-description {
- font-size: var(--wpaw-text-sm);
- color: var(--wpaw-text-tertiary);
+ font-size: var(--wpaw-text-sm);
+ color: var(--wpaw-text-tertiary);
}
/* ============================================
@@ -490,22 +500,22 @@
============================================ */
@media (max-width: 768px) {
- .wpaw-stat-card {
- margin-bottom: var(--wpaw-space-md);
- }
-
- .wpaw-model-metrics {
- grid-template-columns: 1fr;
- gap: var(--wpaw-space-sm);
- }
-
- .wpaw-section {
- margin-bottom: var(--wpaw-space-xl);
- }
-
- .wpaw-stat-value {
- font-size: var(--wpaw-text-2xl);
- }
+ .wpaw-stat-card {
+ margin-bottom: var(--wpaw-space-md);
+ }
+
+ .wpaw-model-metrics {
+ grid-template-columns: 1fr;
+ gap: var(--wpaw-space-sm);
+ }
+
+ .wpaw-section {
+ margin-bottom: var(--wpaw-space-xl);
+ }
+
+ .wpaw-stat-value {
+ font-size: var(--wpaw-text-2xl);
+ }
}
/* ============================================
@@ -513,60 +523,102 @@
============================================ */
@media print {
- .wpaw-settings-v2-wrap {
- background: white;
- color: black;
- }
-
- .wpaw-stat-card,
- .wpaw-model-card {
- break-inside: avoid;
- box-shadow: none;
- border: 1px solid #ddd;
- }
-
- .wpaw-animate-pulse,
- .wpaw-animate-spin {
- animation: none;
- }
+ .wpaw-settings-v2-wrap {
+ background: white;
+ color: black;
+ }
+
+ .wpaw-stat-card,
+ .wpaw-model-card {
+ break-inside: avoid;
+ box-shadow: none;
+ border: 1px solid #ddd;
+ }
+
+ .wpaw-animate-pulse,
+ .wpaw-animate-spin {
+ animation: none;
+ }
}
/* GEO Score Indicator */
.wpaw-geo-indicator {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 6px 16px;
- background: var(--wpaw-bg-secondary);
- border-top: 1px solid var(--wpaw-border);
- font-size: var(--wpaw-text-sm);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 16px;
+ background: var(--wpaw-bg-secondary);
+ border-top: 1px solid var(--wpaw-border);
+ font-size: var(--wpaw-text-sm);
}
.wpaw-geo-score {
- font-weight: 600;
+ font-weight: 600;
}
.wpaw-geo-score.excellent {
- color: var(--wpaw-success);
+ color: var(--wpaw-success);
}
.wpaw-geo-score.good {
- color: var(--wpaw-info);
+ color: var(--wpaw-info);
}
.wpaw-geo-score.fair {
- color: var(--wpaw-warning);
+ color: var(--wpaw-warning);
}
.wpaw-geo-score.poor {
- color: var(--wpaw-error);
+ color: var(--wpaw-error);
}
.wpaw-geo-eligible {
- background: var(--wpaw-success);
- color: #000;
- font-size: 10px;
- font-weight: 600;
- padding: 2px 6px;
- border-radius: 4px;
+ background: var(--wpaw-success);
+ color: #000;
+ font-size: 10px;
+ font-weight: 600;
+ padding: 2px 6px;
+ border-radius: 4px;
+}
+
+/* Session edit-lock banner (multi-tab safety) */
+.wpaw-session-lock-banner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ padding: 8px 12px;
+ margin: 0 0 4px;
+ background: var(--wpaw-warning-bg, #fef3cd);
+ border: 1px solid var(--wpaw-warning-border, #ffc107);
+ border-radius: 6px;
+ font-size: 12px;
+ line-height: 1.4;
+ color: var(--wpaw-warning-text, #856404);
+}
+
+.dark-theme .wpaw-session-lock-banner {
+ background: rgba(255, 193, 7, 0.12);
+ border-color: rgba(255, 193, 7, 0.3);
+ color: #ffc107;
+}
+
+.dark-theme .wpaw-session-lock-banner button {
+ color: #ffc107;
+ background-color: unset;
+ border: 1px solid #ffc107;
+ outline: unset !important;
+ box-shadow: unset !important;
+}
+
+.dark-theme .wpaw-session-lock-banner button:is(:hover, :focus) {
+ color: #2c3137 !important;
+ background-color: #ffc107 !important;
+ outline: unset !important;
+ box-shadow: unset !important;
+}
+
+.wpaw-session-lock-takeover {
+ flex-shrink: 0;
+ white-space: nowrap;
}
diff --git a/assets/css/agentic-sidebar-dark.css b/assets/css/agentic-sidebar-dark.css
new file mode 100644
index 0000000..49f2492
--- /dev/null
+++ b/assets/css/agentic-sidebar-dark.css
@@ -0,0 +1,2655 @@
+/**
+ * WP Agentic Writer — Dark Sidebar Override (Stitch Design System)
+ *
+ * This file is loaded AFTER agentic-sidebar.css to override the light theme
+ * with a dark sidebar that matches the Stitch design references.
+ *
+ * The sidebar is ALWAYS dark (--aw-inverse-surface: #2c3137).
+ * All text, borders, inputs, and interactive elements are overridden
+ * for dark-context legibility.
+ *
+ * Three reference patterns:
+ * Pattern 1 — Welcome/Empty Chat
+ * Pattern 2 — Clarity Quiz (Dark)
+ * Pattern 3 — Executing/Writing (Dark + animated)
+ *
+ * @package WP_Agentic_Writer
+ * @since 0.4.0
+ */
+
+/* =========================================================================
+ 0. DARK THEME TOKEN OVERRIDES
+ ========================================================================= */
+
+#wp-agentic-writer\:wp-agentic-writer {
+ --aw-dark-surface: #2c3137;
+ --aw-dark-surface-deep: #1e1e1e;
+ --aw-dark-surface-deeper: #121212;
+ --aw-dark-bubble: #2d2d2d;
+ --aw-dark-text: #edf1f9;
+ --aw-dark-text-muted: #8b95a5;
+ --aw-dark-accent: #92ccff;
+ --aw-dark-accent-bright: #007cba;
+ --aw-dark-border: rgba(255, 255, 255, 0.1);
+ --aw-dark-border-subtle: rgba(255, 255, 255, 0.05);
+ --aw-dark-border-strong: rgba(255, 255, 255, 0.2);
+ --aw-dark-card-bg: rgba(255, 255, 255, 0.05);
+ --aw-dark-option-bg: rgba(64, 72, 80, 0.1);
+ --aw-dark-option-bg-active: rgba(64, 72, 80, 0.2);
+ --aw-dark-progress-track: rgba(0, 0, 0, 0.4);
+ --aw-dark-selected-pill: rgba(0, 124, 186, 0.2);
+ --aw-dark-scrollbar: #404850;
+ --aw-dark-scrollbar-hover: #707881;
+}
+
+/* =========================================================================
+ 1. ROOT SCAFFOLDING — Dark Background
+ ========================================================================= */
+
+#wp-agentic-writer\:wp-agentic-writer .components-panel,
+#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
+ background: var(--aw-dark-surface) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+/* =========================================================================
+ 2. TAB NAVIGATION — Bottom to Top Restyle
+ ========================================================================= */
+
+/*
+ * The bottom tab bar is rendered as the LAST child of .wpaw-tab-content-wrapper.
+ * We use order: -1 to visually move it to the top and restyle as a top nav bar
+ * with dark theme colors.
+ */
+
+/* The wrapper must use order-aware layout */
+.wpaw-tab-content-wrapper {
+ background: var(--aw-dark-surface) !important;
+}
+
+/* Move bottom tab bar to the top via flexbox order */
+.wpaw-bottom-tab-bar {
+ order: -1 !important;
+ border-top: none !important;
+ border-bottom: 1px solid var(--aw-dark-border) !important;
+ background: var(--aw-dark-surface) !important;
+ position: static !important;
+ flex-shrink: 0;
+}
+
+.wpaw-bottom-tab-btn {
+ border-top: 2px solid transparent !important;
+ border-bottom: 2px solid transparent !important;
+ color: var(--aw-dark-text-muted) !important;
+ transition:
+ color 150ms ease-out,
+ border-color 150ms ease-out,
+ background 150ms ease-out;
+}
+
+.wpaw-bottom-tab-btn:hover {
+ color: var(--aw-dark-text) !important;
+ background: rgba(255, 255, 255, 0.05) !important;
+}
+
+.wpaw-bottom-tab-btn.active {
+ color: var(--aw-dark-accent) !important;
+ font-weight: 700 !important;
+ border-bottom-color: var(--aw-dark-accent-bright) !important;
+ border-top-color: transparent !important;
+}
+
+/* Also restyle the top tab navigation (.wpaw-tabs) if present */
+.wpaw-tabs {
+ background: var(--aw-dark-surface) !important;
+ border-bottom-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-tab-btn {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-tab-btn:hover {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-tab-btn.active {
+ color: var(--aw-dark-accent) !important;
+ border-bottom-color: var(--aw-dark-accent-bright) !important;
+}
+
+/* Minimal tabs variant */
+.wpaw-tabs-minimal .wpaw-tab-btn {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-tabs-minimal .wpaw-tab-btn:hover {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-tabs-minimal .wpaw-tab-btn.active {
+ color: var(--aw-dark-accent) !important;
+}
+
+/* =========================================================================
+ 3. CHAT AREA — Dark Backgrounds
+ ========================================================================= */
+
+.wpaw-chat-tab {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-chat-container {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-messages {
+ background: var(--aw-dark-surface) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-messages-inner {
+ /*background: var(--aw-dark-surface) !important;*/
+ background: #1f2327 !important;
+}
+
+/* Dark scrollbar */
+.wpaw-messages-inner::-webkit-scrollbar {
+ width: 6px;
+}
+
+.wpaw-messages-inner::-webkit-scrollbar-track {
+ background: transparent !important;
+}
+
+.wpaw-messages-inner::-webkit-scrollbar-thumb {
+ background: var(--aw-dark-scrollbar) !important;
+ border-radius: 10px;
+}
+
+.wpaw-messages-inner::-webkit-scrollbar-thumb:hover {
+ background: var(--aw-dark-scrollbar-hover) !important;
+}
+
+/* =========================================================================
+ 4. STATUS BAR — Dark
+ ========================================================================= */
+
+.wpaw-status-bar {
+ background: var(--aw-dark-surface) !important;
+ color: var(--aw-dark-text) !important;
+ border-bottom-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-status-label {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-status-cost {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Status dot — green for idle on dark */
+.wpaw-status-dot.idle {
+ background: #4caf50 !important;
+}
+
+/* Active states use the accent blue */
+.wpaw-status-dot.checking,
+.wpaw-status-dot.refining,
+.wpaw-status-dot.writing {
+ background: var(--aw-dark-accent-bright) !important;
+}
+
+/* Green-dot animation for header avatar indicator */
+@keyframes blink {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+}
+
+/* =========================================================================
+ 5. MESSAGES — Dark Bubbles
+ ========================================================================= */
+
+/* AI message bubble — always #2d2d2d with rounded corners */
+.wpaw-message {
+ background: var(--aw-dark-bubble) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+ color: var(--aw-dark-text) !important;
+ border-radius: 12px !important;
+}
+
+/* First AI message gets top-left flatten */
+.wpaw-message:not(.wpaw-message-user):not(.wpaw-message-error):first-of-type,
+.wpaw-message:first-child {
+ border-top-left-radius: 0 !important;
+}
+
+/* User message — accent blue background on dark */
+.wpaw-message-user {
+ background: var(--aw-dark-accent-bright) !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+/* Error message — red on dark */
+.wpaw-message-error {
+ background: rgba(186, 26, 26, 0.2) !important;
+ border-color: #ba1a1a !important;
+ border-left-color: #ba1a1a !important;
+ color: #ff8a80 !important;
+}
+
+.wpaw-message-error .wpaw-error-title {
+ color: #ff8a80 !important;
+}
+
+.wpaw-message-error .wpaw-error-detail {
+ color: #ffab91 !important;
+}
+
+.wpaw-message-error details summary {
+ color: #ff8a80 !important;
+}
+
+.wpaw-message-error button.is-secondary {
+ background: rgba(186, 26, 26, 0.3) !important;
+ color: #ff8a80 !important;
+ border-color: #ba1a1a !important;
+}
+
+.wpaw-message-error button.is-secondary:hover {
+ background: rgba(186, 26, 26, 0.45) !important;
+}
+
+/* Research message */
+.wpaw-message[type="research"] {
+ background: var(--aw-dark-bubble) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+ border-left-color: var(--aw-dark-accent-bright) !important;
+}
+
+/* Message content */
+.wpaw-message-content {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-citation {
+ color: var(--aw-dark-accent) !important;
+ background: var(--aw-dark-selected-pill) !important;
+}
+
+/* Links in messages */
+.wpaw-message-error a,
+.wpaw-message a[rel="noopener"] {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-message-error a:hover,
+.wpaw-message a[rel="noopener"]:hover {
+ color: #b4dbff !important;
+}
+
+/* =========================================================================
+ 6. AI RESPONSE & ITERATION HISTORY
+ ========================================================================= */
+
+.wpaw-ai-response {
+ border-left-color: var(--aw-dark-border) !important;
+}
+
+/* Iteration history timeline — dark variant */
+.wpaw-timeline-entry {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-timeline-entry.inactive {
+ border-color: var(--aw-dark-border) !important;
+ opacity: 0.7;
+}
+
+.wpaw-timeline-entry.complete {
+ background: rgba(0, 108, 28, 0.08) !important;
+}
+
+/* Timeline dots */
+.wpaw-timeline-dot {
+ background: var(--aw-dark-surface) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+/* Active/current iteration dot — blue accent */
+.wpaw-timeline-entry.is-current .wpaw-timeline-dot {
+ background: var(--aw-dark-accent-bright) !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+ box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.5) !important;
+}
+
+/* Completed iteration dot */
+.wpaw-timeline-entry.complete .wpaw-timeline-dot {
+ background: rgba(0, 108, 28, 0.15) !important;
+ border-color: #4caf50 !important;
+ box-shadow: 0 0 0 1px #4caf50 !important;
+}
+
+/* Old/inactive dot */
+.wpaw-timeline-entry.inactive .wpaw-timeline-dot {
+ background: rgba(255, 255, 255, 0.2) !important;
+ border-color: var(--aw-dark-border) !important;
+ box-shadow: none !important;
+}
+
+.wpaw-timeline-content {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-timeline-message {
+ color: rgba(237, 241, 249, 0.7) !important;
+}
+
+.wpaw-timeline-complete {
+ color: #4caf50 !important;
+}
+
+.wpaw-timeline-elapsed {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Timeline colored lines */
+.wpaw-timeline-entry.active:not(:first-of-type)::before {
+ background: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-timeline-entry.complete:not(:first-of-type)::before {
+ background: #4caf50 !important;
+}
+
+/* Pulse ring for active dot */
+@keyframes pulse-ring-dark {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(0, 124, 186, 0.6);
+ }
+ 70% {
+ box-shadow: 0 0 0 6px rgba(0, 124, 186, 0);
+ }
+ 100% {
+ box-shadow: 0 0 0 0 rgba(0, 124, 186, 0);
+ }
+}
+
+.wpaw-timeline-entry.is-current .wpaw-timeline-dot {
+ animation: pulse-ring-dark 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite !important;
+}
+
+/* =========================================================================
+ 7. INPUT AREA — Dark Backgrounds
+ ========================================================================= */
+
+.wpaw-input-area {
+ background: var(--aw-dark-surface) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-input-label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Mode select dropdown */
+.wpaw-mode-select {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-mode-select:hover {
+ border-color: var(--aw-dark-border-strong) !important;
+}
+
+.wpaw-mode-select:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+ box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
+}
+
+#agentMode {
+ background-color: var(--aw-dark-option-bg) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+/* Command input area */
+.wpaw-command-area {
+ background: var(--aw-dark-surface) !important;
+ border-top-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-command-toolbar {
+ /* inherits from command area */
+}
+
+.wpaw-command-mode {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-command-mode-value {
+ color: var(--aw-dark-accent) !important;
+}
+
+/* Command input wrapper — textarea background */
+.wpaw-command-input-wrapper {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-command-input-wrapper textarea,
+.wpaw-command-input-wrapper .components-textarea-control__input {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-command-input-wrapper textarea::placeholder {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-command-prefix {
+ color: var(--aw-dark-accent) !important;
+}
+
+/* Expanded input — darker */
+.wpaw-command-input-wrapper.expanded textarea {
+ /* inherits dark */
+}
+
+/* =========================================================================
+ 8. WELCOME SCREEN — Dark
+ ========================================================================= */
+
+.wpaw-welcome-screen {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-welcome-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-welcome-subtitle {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-welcome-icon {
+ color: var(--aw-dark-accent-bright) !important;
+}
+
+/* Welcome input field */
+.wpaw-welcome-input {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ color: var(--aw-dark-text) !important;
+ border-radius: 12px !important;
+}
+
+.wpaw-welcome-input:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+ background: var(--aw-dark-surface-deep) !important;
+ box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.3) !important;
+}
+
+.wpaw-welcome-input::placeholder {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Suggestion chips */
+.wpaw-welcome-pills button {
+ /* reset */
+}
+
+.wpaw-welcome-pill {
+ background: transparent !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ color: var(--aw-dark-text) !important;
+ border-radius: 9999px !important;
+}
+
+.wpaw-welcome-pill:hover {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-welcome-pill.active {
+ background: var(--aw-dark-selected-pill) !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+ color: var(--aw-dark-accent) !important;
+}
+
+/* Session list */
+.wpaw-session-list {
+ /* inherits dark */
+}
+
+.wpaw-session-open-btn:disabled {
+ opacity: 0.5;
+}
+
+/* Start button */
+.wpaw-welcome-start-btn {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+ border-radius: 8px !important;
+}
+
+/* =========================================================================
+ 9. CLARIFICATION QUIZ — Dark Context
+ ========================================================================= */
+
+.wpaw-clarification-quiz {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-quiz-header h3 {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-quiz-header span {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Quiz progress bar */
+.wpaw-progress-bar {
+ background: var(--aw-dark-progress-track) !important;
+}
+
+.wpaw-progress-fill {
+ background: var(--aw-dark-accent-bright) !important;
+}
+
+/* Question cards */
+.wpaw-question-card {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-question-card h4 {
+ color: var(--aw-dark-text) !important;
+ font: var(--aw-text-label-caps) !important;
+ letter-spacing: var(--aw-tracking-label-caps) !important;
+ text-transform: uppercase !important;
+ font-size: 11px !important;
+}
+
+/* Answer option buttons */
+.wpaw-answer-options label {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+ border-radius: 8px !important;
+}
+
+.wpaw-answer-options label:hover {
+ background: var(--aw-dark-option-bg-active) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+}
+
+/* Selected option */
+.wpaw-answer-options label:has(input:checked) {
+ border-color: rgba(0, 124, 186, 0.5) !important;
+ background: var(--aw-dark-option-bg-active) !important;
+ color: var(--aw-dark-accent) !important;
+ box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
+ font-weight: 700 !important;
+}
+
+/* Quiz textarea */
+.wpaw-answer-options textarea {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-answer-options textarea:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+ box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.3) !important;
+}
+
+/* Previous answers */
+.wpaw-previous-answers {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-previous-answers strong {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-question-label {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-answer-text {
+ background: var(--aw-dark-option-bg) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+/* Custom answer input */
+.wpaw-custom-answer-wrapper {
+ border-top-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-custom-text-input {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-custom-text-input:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+/* Quiz action buttons */
+.wpaw-quiz-actions button.is-primary {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+ border-radius: 8px !important;
+ font-weight: 700 !important;
+}
+
+.wpaw-quiz-actions button.is-secondary {
+ border: 1px solid var(--aw-dark-accent-bright) !important;
+ color: var(--aw-dark-accent-bright) !important;
+ border-radius: 8px !important;
+ font-weight: 700 !important;
+ box-shadow: none;
+ background-color: #007cba0f !important;
+}
+
+/* =========================================================================
+ 10. PLAN CARDS & SECTIONS — Dark
+ ========================================================================= */
+
+.wpaw-plan-card,
+.wpaw-edit-plan {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ box-shadow: none !important;
+}
+
+.wpaw-plan-card:hover {
+ border-color: var(--aw-dark-accent-bright) !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+}
+
+.wpaw-plan-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-plan-section-status {
+ /* inherits */
+}
+
+.wpaw-plan-section.pending .wpaw-plan-section-status {
+ color: var(--aw-dark-text-muted) !important;
+ background: var(--aw-dark-option-bg) !important;
+}
+
+.wpaw-plan-section.done .wpaw-plan-section-status {
+ color: #4caf50 !important;
+ background: rgba(76, 175, 80, 0.15) !important;
+}
+
+.wpaw-plan-section.in_progress .wpaw-plan-section-status {
+ color: var(--aw-dark-accent) !important;
+ background: rgba(0, 124, 186, 0.15) !important;
+}
+
+.wpaw-plan-sections,
+.wpaw-edit-plan-list {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-plan-section {
+ /* inherits */
+}
+
+.wpaw-plan-section-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-plan-section-desc {
+ color: rgba(237, 241, 249, 0.7) !important;
+}
+
+/* Plan section edit */
+.wpaw-plan-section-edit-input {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-plan-section-edit-input:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-plan-section-edit-save {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+.wpaw-plan-section-edit-cancel {
+ background: transparent !important;
+ color: var(--aw-dark-text-muted) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-plan-section-edit-cancel:hover {
+ color: var(--aw-dark-text) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+}
+
+.wpaw-plan-section-wordcount {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Edit plan items */
+.wpaw-edit-plan-item {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+
+.wpaw-edit-plan-item-target {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-edit-plan-item-target:hover:not(:disabled) {
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-edit-plan-item-target:disabled {
+ opacity: 0.4;
+}
+
+.wpaw-edit-plan-accept-btn {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+.wpaw-edit-plan-reject-btn {
+ background: transparent !important;
+ color: var(--aw-dark-text-muted) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-edit-plan-reject-btn:hover {
+ color: #ff8a80 !important;
+ border-color: #ba1a1a !important;
+}
+
+/* Plan header */
+.wpaw-plan-header {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-plan-version {
+ color: var(--aw-dark-accent) !important;
+}
+
+/* =========================================================================
+ 11. BUTTONS & ACTIONS — Dark Context
+ ========================================================================= */
+
+/* Primary buttons */
+.wpaw-actions .is-primary,
+.wpaw-actions .components-button.is-primary,
+.wpaw-plan-actions .is-primary {
+ background: var(--aw-dark-accent-bright) !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+.wpaw-actions .is-primary:hover,
+.wpaw-actions .components-button.is-primary:hover,
+.wpaw-plan-actions .is-primary:hover {
+ background: #005f8a !important;
+ border-color: #005f8a !important;
+}
+
+.wpaw-actions .is-primary:disabled {
+ background: var(--aw-dark-text-muted) !important;
+ border-color: var(--aw-dark-text-muted) !important;
+ opacity: 0.5;
+}
+
+/* Command buttons */
+.wpaw-command-btn {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+.wpaw-command-btn:hover {
+ background: #005f8a !important;
+}
+
+.wpaw-command-btn:disabled {
+ background: var(--aw-dark-text-muted) !important;
+ opacity: 0.4;
+}
+
+.wpaw-command-btn.secondary {
+ background: transparent !important;
+ color: var(--aw-dark-text) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+}
+
+.wpaw-command-btn.secondary:hover {
+ background: var(--aw-dark-card-bg) !important;
+}
+
+/* Circle buttons */
+.wpaw-command-circle-btn {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+.wpaw-send-circle-btn {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+.wpaw-send-circle-btn:hover:not(:disabled) {
+ box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.4) !important;
+}
+
+.wpaw-send-circle-btn:disabled {
+ background: var(--aw-dark-text-muted) !important;
+ opacity: 0.3;
+}
+
+.wpaw-stop-circle-btn {
+ background: #c2410c !important;
+ color: #fffeff !important;
+}
+
+.wpaw-stop-circle-btn.is-stopping,
+.wpaw-stop-circle-btn.is-stopping:hover {
+ background: var(--aw-dark-text-muted) !important;
+}
+
+/* Command stop button */
+.wpaw-command-stop-btn {
+ background: rgba(194, 65, 12, 0.2) !important;
+ color: #ff8a80 !important;
+ border-color: #c2410c !important;
+}
+
+.wpaw-command-stop-btn:hover {
+ background: rgba(194, 65, 12, 0.3) !important;
+}
+
+/* Text buttons */
+.wpaw-command-text-btn {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-command-text-btn:hover {
+ color: var(--aw-dark-text) !important;
+}
+
+/* Status action buttons */
+.wpaw-status-icon-btn {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-status-icon-btn:hover {
+ color: var(--aw-dark-text) !important;
+ background: var(--aw-dark-card-bg) !important;
+}
+
+.wpaw-status-icon-btn:disabled {
+ color: var(--aw-dark-text-muted) !important;
+ opacity: 0.3;
+}
+
+/* Undo button */
+.wpaw-undo-btn {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-undo-btn:hover:not(:disabled) {
+ color: var(--aw-dark-text) !important;
+}
+
+/* Back button */
+.wpaw-back-btn {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-back-btn:hover {
+ color: var(--aw-dark-text) !important;
+}
+
+/* Link button */
+.wpaw-link-button {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-link-button:hover {
+ color: var(--aw-dark-accent) !important;
+ text-decoration: underline;
+}
+
+/* Session delete button */
+.wpaw-session-delete {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-session-delete:hover {
+ color: #ff8a80 !important;
+ background: rgba(186, 26, 26, 0.2) !important;
+}
+
+/* =========================================================================
+ 12. CONFIG TAB — Dark
+ ========================================================================= */
+
+.wpaw-config-tab {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-config-tab .wpaw-config-unavailable {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-config-tab h3 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-config-section {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-config-section:hover {
+ background: var(--aw-dark-option-bg-active) !important;
+}
+
+.wpaw-config-section label {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-config-section h4 {
+ color: var(--aw-dark-text) !important;
+}
+
+/* Select dropdown */
+.wpaw-select {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-select:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+ box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
+}
+
+/* Tab content inputs */
+.wpaw-select,
+.wpaw-tab-content input[type="text"],
+.wpaw-tab-content select {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-tab-content input[type="text"]::placeholder {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-tab-content .description,
+.wpaw-tab-content .components-checkbox-control__help {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-tab-content textarea {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-tab-content textarea::placeholder {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-tab-content label {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-tab-content.wpaw-insights-tab,
+.wpaw-tab-content.wpaw-config-tab {
+ overflow: auto;
+}
+
+/* Config divider */
+.wpaw-config-divider {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-config-divider span {
+ color: var(--aw-dark-text-muted) !important;
+ background: var(--aw-dark-surface) !important;
+}
+
+/* Config form fields */
+.wpaw-config-field {
+ /* inherits */
+}
+
+.wpaw-config-label-text {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-config-description {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Toggle slider */
+.wpaw-toggle-slider {
+ background: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-toggle-slider:before {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-config-toggle input:checked + .wpaw-toggle-slider {
+ background: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-config-text-input {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-config-text-input:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-config-text-input::placeholder {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Generic input */
+.wpaw-input {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+/* Meta info */
+.wpaw-meta-info span {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-meta-info span.good {
+ color: #4caf50 !important;
+}
+
+.wpaw-meta-info span.warning {
+ color: #ff9800 !important;
+}
+
+/* =========================================================================
+ 13. COST TAB — Dark
+ ========================================================================= */
+
+.wpaw-tab-content.wpaw-cost-tab {
+ overflow: auto;
+}
+
+.wpaw-cost-tab {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-cost-tab h3 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-cost-card {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-cost-stat {
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-cost-stat:hover {
+ background: var(--aw-dark-option-bg) !important;
+}
+
+.wpaw-cost-stat label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-cost-value {
+ color: var(--aw-dark-text) !important;
+}
+
+/* Budget bar */
+.wpaw-budget-bar {
+ background: var(--aw-dark-progress-track) !important;
+}
+
+.wpaw-budget-fill {
+ background: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-budget-fill.warning {
+ background: #ff9800 !important;
+}
+
+.wpaw-budget-fill.danger {
+ background: #ba1a1a !important;
+}
+
+.wpaw-budget-bar ~ .description {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-budget-label {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-budget-warning {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-budget-warning.warning {
+ color: #ff9800 !important;
+}
+
+.wpaw-budget-warning.danger {
+ color: #ff8a80 !important;
+}
+
+/* Cost table */
+.wpaw-cost-table-wrapper {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-cost-table {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-cost-table thead {
+ background: var(--aw-dark-card-bg) !important;
+}
+
+.wpaw-cost-table th {
+ color: var(--aw-dark-text-muted) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-cost-table td {
+ color: var(--aw-dark-text) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-cost-table tbody tr:hover {
+ background: var(--aw-dark-option-bg) !important;
+}
+
+/* Cost colors */
+.wpaw-cost-value.ok {
+ color: #4caf50 !important;
+}
+
+.wpaw-cost-value.warning {
+ color: #ff9800 !important;
+}
+
+.wpaw-cost-value.danger {
+ color: #ff8a80 !important;
+}
+
+.wpaw-cost-remaining .wpaw-cost-value {
+ color: var(--aw-dark-accent) !important;
+}
+
+/* Cost footer */
+.wpaw-cost-footer {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-cost-settings-link {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-cost-settings-link:hover {
+ color: #b4dbff !important;
+}
+
+/* Cost history */
+.wpaw-cost-history h4 {
+ color: var(--aw-dark-text) !important;
+}
+
+/* Refresh button */
+.wpaw-refresh-btn {
+ color: var(--aw-dark-text-muted) !important;
+ background: transparent !important;
+}
+
+.wpaw-refresh-btn:hover {
+ color: var(--aw-dark-text) !important;
+ background: var(--aw-dark-card-bg) !important;
+}
+
+/* =========================================================================
+ 14. ACTIVITY LOG — Dark
+ ========================================================================= */
+
+.wpaw-activity-log {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-log-entry {
+ border-bottom-color: var(--aw-dark-border-subtle) !important;
+}
+
+/* User command */
+.wpaw-log-entry.user-command {
+ background: rgba(0, 124, 186, 0.1) !important;
+ border-left-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-log-entry.user-command::before {
+ color: var(--aw-dark-accent) !important;
+}
+
+/* Agent status */
+.wpaw-log-entry.agent-status {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-log-entry.agent-status::before {
+ color: var(--aw-dark-border) !important;
+}
+
+.wpaw-log-entry.agent-status.active::before {
+ color: var(--aw-dark-accent-bright) !important;
+}
+
+/* Agent success */
+.wpaw-log-entry.agent-success {
+ border-left-color: #4caf50 !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-log-entry.agent-success::before {
+ color: #4caf50 !important;
+}
+
+/* Agent error */
+.wpaw-log-entry.agent-error {
+ background: rgba(186, 26, 26, 0.15) !important;
+ border-left-color: #ba1a1a !important;
+ color: #ff8a80 !important;
+}
+
+.wpaw-log-entry.agent-error::before {
+ color: #ff8a80 !important;
+}
+
+/* Agent response */
+.wpaw-log-entry.agent-response {
+ border-left-color: var(--aw-dark-border) !important;
+}
+
+/* =========================================================================
+ 15. WORKSPACE CARDS — Dark
+ ========================================================================= */
+
+.wpaw-agent-workspace-card {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-agent-workspace-header {
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-agent-workspace-heading {
+ /* inherits */
+}
+
+.wpaw-agent-workspace-kicker {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-agent-workspace-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-agent-workspace-status {
+ color: var(--aw-dark-text-muted) !important;
+ background: var(--aw-dark-option-bg) !important;
+}
+
+.wpaw-agent-workspace-toggle {
+ color: var(--aw-dark-text-muted) !important;
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-agent-workspace-toggle:hover,
+.wpaw-agent-workspace-toggle:focus {
+ color: var(--aw-dark-text) !important;
+ background: var(--aw-dark-option-bg-active) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+}
+
+/* Context grid */
+.wpaw-agent-context-grid {
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-agent-context-item {
+ background: var(--aw-dark-option-bg) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-agent-context-item span {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-agent-context-item strong {
+ color: var(--aw-dark-text) !important;
+}
+
+/* Keyword input */
+.wpaw-agent-keyword-input {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-agent-keyword-input:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+ box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
+}
+
+/* Resume card */
+.wpaw-agent-resume-card {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-agent-resume-card strong {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-agent-resume-card span {
+ color: var(--aw-dark-accent) !important;
+}
+
+/* =========================================================================
+ 16. HISTORY TAB — Dark
+ ========================================================================= */
+
+.wpaw-history-tab {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-history-header h3 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-history-count {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-history-empty {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-history-empty p {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-history-item {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-history-item:hover {
+ background: var(--aw-dark-option-bg-active) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+}
+
+.wpaw-history-item.active {
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-history-item-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-history-item-meta {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-history-restore-btn {
+ background: var(--aw-dark-option-bg) !important;
+ color: var(--aw-dark-accent) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-history-restore-btn:hover {
+ background: var(--aw-dark-option-bg-active) !important;
+ color: var(--aw-dark-accent) !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-history-item.active .wpaw-history-restore-btn {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-history-delete-btn {
+ color: var(--aw-dark-text-muted) !important;
+ background: transparent !important;
+}
+
+.wpaw-history-delete-btn:hover {
+ color: #ff8a80 !important;
+ background: rgba(186, 26, 26, 0.2) !important;
+}
+
+/* =========================================================================
+ 17. INSIGHTS TAB — Dark
+ ========================================================================= */
+
+.wpaw-insights-tab {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-insights-header h3 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-insights-refresh-btn {
+ color: var(--aw-dark-text-muted) !important;
+ background: transparent !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-insights-refresh-btn:hover {
+ color: var(--aw-dark-text) !important;
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+}
+
+.wpaw-insights-card {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-insights-card-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-insights-stat-value {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-insights-stat-label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Budget section */
+.wpaw-insights-budget-label {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-insights-budget-track {
+ background: var(--aw-dark-progress-track) !important;
+}
+
+.wpaw-insights-budget-fill {
+ background: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-insights-budget-fill.warning {
+ background: #ff9800 !important;
+}
+
+.wpaw-insights-budget-fill.danger {
+ background: #ba1a1a !important;
+}
+
+/* Activity list */
+.wpaw-insights-activity-item {
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-insights-activity-item:nth-child(even) {
+ background: var(--aw-dark-card-bg) !important;
+}
+
+.wpaw-insights-activity-action {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-insights-activity-cost {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-insights-settings-link {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-insights-settings-link:hover {
+ color: #b4dbff !important;
+}
+
+.wpaw-insights-audit-btn {
+ border-color: var(--aw-dark-accent-bright) !important;
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-insights-audit-btn:hover {
+ background: var(--aw-dark-option-bg-active) !important;
+}
+
+/* =========================================================================
+ 18. SEO TAB — Dark
+ ========================================================================= */
+
+.wpaw-seo-tab {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-seo-header h3 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-seo-section h4 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-seo-field input,
+.wpaw-seo-field textarea {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-seo-field input:focus,
+.wpaw-seo-field textarea:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-char-count {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* SEO preview */
+.wpaw-seo-preview {
+ background: #ffffff !important;
+ border-radius: 8px;
+ padding: 12px;
+}
+
+.wpaw-seo-preview-title {
+ color: #1a0dab !important;
+}
+
+.wpaw-seo-preview-url {
+ color: #006621 !important;
+}
+
+.wpaw-seo-preview-desc {
+ color: #545454 !important;
+}
+
+/* SEO audit */
+.wpaw-seo-audit-header label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-seo-score {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-seo-score .score-value {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-seo-score .score-label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-seo-stat .stat-label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-seo-stat .stat-value {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-seo-check {
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-seo-check .check-label {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-seo-fix-button.components-button.is-secondary.is-small {
+ color: var(--aw-dark-accent) !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+ background: transparent !important;
+}
+
+.wpaw-seo-fix-button.components-button.is-secondary.is-small:hover:not(
+ :disabled
+ ),
+.wpaw-seo-fix-button.components-button.is-secondary.is-small:focus:not(
+ :disabled
+ ) {
+ background: var(--aw-dark-selected-pill) !important;
+ color: var(--aw-dark-accent) !important;
+}
+
+/* Score colors */
+.wpaw-seo-score.good,
+.wpaw-score-value.good {
+ color: #4caf50 !important;
+}
+
+.wpaw-seo-score.warning,
+.wpaw-score-value.warning {
+ color: #ff9800 !important;
+}
+
+.wpaw-seo-score.poor,
+.wpaw-score-value.bad {
+ color: #ff8a80 !important;
+}
+
+/* Issue items */
+.wpaw-issue-item {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-issue-name {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-issue-message {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-issue-item.good .wpaw-issue-severity {
+ color: #4caf50 !important;
+ background: rgba(76, 175, 80, 0.15) !important;
+}
+
+.wpaw-issue-item.error .wpaw-issue-severity,
+.wpaw-issue-item.failed .wpaw-issue-severity {
+ color: #ff8a80 !important;
+ background: rgba(186, 26, 26, 0.2) !important;
+}
+
+.wpaw-issue-item.warning .wpaw-issue-severity {
+ color: #ff9800 !important;
+ background: rgba(255, 152, 0, 0.15) !important;
+}
+
+/* =========================================================================
+ 19. OUTLINE PANEL — Dark
+ ========================================================================= */
+
+.wpaw-outline-panel {
+ background: var(--aw-dark-surface) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-outline-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-outline-close {
+ color: var(--aw-dark-text-muted) !important;
+ background: transparent !important;
+}
+
+.wpaw-outline-close:hover {
+ color: var(--aw-dark-text) !important;
+ background: var(--aw-dark-card-bg) !important;
+}
+
+.wpaw-outline-item {
+ color: var(--aw-dark-text) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-outline-item:hover {
+ background: var(--aw-dark-option-bg) !important;
+}
+
+.wpaw-outline-label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-outline-text {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-outline-count {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-outline-footer {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-outline-empty {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* =========================================================================
+ 20. CONTEXT INDICATOR — Dark
+ ========================================================================= */
+
+.wpaw-context-indicator {
+ background: var(--aw-dark-surface) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-context-info {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-context-count,
+.wpaw-context-tokens,
+.wpaw-context-cost {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-context-toggle {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-context-toggle:hover {
+ color: var(--aw-dark-text) !important;
+}
+
+/* =========================================================================
+ 21. FOCUS KEYWORD BAR — Dark
+ ========================================================================= */
+
+.wpaw-focus-keyword-bar {
+ background: var(--aw-dark-surface) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-fk-select,
+.wpaw-fk-select-full {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-fk-input {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-fk-input:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+ box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-fk-input::placeholder {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-fk-custom-input {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-fk-custom-input::placeholder {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-fk-select:focus,
+.wpaw-fk-select-full:focus {
+ border-color: var(--aw-dark-accent-bright) !important;
+ box-shadow: 0 0 0 1px var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-fk-select option,
+.wpaw-fk-select-full option {
+ background: var(--aw-dark-surface-deep) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-fk-cost {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-fk-expand,
+.wpaw-fk-collapse {
+ color: var(--aw-dark-text-muted) !important;
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-fk-expand:hover,
+.wpaw-fk-collapse:hover {
+ color: var(--aw-dark-text) !important;
+ background: var(--aw-dark-option-bg-active) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+}
+
+.wpaw-fk-header {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-fk-suggestions {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-fk-suggestions-label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-fk-suggestion-item {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-fk-suggestion-item:hover {
+ background: var(--aw-dark-option-bg) !important;
+}
+
+.wpaw-fk-suggestion-item.selected {
+ background: var(--aw-dark-selected-pill) !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-fk-suggestion-text {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-fk-suggestion-source {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-fk-stats {
+ border-top-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-fk-divider {
+ color: var(--aw-dark-border) !important;
+}
+
+/* =========================================================================
+ 22. SESSIONS LIST — Dark
+ ========================================================================= */
+
+.wpaw-sessions-list-view {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-sessions-header-bar {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-sessions-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-new-conversation-btn {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-sessions-list {
+ /* inherits */
+}
+
+.wpaw-no-sessions {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-session-item {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-session-item:hover {
+ background: var(--aw-dark-option-bg-active) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+}
+
+.wpaw-session-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-session-meta {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* =========================================================================
+ 23. CONTEXTUAL ACTION — Dark
+ ========================================================================= */
+
+.wpaw-contextual-action {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-action-content h4 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-action-content p {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-action-content .components-button {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+.wpaw-action-content .components-button:hover {
+ background: #005f8a !important;
+}
+
+/* =========================================================================
+ 24. WRITING EMPTY STATE — Dark
+ ========================================================================= */
+
+.wpaw-writing-empty-state {
+ background: var(--aw-dark-surface) !important;
+}
+
+.wpaw-empty-state-content h3 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-empty-state-content p {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-empty-state-button {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+.wpaw-empty-state-hint {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* =========================================================================
+ 25. AUTOCOMPLETE / MENTION — Dark
+ ========================================================================= */
+
+.wpaw-mention-autocomplete {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-mention-option {
+ border-bottom-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-mention-option.selected,
+.wpaw-mention-option:hover {
+ background: var(--aw-dark-option-bg-active) !important;
+}
+
+.wpaw-mention-option strong {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-mention-option span {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Block mentioned */
+.wpaw-block-mentioned {
+ background: var(--aw-dark-selected-pill) !important;
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-block-mentioned:hover {
+ background: rgba(0, 124, 186, 0.35) !important;
+}
+
+/* =========================================================================
+ 26. LOADING & ANIMATION
+ ========================================================================= */
+
+/* Loading bar — top of sidebar during execution */
+.wpaw-loading-bar {
+ height: 4px;
+ background: var(--aw-dark-surface-deeper);
+ overflow: hidden;
+ flex-shrink: 0;
+}
+
+.wpaw-loading-bar-fill {
+ height: 100%;
+ background: var(--aw-dark-accent-bright);
+ animation: loading-bar 2s ease-in-out infinite;
+}
+
+@keyframes loading-bar {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(200%);
+ }
+}
+
+/* AI pulse background for executing state */
+.wpaw-ai-pulse-bg {
+ animation: pulse-bg 3s ease-in-out infinite;
+}
+
+@keyframes pulse-bg {
+ 0%,
+ 100% {
+ background-color: var(--aw-dark-surface);
+ }
+ 50% {
+ background-color: #31373d;
+ }
+}
+
+/* Dots loader */
+.wpaw-dots-loader {
+ background-color: var(--aw-dark-accent) !important;
+ box-shadow:
+ 12px 0 var(--aw-dark-accent),
+ -12px 0 var(--aw-dark-accent) !important;
+}
+
+/* Streaming indicator */
+.wpaw-streaming-indicator {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-streaming-indicator::after {
+ background: var(--aw-dark-accent) !important;
+}
+
+/* Typing indicator */
+.wpaw-typing-indicator {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-typing-dots span {
+ background: var(--aw-dark-text-muted) !important;
+}
+
+/* Processing indicator */
+.wpaw-processing-indicator {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* Spinning icon */
+.wpaw-spinning-icon svg {
+ color: var(--aw-dark-accent) !important;
+}
+
+/* =========================================================================
+ 27. PROGRESS BAR — Dark Track, Blue Fill (Pattern 3)
+ ========================================================================= */
+
+.wpaw-progress-bar {
+ background: var(--aw-dark-progress-track) !important;
+ height: 6px !important;
+ border-radius: 3px !important;
+}
+
+.wpaw-progress-fill {
+ background: var(--aw-dark-accent-bright) !important;
+ border-radius: 3px !important;
+}
+
+/* Status card for executing state */
+.wpaw-status-card {
+ background: var(--aw-dark-card-bg) !important;
+ border: 1px solid var(--aw-dark-border) !important;
+ border-radius: 8px !important;
+ padding: 12px 16px;
+}
+
+.wpaw-status-card .wpaw-progress-text {
+ color: var(--aw-dark-accent) !important;
+ font: var(--aw-text-code-sm);
+}
+
+.wpaw-status-card .wpaw-progress-percentage {
+ color: var(--aw-dark-accent) !important;
+ font: var(--aw-text-code-sm);
+ font-weight: 700;
+}
+
+/* =========================================================================
+ 28. SUGGESTIONS — Dark
+ ========================================================================= */
+
+.wpaw-suggestions-banner {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-suggestion-analyzing {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-suggestion-item {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-suggestion-header {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-suggestion-location {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-suggestion-priority {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-suggestion-content {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-suggestion-issue {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-suggestion-text {
+ color: rgba(237, 241, 249, 0.7) !important;
+}
+
+.wpaw-suggestion-actions .wpaw-btn {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-suggestion-actions .wpaw-btn-apply {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+.wpaw-suggestion-dismiss-all {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-suggestion-dismiss-all:hover {
+ color: var(--aw-dark-text) !important;
+}
+
+/* =========================================================================
+ 29. COMMAND PALETTE — Dark
+ ========================================================================= */
+
+.wpaw-command-palette-overlay {
+ background: rgba(0, 0, 0, 0.6) !important;
+}
+
+.wpaw-command-palette {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
+}
+
+.wpaw-command-palette-input {
+ background: var(--aw-dark-surface-deeper) !important;
+ border-color: var(--aw-dark-border-strong) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-command-palette-input::placeholder {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-command-palette-results {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-command-palette-item {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-command-palette-item:hover,
+.wpaw-command-palette-item.selected {
+ background: var(--aw-dark-option-bg-active) !important;
+}
+
+.wpaw-command-palette-item.selected {
+ border-left-color: var(--aw-dark-accent-bright) !important;
+}
+
+.wpaw-command-icon {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-command-label {
+ color: var(--aw-dark-text) !important;
+}
+
+/* Command palette scrollbar */
+.wpaw-command-palette-results::-webkit-scrollbar {
+ width: 6px;
+}
+
+.wpaw-command-palette-results::-webkit-scrollbar-track {
+ background: transparent !important;
+}
+
+.wpaw-command-palette-results::-webkit-scrollbar-thumb {
+ background: var(--aw-dark-scrollbar) !important;
+ border-radius: 10px;
+}
+
+.wpaw-command-palette-results::-webkit-scrollbar-thumb:hover {
+ background: var(--aw-dark-scrollbar-hover) !important;
+}
+
+/* =========================================================================
+ 30. OVERLAYS & MODALS — Dark
+ ========================================================================= */
+
+.wpaw-refine-confirm-overlay,
+.wpaw-write-confirm-overlay {
+ background: rgba(0, 0, 0, 0.7) !important;
+}
+
+.wpaw-refine-confirm-modal,
+.wpaw-write-confirm-modal {
+ background: var(--aw-dark-surface-deep) !important;
+ border-color: var(--aw-dark-border) !important;
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
+}
+
+.wpaw-refine-confirm-title,
+.wpaw-write-confirm-title {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-refine-confirm-body,
+.wpaw-write-confirm-body {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-refine-confirm-actions .components-button.is-primary,
+.wpaw-write-confirm-actions .components-button.is-primary {
+ background: var(--aw-dark-accent-bright) !important;
+ color: #fffeff !important;
+}
+
+/* =========================================================================
+ 31. EDITOR LOCK BANNER — Dark
+ ========================================================================= */
+
+.wpaw-editor-lock-banner {
+ background: rgba(0, 124, 186, 0.15) !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-refinement-lock-banner {
+ background: rgba(194, 65, 12, 0.15) !important;
+ border-color: #c2410c !important;
+ color: #ff9800 !important;
+}
+
+/* =========================================================================
+ 32. INFO PANEL — Dark
+ ========================================================================= */
+
+.wpaw-info {
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-info a {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-info a:hover {
+ color: #b4dbff !important;
+}
+
+/* =========================================================================
+ 33. RESPONSE CONTENT — Dark Typography
+ ========================================================================= */
+
+#wp-agentic-writer\:wp-agentic-writer .interface-complementary-area h3,
+.wpaw-response-content h3,
+.wpaw-messages-inner h3 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-response-content h1 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-response-content h2 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-response-content h4,
+.wpaw-response-content h5,
+.wpaw-response-content h6 {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-response-content table {
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-response-content table th,
+.wpaw-response-content table td {
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-response-content {
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-response-content p {
+ color: var(--aw-dark-text) !important;
+}
+
+/* Code blocks in AI response */
+.wpaw-ai-response pre {
+ background: var(--aw-dark-surface-deeper) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-ai-response code {
+ background: var(--aw-dark-option-bg) !important;
+ color: var(--aw-dark-accent) !important;
+}
+
+/* =========================================================================
+ 34. MODE BADGE — Dark
+ ========================================================================= */
+
+.wpaw-mode-badge {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-mode-badge.mode-chat {
+ border-color: var(--aw-dark-accent-bright) !important;
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-mode-badge.mode-planning {
+ border-color: #ff9800 !important;
+ color: #ff9800 !important;
+}
+
+.wpaw-mode-badge.mode-writing {
+ border-color: #4caf50 !important;
+ color: #4caf50 !important;
+}
+
+/* =========================================================================
+ 35. PROVIDER BADGES — Dark
+ ========================================================================= */
+
+.wpaw-provider-info {
+ color: var(--aw-dark-text-muted) !important;
+ background: var(--aw-dark-card-bg) !important;
+}
+
+.wpaw-provider-info:hover {
+ background: var(--aw-dark-option-bg-active) !important;
+}
+
+.wpaw-provider-badge {
+ background: var(--aw-dark-card-bg) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-provider-badge[title*="warning"],
+.wpaw-provider-badge[title*="Warning"],
+.wpaw-provider-info:has(.wpaw-fallback) {
+ color: #ff9800 !important;
+ background: rgba(255, 152, 0, 0.15) !important;
+}
+
+/* =========================================================================
+ 36. WEB SEARCH TOGGLE — Dark
+ ========================================================================= */
+
+.wpaw-web-search-toggle {
+ color: var(--aw-dark-text-muted) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-web-search-toggle:hover {
+ background: var(--aw-dark-card-bg) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+.wpaw-web-search-icon {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-web-search-label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-web-search-toggle input:checked ~ .wpaw-web-search-label {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-web-search-toggle.wpaw-search-blocked {
+ opacity: 0.5;
+}
+
+.wpaw-web-search-toggle.wpaw-search-blocked .wpaw-web-search-label {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* =========================================================================
+ 37. KEYBOARD HINTS — Dark
+ ========================================================================= */
+
+.wpaw-keyboard-hints {
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-kbd kbd {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+/* Input hint */
+.wpaw-input-hint {
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text-muted) !important;
+}
+
+.wpaw-input-hint kbd {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+ color: var(--aw-dark-text) !important;
+}
+
+/* =========================================================================
+ 38. NOTICES — Dark
+ ========================================================================= */
+
+.wpaw-heartbeat-notice {
+ background: rgba(255, 152, 0, 0.1) !important;
+ border-color: rgba(255, 152, 0, 0.3) !important;
+ color: #ff9800 !important;
+}
+
+.wpaw-provider-warning {
+ background: rgba(186, 26, 26, 0.1) !important;
+ border-color: rgba(186, 26, 26, 0.3) !important;
+ color: #ff8a80 !important;
+}
+
+.wpaw-provider-warning a {
+ color: var(--aw-dark-accent) !important;
+}
+
+.wpaw-health-notice {
+ background: rgba(255, 152, 0, 0.1) !important;
+ border-color: rgba(255, 152, 0, 0.3) !important;
+ color: #ff9800 !important;
+}
+
+.wpaw-health-notice a {
+ color: var(--aw-dark-accent) !important;
+}
+
+/* =========================================================================
+ 39. CLEAR CONTEXT BUTTON — Dark
+ ========================================================================= */
+
+.wpaw-clear-context {
+ color: var(--aw-dark-text-muted) !important;
+ background: transparent !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-clear-context:disabled {
+ opacity: 0.3;
+}
+
+/* =========================================================================
+ 40. MEMANTO BADGE — Dark
+ ========================================================================= */
+
+.wpaw-memanto-badge {
+ background: rgba(0, 124, 186, 0.2) !important;
+ color: var(--aw-dark-accent) !important;
+ border-color: var(--aw-dark-accent-bright) !important;
+}
+
+/* =========================================================================
+ 41. CONFIG SUMMARY — Dark
+ ========================================================================= */
+
+.wpaw-plan-config-summary {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border) !important;
+}
+
+.wpaw-config-summary-item {
+ border-color: var(--aw-dark-border-subtle) !important;
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* =========================================================================
+ 42. GENERIC DARK SCROLLBAR FOR ALL SIDEBAR SCROLLABLE AREAS
+ ========================================================================= */
+
+#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar {
+ width: 6px;
+}
+
+#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar-track {
+ background: transparent !important;
+}
+
+#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar-thumb {
+ background: var(--aw-dark-scrollbar) !important;
+ border-radius: 10px;
+}
+
+#wp-agentic-writer\:wp-agentic-writer ::-webkit-scrollbar-thumb:hover {
+ background: var(--aw-dark-scrollbar-hover) !important;
+}
+
+/* =========================================================================
+ 43. AI ITEM INFO TYPE — Dark
+ ========================================================================= */
+
+.wpaw-ai-item[data-type="info"] {
+ background: var(--aw-dark-card-bg) !important;
+ border-color: var(--aw-dark-border-subtle) !important;
+}
+
+.wpaw-ai-item[data-type="info"] .wpaw-ai-content {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* =========================================================================
+ 44. TYPING INDICATOR — Dark
+ ========================================================================= */
+
+.wpaw-typing-indicator {
+ color: var(--aw-dark-text-muted) !important;
+}
+
+/* =========================================================================
+ 45. GLOBAL DARK RESETS — Catch-all for WordPress component overrides
+ ========================================================================= */
+
+/* Force dark background on any WP panel elements inside the sidebar */
+#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
+ background: var(--aw-dark-surface) !important;
+}
+
+/* Ensure all text inside the sidebar is light by default */
+#wp-agentic-writer\:wp-agentic-writer,
+#wp-agentic-writer\:wp-agentic-writer * {
+ --aw-surface: #2c3137;
+ --aw-surface-container-lowest: #2c3137;
+ --aw-surface-container-low: #333a40;
+ --aw-surface-container: #383f45;
+ --aw-surface-container-high: #3d444a;
+ --aw-surface-container-highest: #424950;
+ --aw-on-surface: #edf1f9;
+ --aw-on-surface-variant: #8b9298;
+ --aw-outline: rgba(255, 255, 255, 0.15);
+ --aw-outline-variant: rgba(255, 255, 255, 0.1);
+ --aw-outline-subtle: rgba(255, 255, 255, 0.05);
+}
+
+/* Override the sidebar toggle icon inversion — the WP block editor makes the button dark when active, so we always need inversion */
+.is-pressed[aria-controls="wp-agentic-writer:wp-agentic-writer"] img,
+.components-button.is-pressed[aria-controls="wp-agentic-writer:wp-agentic-writer"]
+ img {
+ filter: invert(1) !important;
+}
+
+/* =========================================================================
+ END OF DARK THEME OVERRIDES
+ ========================================================================= */
diff --git a/assets/css/agentic-sidebar.css b/assets/css/agentic-sidebar.css
new file mode 100644
index 0000000..90e68e2
--- /dev/null
+++ b/assets/css/agentic-sidebar.css
@@ -0,0 +1,7344 @@
+/**
+ * WP Agentic Writer — Agentic Sidebar Styles (Stitch Design System)
+ *
+ * Complete rewrite using --aw-* design tokens from agentic-tokens.css.
+ * Light theme is now the default base — no .dark-theme class overrides needed.
+ *
+ * Sections 1-18: Root scaffolding through Config/Status/Command UI.
+ * Sections 19+: Continued in second half (SEO, Outline Node, Image, etc.)
+ *
+ * @package WP_Agentic_Writer
+ * @since 0.3.0
+ */
+
+/* =========================================================================
+ 1. ROOT SCAFFOLDING
+ ========================================================================= */
+
+.wpaw-sidebar-container,
+.wpaw-tab-content,
+.wpaw-command-area,
+.wpaw-settings-v2-wrap {
+ font-family:
+ Inter,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+}
+
+/* Explicit monospace for program-ish / data elements */
+.wpaw-sidebar-container pre,
+.wpaw-sidebar-container code,
+.wpaw-sidebar-container kbd,
+.wpaw-kbd,
+.wpaw-command-prefix,
+.wpaw-cost-value,
+.wpaw-cost-table td,
+.wpaw-command-mode,
+.wpaw-timeline-timestamp,
+.wpaw-mention-option span:last-child {
+ font-family:
+ "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
+ monospace !important;
+}
+
+.is-pressed[aria-controls="wp-agentic-writer:wp-agentic-writer"] img,
+.components-button.is-pressed[aria-controls="wp-agentic-writer:wp-agentic-writer"]
+ img {
+ filter: invert(1) !important;
+}
+
+.interface-complementary-area__fill:has(#wp-agentic-writer\:wp-agentic-writer),
+#wp-agentic-writer\:wp-agentic-writer {
+ width: 30vw !important;
+ height: 100% !important;
+ display: flex !important;
+ flex-direction: column !important;
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+}
+
+#wp-agentic-writer\:wp-agentic-writer .components-panel,
+#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ background: var(--aw-surface);
+}
+
+#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
+ overflow: hidden;
+}
+
+.interface-complementary-area__fill:has(#wp-agentic-writer\:wp-agentic-writer),
+#wp-agentic-writer\:wp-agentic-writer svg {
+ margin-bottom: -3px;
+}
+
+.components-tooltip img {
+ display: none;
+}
+
+/* =========================================================================
+ 2. TAB NAVIGATION
+ ========================================================================= */
+
+.wpaw-tabs {
+ display: flex;
+ gap: 0;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ margin-bottom: 0;
+ background: var(--aw-surface-container-lowest);
+}
+
+.wpaw-tab-btn {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 10px 12px;
+ background: transparent;
+ border: none;
+ border-bottom: 2px solid transparent;
+ cursor: pointer;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+ transition:
+ color var(--aw-transition-fast),
+ border-color var(--aw-transition-fast);
+ margin-bottom: -1px;
+}
+
+.wpaw-tab-btn:hover {
+ color: var(--aw-on-surface);
+}
+
+.wpaw-tab-btn.active {
+ color: var(--aw-on-surface);
+ border-bottom-color: var(--aw-primary);
+}
+
+.wpaw-tab-icon {
+ font-size: 18px;
+ line-height: 1;
+}
+
+.wpaw-tab-label {
+ line-height: 1;
+}
+
+/* =========================================================================
+ 3. TAB CONTENT WRAPPER
+ ========================================================================= */
+
+.wpaw-tab-content-wrapper {
+ position: relative;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+}
+
+.wpaw-tab-content {
+ animation: fadeIn 0.3s ease;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ min-height: 0;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* =========================================================================
+ 4. CHAT TAB
+ ========================================================================= */
+
+.wpaw-chat-tab {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+}
+
+.wpaw-chat-container {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+}
+
+.wpaw-messages {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ background: var(--aw-surface);
+ border-radius: 0;
+ min-height: 0;
+ border: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-messages-inner {
+ flex: 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 15px;
+ scroll-behavior: smooth;
+}
+
+.wpaw-messages-inner::-webkit-scrollbar {
+ width: 6px;
+}
+
+.wpaw-messages-inner::-webkit-scrollbar-track {
+ background: var(--aw-surface);
+ border-radius: 0;
+}
+
+.wpaw-messages-inner::-webkit-scrollbar-thumb {
+ background: var(--aw-outline-variant);
+ border-radius: 3px;
+}
+
+.wpaw-messages-inner::-webkit-scrollbar-thumb:hover {
+ background: var(--aw-outline);
+}
+
+/* Agent Workspace Card */
+.wpaw-agent-workspace-card {
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-xl);
+ margin: 10px 10px 8px;
+ padding: 12px;
+ color: var(--aw-on-surface);
+ box-shadow: var(--aw-shadow-sm);
+}
+
+.wpaw-agent-workspace-card.is-collapsed {
+ padding: 9px 10px;
+}
+
+.wpaw-agent-workspace-header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 10px;
+}
+
+.wpaw-agent-workspace-card.is-collapsed .wpaw-agent-workspace-header {
+ align-items: center;
+ margin-bottom: 0;
+}
+
+.wpaw-agent-workspace-heading {
+ min-width: 0;
+}
+
+.wpaw-agent-workspace-kicker {
+ color: var(--aw-primary);
+ font-size: 10px;
+ letter-spacing: 0.08em;
+ font-weight: 700;
+ margin-bottom: 3px;
+}
+
+.wpaw-agent-workspace-title {
+ color: var(--aw-on-surface);
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1.3;
+}
+
+.wpaw-agent-workspace-actions {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ flex-shrink: 0;
+}
+
+.wpaw-agent-workspace-status {
+ white-space: nowrap;
+ border-radius: var(--aw-radius-full);
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface-variant);
+ background: var(--aw-surface-container-low);
+ padding: 4px 8px;
+ font-size: 10px;
+ text-transform: capitalize;
+}
+
+.wpaw-agent-workspace-toggle {
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-full);
+ background: var(--aw-surface-container-low);
+ color: var(--aw-on-surface-variant);
+ cursor: pointer;
+ font-size: 10px;
+ font-weight: 700;
+ line-height: 1;
+ padding: 5px 8px;
+}
+
+.wpaw-agent-workspace-toggle:hover,
+.wpaw-agent-workspace-toggle:focus {
+ border-color: var(--aw-primary);
+ color: var(--aw-on-surface);
+ outline: none;
+}
+
+/* Status-specific workspace badges */
+.wpaw-agent-workspace-status.status-in_progress,
+.wpaw-agent-workspace-status.status-paused,
+.wpaw-agent-workspace-status.status-running,
+.wpaw-agent-workspace-status.status-stopping {
+ color: #b45309;
+ border-color: rgba(180, 83, 9, 0.35);
+ background: rgba(251, 191, 36, 0.12);
+}
+
+.wpaw-agent-workspace-status.status-completed {
+ color: var(--aw-tertiary);
+ border-color: rgba(0, 108, 28, 0.35);
+ background: rgba(0, 108, 28, 0.08);
+}
+
+.wpaw-agent-workspace-status.status-failed {
+ color: var(--aw-error);
+ border-color: rgba(186, 26, 26, 0.35);
+ background: rgba(186, 26, 26, 0.08);
+}
+
+/* Agent Context Grid */
+.wpaw-agent-context-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 8px;
+}
+
+.wpaw-agent-context-item {
+ min-width: 0;
+ background: var(--aw-surface-container-low);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: 9px;
+ padding: 8px;
+}
+
+.wpaw-agent-context-item span {
+ display: block;
+ color: var(--aw-on-surface-variant);
+ font-size: 10px;
+ letter-spacing: 0.04em;
+ margin-bottom: 4px;
+}
+
+.wpaw-agent-context-item strong {
+ display: block;
+ color: var(--aw-on-surface);
+ font-size: 12px;
+ line-height: 1.35;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* Agent Keyword Input */
+.wpaw-agent-keyword-input {
+ width: 100%;
+ min-height: 26px;
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: 7px;
+ background: var(--aw-surface-container-lowest);
+ color: var(--aw-on-surface);
+ font-size: 12px;
+ padding: 4px 7px;
+}
+
+.wpaw-agent-keyword-input:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+ box-shadow: 0 0 0 1px var(--aw-primary);
+}
+
+/* Agent Resume Card */
+.wpaw-agent-resume-card {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
+ margin-top: 10px;
+ padding: 9px;
+ border-radius: 9px;
+ background: var(--aw-primary-fixed);
+ border: 1px solid var(--aw-primary);
+}
+
+.wpaw-agent-resume-card strong,
+.wpaw-agent-resume-card span {
+ display: block;
+}
+
+.wpaw-agent-resume-card strong {
+ color: var(--aw-on-primary-fixed);
+ font-size: 12px;
+}
+
+.wpaw-agent-resume-card span {
+ color: var(--aw-primary);
+ font-size: 11px;
+ margin-top: 2px;
+}
+
+/* Input Area */
+.wpaw-input-area {
+ background: var(--aw-surface-container-lowest);
+ padding: 12px;
+ border-radius: 0;
+ border: 1px solid var(--aw-outline-variant);
+ border-top: none;
+ margin-top: auto;
+}
+
+.wpaw-input-toolbar {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 10px;
+}
+
+.wpaw-input-label {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+ font-weight: 600;
+ letter-spacing: 0.02em;
+}
+
+.wpaw-mode-select {
+ padding: 6px 8px;
+ border-radius: var(--aw-radius-md);
+ border: 1px solid var(--aw-outline-variant);
+ background: var(--aw-surface-container-lowest);
+ font-size: 13px;
+ font-weight: 400;
+ color: var(--aw-on-surface);
+ cursor: pointer;
+ transition: border-color var(--aw-transition-fast);
+}
+
+.wpaw-mode-select:hover {
+ border-color: var(--aw-primary);
+}
+
+.wpaw-mode-select:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+ box-shadow: 0 0 0 1px var(--aw-primary);
+}
+
+#agentMode {
+ background-color: var(--aw-surface-container-lowest);
+ color: var(--aw-on-surface-variant);
+ font-weight: normal;
+ text-transform: capitalize;
+ font-size: 11px;
+}
+
+#agentMode:active,
+#agentMode:focus {
+ text-decoration: unset;
+}
+
+/* =========================================================================
+ 5. MESSAGES
+ ========================================================================= */
+
+.wpaw-message {
+ margin-bottom: 12px;
+ padding: 10px 12px;
+ border-radius: var(--aw-radius-lg);
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface);
+ animation: messageSlide 0.2s ease;
+}
+
+@keyframes messageSlide {
+ from {
+ opacity: 0;
+ transform: translateY(5px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.wpaw-message-user {
+ background: var(--aw-primary-fixed);
+ border-left: none;
+ margin-left: 0;
+ max-width: 80%;
+ margin-left: auto;
+ border-radius: var(--aw-radius-xl) var(--aw-radius-xl) var(--aw-radius)
+ var(--aw-radius-xl);
+ border: 1px solid var(--aw-primary);
+ color: var(--aw-on-primary-fixed);
+}
+
+.wpaw-message-error {
+ background: var(--aw-error-container);
+ border: 1px solid var(--aw-error);
+ border-left: 3px solid var(--aw-error);
+ border-radius: var(--aw-radius-lg);
+ color: var(--aw-error);
+ padding: 12px 14px;
+}
+
+.wpaw-message-error .wpaw-error-title {
+ font-weight: 600;
+ font-size: 13px;
+ color: var(--aw-error);
+ margin-bottom: 4px;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.wpaw-message-error .wpaw-error-detail {
+ font-size: 12px;
+ color: var(--aw-on-error-container);
+ line-height: 1.5;
+ margin-top: 6px;
+}
+
+.wpaw-message-error details {
+ margin-top: 8px;
+}
+
+.wpaw-message-error details summary {
+ font-size: 11px;
+ color: var(--aw-error);
+ cursor: pointer;
+ user-select: none;
+}
+
+.wpaw-message-error details[open] summary {
+ margin-bottom: 6px;
+}
+
+.wpaw-message-error button.is-secondary {
+ background: var(--aw-error-container);
+ color: var(--aw-error);
+ border: 1px solid var(--aw-error) !important;
+ box-shadow: none !important;
+ border-radius: var(--aw-radius-md);
+ margin-top: 8px;
+ font-size: 12px;
+ padding: 6px 14px;
+ transition: background var(--aw-transition-fast);
+}
+
+.wpaw-message-error button.is-secondary:hover {
+ background: rgba(186, 26, 26, 0.15);
+}
+
+/* Research message styling */
+.wpaw-message[type="research"] {
+ background: var(--aw-surface-container-low);
+ border: 1px solid var(--aw-outline-variant);
+ border-left: 4px solid var(--aw-primary);
+ padding: 16px;
+ margin: 12px 0;
+ border-radius: var(--aw-radius-lg);
+}
+
+.wpaw-message[type="research"] .wpaw-message-content {
+ font-size: 13px;
+ line-height: 1.7;
+}
+
+.wpaw-research-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 12px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ font-weight: 600;
+ color: var(--aw-primary);
+}
+
+.wpaw-research-result {
+ background: var(--aw-surface-container);
+ padding: 10px 12px;
+ margin: 8px 0;
+ border-radius: var(--aw-radius-md);
+ border-left: 3px solid var(--aw-primary);
+}
+
+.wpaw-research-result-title {
+ font-weight: 600;
+ color: var(--aw-on-surface);
+ margin-bottom: 4px;
+}
+
+.wpaw-research-result-url {
+ font-size: 11px;
+ color: var(--aw-primary);
+ margin-bottom: 4px;
+ word-break: break-all;
+}
+
+.wpaw-research-result-desc {
+ color: var(--aw-on-surface-variant);
+ font-size: 12px;
+}
+
+.wpaw-research-fetched {
+ margin-top: 16px;
+ padding-top: 12px;
+ border-top: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-research-fetched-title {
+ font-size: 12px;
+ color: var(--aw-primary);
+ font-weight: 600;
+ margin-bottom: 8px;
+}
+
+.wpaw-research-fetched-content {
+ background: var(--aw-surface-container);
+ padding: 10px;
+ border-radius: var(--aw-radius);
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+ max-height: 200px;
+ overflow-y: auto;
+}
+
+/* =========================================================================
+ 6. MESSAGE CONTENT & AI RESPONSE
+ ========================================================================= */
+
+.wpaw-message-content {
+ line-height: 1.6;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+}
+
+.wpaw-citation {
+ display: inline;
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--aw-primary);
+ background: var(--aw-primary-fixed);
+ padding: 1px 5px;
+ border-radius: 4px;
+ margin: 0 1px;
+ vertical-align: super;
+ line-height: 1;
+ letter-spacing: 0.02em;
+}
+
+.wpaw-ai-response {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin: 0 0 16px 0;
+ padding-left: 10px;
+ border-left: 2px solid var(--aw-outline-variant);
+ position: relative;
+}
+
+.wpaw-ai-item {
+ margin: 0;
+ position: relative;
+}
+
+.wpaw-plan-card,
+.wpaw-edit-plan {
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ padding: 14px;
+ border-radius: var(--aw-radius-md);
+ box-shadow: var(--aw-shadow-sm);
+}
+
+.wpaw-plan-card:hover {
+ border-color: var(--aw-primary);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.wpaw-plan-title {
+ font-weight: 600;
+ font-size: 14px;
+ margin-bottom: 8px;
+ color: var(--aw-on-surface);
+}
+
+/* =========================================================================
+ 7. PLAN SECTIONS
+ ========================================================================= */
+
+.wpaw-plan-section-status {
+ font-size: 11px;
+ letter-spacing: 0.05em;
+ padding: 2px 8px;
+ border-radius: 10px;
+ margin-top: 2px;
+ font-weight: 600;
+}
+
+.wpaw-plan-section.pending .wpaw-plan-section-status {
+ color: var(--aw-on-surface-variant);
+ background: var(--aw-surface-container);
+}
+
+.wpaw-plan-section.done .wpaw-plan-section-status {
+ color: var(--aw-tertiary);
+ background: rgba(0, 81, 18, 0.1);
+}
+
+.wpaw-plan-section.in_progress .wpaw-plan-section-status {
+ color: var(--aw-primary);
+ background: rgba(0, 73, 113, 0.1);
+}
+
+.wpaw-plan-sections,
+.wpaw-edit-plan-list {
+ margin: 0 0 10px 18px;
+ padding: 0;
+ color: var(--aw-on-surface);
+ font-size: 13px;
+}
+
+.wpaw-plan-section {
+ margin-bottom: 8px;
+}
+
+.wpaw-plan-section-row {
+ display: flex;
+ gap: 8px;
+ align-items: flex-start;
+}
+
+.wpaw-plan-section-check {
+ margin-top: 2px;
+}
+
+input.wpaw-plan-section-check:checked::before {
+ filter: brightness(500%) contrast(200%) saturate(100%);
+}
+
+.wpaw-plan-section-body {
+ flex: 1;
+}
+
+.wpaw-clear-context {
+ margin-left: auto;
+ background: var(--aw-surface-container-low);
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface-variant);
+ padding: 4px 8px;
+ border-radius: var(--aw-radius-sm);
+ font-size: 11px;
+ cursor: pointer;
+}
+
+.wpaw-clear-context:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+/* Editor Lock Banner */
+.wpaw-editor-lock-banner {
+ background: #fef3c7;
+ color: #92400e;
+ padding: 8px 10px;
+ border: 1px solid #fcd34d;
+ font-size: 12px;
+ margin-bottom: 10px;
+}
+
+.wpaw-refinement-lock-banner {
+ background: var(--aw-primary-fixed);
+ color: var(--aw-on-primary-fixed);
+ padding: 8px 10px;
+ border: 1px solid var(--aw-primary);
+ font-size: 12px;
+ margin-bottom: 10px;
+}
+
+/* Refine Confirm Modal */
+.wpaw-refine-confirm-overlay {
+ position: absolute;
+ inset: 0;
+ z-index: 1200;
+ background: rgba(0, 0, 0, 0.35);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 16px;
+}
+
+.wpaw-refine-confirm-modal {
+ width: 100%;
+ max-width: 420px;
+ background: var(--aw-surface-container-lowest);
+ color: var(--aw-on-surface);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-lg);
+ padding: 16px;
+ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
+}
+
+.wpaw-refine-confirm-title {
+ font-size: 15px;
+ font-weight: 700;
+ margin-bottom: 8px;
+}
+
+.wpaw-refine-confirm-body {
+ font-size: 13px;
+ line-height: 1.5;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 12px;
+}
+
+.wpaw-refine-confirm-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ margin-top: 10px;
+}
+
+/* Block Refining Indicator */
+.wpaw-block-refining {
+ position: relative;
+ outline: 2px dashed var(--aw-primary);
+ outline-offset: 2px;
+}
+
+.wpaw-block-refining::before {
+ content: "REFINING";
+ position: absolute;
+ top: -12px;
+ right: 8px;
+ background: var(--aw-primary);
+ color: var(--aw-on-primary);
+ font-size: 10px;
+ line-height: 1;
+ padding: 3px 6px;
+ border-radius: var(--aw-radius);
+ z-index: 20;
+ letter-spacing: 0;
+ font-weight: 700;
+}
+
+/* Refinement lock: prevent content editing while still allowing page scroll */
+.wpaw-refining-locked .editor-styles-wrapper [contenteditable="true"],
+.wpaw-refining-locked .block-editor-rich-text__editable,
+.wpaw-refining-locked .block-editor-writing-flow [role="textbox"] {
+ pointer-events: none !important;
+ user-select: none !important;
+ caret-color: transparent !important;
+}
+
+.wpaw-refining-locked .block-editor-block-toolbar,
+.wpaw-refining-locked .block-editor-default-block-appender,
+.wpaw-refining-locked .editor-block-list-item__inline-menu,
+.wpaw-refining-locked .block-editor-inserter {
+ pointer-events: none !important;
+ opacity: 0.5;
+}
+
+/* AI Response Code Blocks */
+.wpaw-ai-response pre {
+ background: var(--aw-surface-container);
+ padding: 12px;
+ border-radius: var(--aw-radius-lg);
+ overflow-x: auto;
+
+ font-size: 12px;
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface);
+}
+
+.wpaw-ai-response code {
+ background: var(--aw-surface-container);
+ color: var(--aw-primary);
+ padding: 2px 5px;
+ border-radius: var(--aw-radius);
+
+ font-size: 12px;
+}
+
+/* Editor Locked Overlay */
+.wpaw-editor-locked
+ .admin-ui-navigable-region.interface-interface-skeleton__content,
+.wpaw-refining-locked
+ .admin-ui-navigable-region.interface-interface-skeleton__content {
+ position: relative;
+}
+
+.wpaw-editor-locked
+ .admin-ui-navigable-region.interface-interface-skeleton__content::after,
+.wpaw-refining-locked
+ .admin-ui-navigable-region.interface-interface-skeleton__content::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.15);
+ z-index: 999;
+ pointer-events: none;
+}
+
+/* =========================================================================
+ 8. OUTLINE VERSION TRACKING & INLINE EDITING
+ ========================================================================= */
+
+.wpaw-plan-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.wpaw-plan-version {
+ font-size: 10px;
+ background: var(--aw-surface-container);
+ color: var(--aw-on-surface-variant);
+ padding: 2px 6px;
+ border-radius: var(--aw-radius);
+ font-weight: 500;
+}
+
+.wpaw-plan-section-drag {
+ cursor: grab;
+ color: var(--aw-on-surface-variant);
+ padding: 0 4px;
+ font-size: 12px;
+ opacity: 0.5;
+ transition: opacity var(--aw-transition-fast);
+}
+
+.wpaw-plan-section-drag:hover {
+ opacity: 1;
+}
+
+.wpaw-plan-section-drag:active {
+ cursor: grabbing;
+}
+
+/* Drag and drop visual feedback */
+.wpaw-plan-section.dragging {
+ opacity: 0.5;
+ background: rgba(0, 73, 113, 0.1);
+}
+
+.wpaw-plan-section.drag-over {
+ border-top: 2px solid var(--aw-primary);
+}
+
+.wpaw-plan-section-drag:hover {
+ cursor: grab;
+}
+
+.wpaw-plan-section-drag:active {
+ cursor: grabbing;
+}
+
+.wpaw-plan-section-edit {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ flex: 1;
+}
+
+.wpaw-plan-section-edit-input {
+ flex: 1;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-primary);
+ border-radius: var(--aw-radius);
+ color: var(--aw-on-surface);
+ padding: 4px 8px;
+ font-size: 13px;
+}
+
+.wpaw-plan-section-edit-input:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+}
+
+.wpaw-plan-section-edit-save,
+.wpaw-plan-section-edit-cancel {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 12px;
+ padding: 4px;
+ border-radius: var(--aw-radius);
+ transition: background var(--aw-transition-fast);
+}
+
+.wpaw-plan-section-edit-save {
+ color: var(--aw-tertiary);
+}
+
+.wpaw-plan-section-edit-save:hover {
+ background: rgba(0, 81, 18, 0.1);
+}
+
+.wpaw-plan-section-edit-cancel {
+ color: var(--aw-error);
+}
+
+.wpaw-plan-section-edit-cancel:hover {
+ background: rgba(186, 26, 26, 0.1);
+}
+
+.wpaw-plan-section-edit-btn {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 12px;
+ padding: 4px;
+ opacity: 0;
+ transition: opacity var(--aw-transition-fast);
+ margin-left: auto;
+}
+
+.wpaw-plan-section-row:hover .wpaw-plan-section-edit-btn {
+ opacity: 1;
+}
+
+.wpaw-plan-section-wordcount {
+ font-size: 10px;
+ color: var(--aw-on-surface-variant);
+ margin-top: 2px;
+}
+
+/* =========================================================================
+ 9. REFINEMENT ACTIONS PANEL
+ ========================================================================= */
+
+.wpaw-refinement-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 16px;
+ background: var(--aw-surface-container-low);
+ border-top: 1px solid var(--aw-outline-variant);
+ flex-wrap: wrap;
+}
+
+.wpaw-refinement-actions-label {
+ font-size: 11px;
+ letter-spacing: 0.05em;
+ color: var(--aw-on-surface-variant);
+ font-weight: 600;
+}
+
+.wpaw-refinement-btn {
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+ color: var(--aw-on-surface-variant);
+ cursor: pointer;
+ font-size: 12px;
+ padding: 6px 12px;
+ transition: all var(--aw-transition-fast);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.wpaw-refinement-btn:hover {
+ background: var(--aw-surface-container);
+ border-color: var(--aw-outline);
+ color: var(--aw-on-surface);
+}
+
+.wpaw-refinement-btn:active {
+ transform: scale(0.98);
+}
+
+.wpaw-plan-actions {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 10px;
+}
+
+.wpaw-edit-plan-item {
+ margin-bottom: 6px;
+ line-height: 1.4;
+}
+
+.wpaw-edit-plan-preview-label {
+ font-size: 12px;
+ letter-spacing: 0.04em;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 6px;
+}
+
+.wpaw-edit-plan-item-title {
+ font-weight: 600;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-edit-plan-item-before,
+.wpaw-edit-plan-item-after {
+ font-size: 12px;
+ margin-top: 2px;
+}
+
+.wpaw-edit-plan-item-target {
+ margin-top: 6px;
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+ background: none;
+ border: none;
+ padding: 0;
+ text-align: left;
+ cursor: pointer;
+}
+
+.wpaw-edit-plan-item-target:hover {
+ color: var(--aw-primary);
+ text-decoration: underline;
+}
+
+.wpaw-edit-plan-item-target:disabled {
+ color: var(--aw-on-surface-variant);
+ cursor: default;
+ text-decoration: none;
+}
+
+.wpaw-edit-plan-item-before {
+ border-left: 2px solid #b45309;
+ padding-left: 6px;
+ color: #b45309;
+}
+
+.wpaw-edit-plan-item-after {
+ border-left: 2px solid var(--aw-tertiary);
+ padding-left: 6px;
+ color: var(--aw-tertiary);
+}
+
+/* Response / AI Response Timeline */
+.wpaw-response {
+ margin: 0 0 12px 0;
+ border-left: 2px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface);
+}
+
+.wpaw-ai-response .wpaw-response {
+ border-left: none;
+}
+
+.wpaw-ai-response .wpaw-response::before {
+ content: "";
+ position: absolute;
+ left: -15px;
+ top: 20px;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--aw-outline-variant);
+ border: 1px solid var(--aw-outline-subtle);
+ box-shadow: 0 0 0 2px var(--aw-surface-container-lowest);
+}
+
+.wpaw-streaming-indicator {
+ padding-left: 12px;
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-streaming-indicator::after {
+ content: "...";
+ display: inline-block;
+ width: 18px;
+ animation: wpaw-ellipsis 1.1s infinite;
+}
+
+.wpaw-edit-plan {
+ padding: 12px;
+ border: 1px dashed var(--aw-outline-variant);
+}
+
+.wpaw-edit-plan-title {
+ font-weight: 600;
+ margin-bottom: 6px;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-edit-plan-summary {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 10px;
+}
+
+.wpaw-edit-plan-actions {
+ display: flex;
+ gap: 8px;
+}
+
+@keyframes wpaw-ellipsis {
+ 0% {
+ content: ".";
+ }
+
+ 33% {
+ content: "..";
+ }
+
+ 66% {
+ content: "...";
+ }
+
+ 100% {
+ content: ".";
+ }
+}
+
+/* Timeline Progress */
+.wpaw-timeline-entry {
+ display: flex;
+ gap: 15px;
+ margin-bottom: 0;
+ padding: 10px 12px;
+ box-shadow: none;
+ position: relative;
+ font-size: 12.5px;
+ line-height: 1.4;
+}
+
+.wpaw-timeline-entry:last-child {
+ margin-bottom: 16px;
+}
+
+.wpaw-timeline-entry:not(:last-child) {
+ padding-bottom: 18px;
+}
+
+/* Colored line for active timeline */
+.wpaw-timeline-entry.active:not(:first-of-type)::before {
+ background: var(--aw-primary);
+ display: none;
+}
+
+/* Colored line for completed timeline */
+.wpaw-timeline-entry.complete:not(:first-of-type)::before {
+ background: var(--aw-tertiary);
+ display: none;
+}
+
+.wpaw-timeline-entry.inactive {
+ background: transparent;
+ border: 1px dashed var(--aw-outline-variant);
+ margin-bottom: 15px;
+ opacity: 0.8;
+}
+
+.wpaw-timeline-entry.complete {
+ background: rgba(0, 108, 28, 0.04);
+}
+
+.wpaw-processing-indicator {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin-top: 6px;
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-processing-indicator .components-spinner {
+ margin: 0;
+}
+
+.wpaw-timeline-dot {
+ flex-shrink: 0;
+ width: 12px;
+ height: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--aw-surface-container);
+ border-radius: 50%;
+ position: absolute;
+ left: -17px;
+ z-index: 2;
+ border: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-timeline-entry.is-current .wpaw-timeline-dot {
+ background: var(--aw-primary-fixed);
+ box-shadow: 0 0 0 2px var(--aw-primary);
+ border-color: var(--aw-primary);
+ animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+}
+
+.wpaw-timeline-entry.complete .wpaw-timeline-dot {
+ background: rgba(0, 108, 28, 0.08);
+ box-shadow: 0 0 0 1px var(--aw-tertiary);
+ border-color: var(--aw-tertiary);
+ color: var(--aw-tertiary);
+}
+
+.wpaw-timeline-entry.inactive .wpaw-timeline-dot {
+ background: var(--aw-surface-container);
+ box-shadow: none;
+ border-color: var(--aw-outline-variant);
+}
+
+.wpaw-plan-section-row input[type="checkbox"] {
+ transform: translateY(3px);
+}
+
+@keyframes pulse-ring {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(0, 73, 113, 0.5);
+ }
+
+ 70% {
+ box-shadow: 0 0 0 6px rgba(0, 73, 113, 0);
+ }
+
+ 100% {
+ box-shadow: 0 0 0 0 rgba(0, 73, 113, 0);
+ }
+}
+
+/* =========================================================================
+ 10. TIMELINE CONTENT
+ ========================================================================= */
+
+.wpaw-timeline-content {
+ flex: 1;
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ sans-serif;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-timeline-message {
+ font-size: 12.5px;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 5px;
+ line-height: 1.5;
+}
+
+.wpaw-timeline-complete {
+ font-size: 11.5px;
+ color: var(--aw-tertiary);
+ font-weight: 600;
+ letter-spacing: 0.02em;
+}
+
+/* =========================================================================
+ 11. ACTIONS & BUTTONS
+ ========================================================================= */
+
+.wpaw-actions {
+ display: flex;
+ gap: 10px;
+ margin-top: 12px;
+}
+
+.wpaw-actions button {
+ flex: 1;
+}
+
+/* Primary Button */
+.wpaw-actions .is-primary,
+.wpaw-actions .components-button.is-primary,
+.wpaw-plan-actions .is-primary {
+ background: var(--aw-primary);
+ border: 1px solid var(--aw-primary);
+ border-radius: var(--aw-radius-lg);
+ padding: 8px 14px;
+ font-weight: 400;
+ font-size: 13px;
+ color: var(--aw-on-primary);
+ transition: background var(--aw-transition-fast);
+ box-shadow: none;
+}
+
+.wpaw-actions .is-primary:hover,
+.wpaw-actions .components-button.is-primary:hover,
+.wpaw-plan-actions .is-primary:hover {
+ background: var(--aw-primary-container);
+ border-color: var(--aw-primary-container);
+}
+
+.components-button.is-primary,
+.components-button.is-secondary {
+ justify-content: center;
+}
+
+.wpaw-actions .is-primary:disabled {
+ background: var(--aw-on-surface-variant);
+ border-color: var(--aw-on-surface-variant);
+ color: var(--aw-on-primary);
+}
+
+/* =========================================================================
+ 12. CONFIG TAB
+ ========================================================================= */
+
+.wpaw-config-tab {
+ padding: 20px 0;
+}
+
+.wpaw-config-tab .wpaw-config-unavailable {
+ text-align: center;
+ padding: 40px 20px;
+ color: var(--aw-on-surface-variant);
+ font-style: italic;
+}
+
+.wpaw-config-tab .wpaw-tab-header {
+ position: absolute;
+ /*width: calc(100% - 15px);*/
+ width: 100%;
+ z-index: 2;
+}
+
+.wpaw-config-tab > *:nth-child(2) {
+ margin-top: 60px;
+}
+
+.wpaw-config-tab h3 {
+ margin: 0 0 20px 0;
+ font-size: 18px;
+ color: var(--aw-primary);
+ border-bottom: 2px solid var(--aw-outline-variant);
+ padding-bottom: 10px;
+}
+
+.wpaw-config-section {
+ padding: 12px;
+ background: var(--aw-surface-container-lowest);
+ border-radius: 0;
+ border: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-config-section:hover {
+ border-color: var(--aw-outline);
+}
+
+.wpaw-config-section label {
+ display: block;
+ font-weight: 600;
+ margin-bottom: 6px;
+ color: var(--aw-on-surface);
+ font-size: 13px;
+}
+
+.wpaw-select {
+ width: 100%;
+ padding: 8px 10px;
+ font-size: 11px;
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-sm);
+ background: var(--aw-surface-container-lowest);
+ cursor: pointer;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-config-section .wpaw-select {
+ width: 100% !important;
+ max-width: unset !important;
+}
+
+.wpaw-select:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+ box-shadow: 0 0 0 1px var(--aw-primary);
+}
+
+.wpaw-config-section h4 {
+ margin: 0 0 10px 0;
+ font-size: 16px;
+ color: var(--aw-on-surface);
+}
+
+/* =========================================================================
+ 13. COST TAB
+ ========================================================================= */
+
+.wpaw-cost-tab {
+ padding: 20px 0;
+}
+
+.wpaw-cost-tab h3 {
+ margin: 0 0 20px 0;
+ font-size: 18px;
+ color: var(--aw-primary);
+ border-bottom: 2px solid var(--aw-outline-variant);
+ padding-bottom: 10px;
+}
+
+.wpaw-cost-card {
+ display: grid;
+}
+
+.wpaw-cost-stat {
+ padding: 12px;
+ background: var(--aw-surface-container-lowest);
+ border-radius: 0;
+ border: 1px solid var(--aw-outline-variant);
+ text-align: center;
+}
+
+.wpaw-cost-stat:hover {
+ border-color: var(--aw-outline);
+}
+
+.wpaw-cost-stat label {
+ display: block;
+ font-size: 13px;
+ color: var(--aw-on-surface-variant);
+ font-weight: 600;
+ margin-bottom: 6px;
+}
+
+.wpaw-cost-value {
+ font-size: 22px;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-budget-bar {
+ width: 100%;
+ height: 10px;
+ background: var(--aw-surface-container);
+ overflow: hidden;
+ margin-bottom: 10px;
+}
+
+.wpaw-budget-bar ~ .description {
+ padding: 0 12px;
+}
+
+.wpaw-budget-fill {
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ var(--aw-tertiary),
+ var(--aw-tertiary-container)
+ );
+ transition:
+ width 0.5s ease,
+ background 0.3s ease;
+}
+
+.wpaw-budget-fill.warning {
+ background: linear-gradient(90deg, #d97706, #f59e0b);
+}
+
+.wpaw-budget-fill.danger {
+ background: linear-gradient(90deg, var(--aw-error), #ef5350);
+}
+
+.wpaw-refresh-btn {
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ padding: 4px;
+ margin-left: auto;
+ transition: transform 0.2s ease;
+}
+
+.wpaw-refresh-btn:hover {
+ transform: rotate(180deg);
+}
+
+.wpaw-cost-remaining .wpaw-cost-value {
+ font-weight: 700;
+}
+
+.wpaw-cost-value.ok {
+ color: var(--aw-tertiary);
+}
+
+.wpaw-cost-value.warning {
+ color: #d97706;
+}
+
+.wpaw-cost-value.danger {
+ color: var(--aw-error);
+}
+
+.wpaw-budget-section {
+ padding: 12px;
+ margin-top: 8px;
+}
+
+.wpaw-budget-label {
+ display: flex;
+ justify-content: space-between;
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 6px;
+}
+
+.wpaw-budget-warning {
+ padding: 8px 12px;
+ margin: 8px 12px;
+ border-radius: var(--aw-radius);
+ font-size: 12px;
+ text-align: center;
+}
+
+.wpaw-budget-warning.warning {
+ background: rgba(217, 119, 6, 0.1);
+ color: #d97706;
+}
+
+.wpaw-budget-warning.danger {
+ background: rgba(186, 26, 26, 0.1);
+ color: var(--aw-error);
+}
+
+.wpaw-cost-footer {
+ padding: 12px;
+ margin-top: 12px;
+ border-top: 1px solid var(--aw-outline-variant);
+ text-align: center;
+}
+
+.wpaw-cost-settings-link {
+ color: var(--aw-on-surface-variant);
+ text-decoration: none;
+ font-size: 12px;
+ transition: color 0.2s ease;
+}
+
+.wpaw-cost-settings-link:hover {
+ color: var(--aw-primary);
+}
+
+/* Cost History Table */
+.wpaw-cost-history {
+ margin: 16px 12px;
+}
+
+.wpaw-cost-history h4 {
+ color: var(--aw-on-surface);
+ font-size: 13px;
+ font-weight: 600;
+ margin: 0 0 12px 0;
+ letter-spacing: 0.5px;
+}
+
+.wpaw-cost-table-wrapper {
+ max-height: 300px;
+ overflow-y: auto;
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius);
+}
+
+.wpaw-cost-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 12px;
+}
+
+.wpaw-cost-table thead {
+ position: sticky;
+ top: 0;
+ background: var(--aw-surface-container-low);
+ z-index: 1;
+}
+
+.wpaw-cost-table th {
+ padding: 8px 6px;
+ text-align: left;
+ font-weight: 600;
+ color: var(--aw-on-surface-variant);
+ border-bottom: 1px solid var(--aw-outline-variant);
+ font-size: 11px;
+ background-color: var(--aw-surface-container-low);
+}
+
+.wpaw-cost-table th.wpaw-cell-center {
+ text-align: center;
+}
+
+.wpaw-cost-table th.wpaw-cell-right {
+ text-align: right;
+}
+
+.wpaw-cost-table td {
+ padding: 8px 6px;
+ color: var(--aw-on-surface);
+ border-bottom: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-cost-table tbody tr:hover {
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-cost-table td:nth-child(4),
+.wpaw-cost-table td:nth-child(5) {
+ text-align: right;
+}
+
+.wpaw-cost-table th:nth-child(4),
+.wpaw-cost-table th:nth-child(5) {
+ text-align: right;
+}
+
+/* Mono font for model, tokens, cost cells */
+.wpaw-mono {
+}
+
+/* Cell alignment utilities */
+.wpaw-cell-center {
+ text-align: center;
+}
+
+.wpaw-cell-right {
+ text-align: right;
+}
+
+/* =========================================================================
+ 14. CLARIFICATION QUIZ
+ ========================================================================= */
+
+.wpaw-chat-container.is-dimmed .wpaw-activity-log,
+.wpaw-chat-container.is-dimmed .wpaw-agent-workspace-card {
+ opacity: 0.35;
+ filter: grayscale(60%) blur(1.5px);
+ pointer-events: none;
+ transition:
+ opacity 0.3s ease,
+ filter 0.3s ease;
+}
+
+.wpaw-chat-container .wpaw-activity-log,
+.wpaw-chat-container .wpaw-agent-workspace-card {
+ transition:
+ opacity 0.3s ease,
+ filter 0.3s ease;
+}
+
+.wpaw-clarification-quiz {
+ position: absolute;
+ bottom: calc(100% + 12px);
+ left: 12px;
+ right: 12px;
+ background: var(--aw-surface-container-high);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-lg);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+ z-index: 100;
+ display: flex;
+ flex-direction: column;
+ animation: wpaw-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes wpaw-slide-up {
+ from {
+ opacity: 0;
+ transform: translateY(15px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.wpaw-quiz-header {
+ background: var(--aw-surface-container-highest);
+ padding: 10px 14px;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ border-radius: var(--aw-radius-lg) var(--aw-radius-lg) 0 0;
+}
+
+.wpaw-quiz-header h3 {
+ margin: 0;
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--aw-primary);
+ letter-spacing: 0.05em;
+
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.wpaw-quiz-header h3::before {
+ content: "✨";
+}
+
+.wpaw-progress-bar {
+ width: 100%;
+ height: 4px;
+ background: var(--aw-surface-container);
+ border-radius: 2px;
+ overflow: hidden;
+}
+
+.wpaw-progress-fill {
+ height: 100%;
+ background: var(--aw-primary);
+ transition: width 0.3s ease;
+}
+
+.wpaw-quiz-header span {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ align-self: flex-end;
+ margin-top: -12px;
+}
+
+.wpaw-question-card {
+ background: transparent;
+ padding: 16px;
+ border-radius: 0;
+ border: none;
+ box-shadow: none;
+ margin-bottom: 0;
+ max-height: 50vh;
+ overflow-y: auto;
+}
+
+.wpaw-question-card h4 {
+ margin: 0 0 16px 0;
+ font-size: 14px;
+ color: var(--aw-on-surface);
+ font-weight: 500;
+ line-height: 1.5;
+}
+
+.wpaw-answer-options {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.wpaw-answer-options label {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 12px;
+ border: 2px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.wpaw-answer-options label:hover {
+ border-color: var(--aw-outline);
+}
+
+.wpaw-answer-options label:has(input:checked) {
+ border-color: var(--aw-primary);
+ background: var(--aw-primary-fixed);
+ color: var(--aw-on-primary-fixed);
+ font-weight: bold;
+}
+
+.wpaw-answer-options input[type="radio"],
+.wpaw-answer-options input[type="checkbox"] {
+ margin: 0 10px 0 0;
+ appearance: auto !important;
+ -webkit-appearance: auto !important;
+}
+
+.wpaw-answer-options input[type="radio"]:focus,
+.wpaw-answer-options input[type="checkbox"]:focus {
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+.wpaw-answer-options span {
+ flex: 1;
+}
+
+/* Textarea styling for open_text questions */
+.wpaw-answer-options textarea {
+ width: 100%;
+ min-height: 100px;
+ padding: 12px;
+ font-size: 14px;
+ line-height: 1.6;
+ border: 2px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+ background: var(--aw-surface-container-lowest);
+ transition: border-color 0.2s ease;
+}
+
+.wpaw-answer-options textarea:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+ box-shadow: 0 0 0 3px rgba(0, 73, 113, 0.1);
+}
+
+.wpaw-previous-answers {
+ margin-top: 15px;
+ padding: 15px;
+ background: var(--aw-surface-container-lowest);
+ border-radius: var(--aw-radius-md);
+ border: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-previous-answers strong {
+ display: block;
+ margin-bottom: 10px;
+ font-size: 13px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-question-label {
+ display: block;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--aw-primary);
+ margin-bottom: 3px;
+}
+
+.wpaw-answer-text {
+ margin: 0 0 10px 0;
+ padding: 8px 12px;
+ background: var(--aw-surface-container-low);
+ border-radius: var(--aw-radius);
+ font-size: 13px;
+}
+
+.wpaw-previous-answers > div:last-child .wpaw-answer-text {
+ margin-bottom: 0;
+}
+
+.wpaw-quiz-actions {
+ display: flex;
+ gap: 10px;
+ justify-content: space-between;
+ margin-top: 16px;
+ padding-top: 16px;
+ border-top: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-quiz-actions button {
+ justify-content: center;
+}
+
+.wpaw-quiz-actions button.is-primary {
+ flex: 1;
+}
+
+/* Custom answer input */
+.wpaw-custom-answer-wrapper {
+ margin-top: 12px;
+}
+
+.wpaw-custom-text-input {
+ width: 100%;
+ margin-top: 8px;
+ padding: 10px 12px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius);
+ color: var(--aw-on-surface);
+ font-size: 13px;
+
+ transition: border-color 0.2s;
+}
+
+.wpaw-custom-text-input:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+}
+
+/* =========================================================================
+ 15. CONFIG FORM STYLES
+ ========================================================================= */
+
+.wpaw-config-form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.wpaw-config-field {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 15px;
+ padding: 12px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+}
+
+.wpaw-config-label {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.wpaw-config-label-text {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-config-description {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+/* Toggle Switch */
+.wpaw-config-toggle {
+ position: relative;
+ display: inline-block;
+ width: 48px;
+ height: 24px;
+ flex-shrink: 0;
+ cursor: pointer;
+}
+
+.wpaw-config-toggle input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.wpaw-toggle-slider {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: var(--aw-outline-variant);
+ border-radius: 24px;
+ transition: 0.3s;
+}
+
+.wpaw-toggle-slider:before {
+ position: absolute;
+ content: "";
+ height: 18px;
+ width: 18px;
+ left: 3px;
+ bottom: 3px;
+ background-color: var(--aw-surface-container-lowest);
+ border-radius: 50%;
+ transition: 0.3s;
+}
+
+.wpaw-config-toggle input:checked + .wpaw-toggle-slider {
+ background-color: var(--aw-primary);
+}
+
+.wpaw-config-toggle input:checked + .wpaw-toggle-slider:before {
+ transform: translateX(24px);
+}
+
+/* Config Text Input */
+.wpaw-config-text-input {
+ width: 250px;
+ padding: 6px 10px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius);
+ color: var(--aw-on-surface);
+ font-size: 13px;
+
+ flex-shrink: 0;
+}
+
+.wpaw-config-text-input:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+}
+
+.wpaw-config-text-input::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+/* Question Card + Config Form integration */
+.wpaw-question-card .wpaw-config-form label {
+ display: flex;
+}
+
+.wpaw-question-card
+ .wpaw-config-form
+ .wpaw-config-label
+ .wpaw-config-description {
+ font-size: 11px;
+}
+
+.wpaw-question-card .wpaw-config-field:has(input[type="text"]) {
+ flex-direction: column;
+}
+
+.wpaw-question-card:has(.wpaw-config-form) {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.wpaw-question-card:has(.wpaw-config-form) h4,
+.wpaw-question-card:has(.wpaw-config-form) .wpaw-quiz-actions {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.wpaw-question-card .wpaw-config-form {
+ gap: 0;
+}
+
+.wpaw-question-card .wpaw-config-form .wpaw-config-field {
+ border-radius: unset !important;
+ border-width: 1px 0;
+ background-color: unset;
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.wpaw-question-card .wpaw-config-form .wpaw-config-field input[type="text"] {
+ background-color: var(--aw-surface-container-lowest) !important;
+}
+
+/* =========================================================================
+ 16. INFO MESSAGES
+ ========================================================================= */
+
+.wpaw-info {
+ padding: 12px 15px;
+ background: #fef3c7;
+ border-left: 4px solid #f59e0b;
+ border-radius: var(--aw-radius);
+ font-size: 13px;
+ margin: 10px 0;
+ line-height: 1.5;
+}
+
+.wpaw-info a {
+ color: #92400e;
+ font-weight: 600;
+ text-decoration: underline;
+}
+
+.wpaw-info a:hover {
+ color: #78350f;
+}
+
+/* =========================================================================
+ 17. BLOCK MENTION STYLES
+ ========================================================================= */
+
+.wpaw-block-mentioned {
+ outline: 2px solid var(--aw-primary) !important;
+ outline-offset: 2px;
+ box-shadow: 0 0 0 4px rgba(0, 73, 113, 0.15);
+ animation: wpaw-pulse 1.5s infinite;
+ transition: all 0.3s ease;
+}
+
+.wpaw-block-mentioned:hover {
+ outline-width: 3px;
+ box-shadow: 0 0 0 8px rgba(0, 73, 113, 0.2);
+}
+
+@keyframes wpaw-pulse {
+ 0%,
+ 100% {
+ box-shadow: 0 0 0 0px rgba(0, 73, 113, 0.15);
+ }
+
+ 50% {
+ box-shadow: 0 0 0 6px rgba(0, 73, 113, 0.3);
+ }
+}
+
+/* Mention autocomplete */
+.wpaw-mention-autocomplete {
+ position: absolute;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius);
+ max-height: 200px;
+ overflow-y: auto;
+ z-index: 1000;
+ box-shadow: var(--aw-shadow-sm);
+}
+
+.wpaw-mention-option {
+ padding: 8px 12px;
+ cursor: pointer;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+ transition: background var(--aw-transition-fast);
+}
+
+.wpaw-mention-option:hover,
+.wpaw-mention-option.selected {
+ background: var(--aw-primary-fixed);
+ border-left: 3px solid var(--aw-primary);
+}
+
+.wpaw-mention-option strong {
+ display: block;
+ color: var(--aw-on-surface);
+ font-size: 13px;
+}
+
+.wpaw-mention-option span {
+ display: block;
+ color: var(--aw-on-surface-variant);
+ font-size: 12px;
+ margin-top: 2px;
+}
+
+/* =========================================================================
+ RESPONSIVE
+ ========================================================================= */
+
+@media (max-width: 782px) {
+ .wpaw-cost-card {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 482px) {
+ .interface-complementary-area__fill:has(
+ #wp-agentic-writer\:wp-agentic-writer
+ ),
+ #wp-agentic-writer\:wp-agentic-writer {
+ width: 100vw !important;
+ }
+}
+
+/* =========================================================================
+ CUSTOM DOTS LOADER
+ ========================================================================= */
+
+.wpaw-dots-loader {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: var(--aw-primary);
+ box-shadow:
+ 12px 0 var(--aw-primary),
+ -12px 0 var(--aw-primary);
+ position: relative;
+ animation: wpaw-flash 0.5s ease-out infinite alternate;
+ margin: 0 20px 0 16px;
+ display: inline-block;
+}
+
+@keyframes wpaw-flash {
+ 0% {
+ background-color: var(--aw-primary-fixed);
+ box-shadow:
+ 12px 0 var(--aw-primary-fixed),
+ -12px 0 var(--aw-primary);
+ }
+
+ 50% {
+ background-color: var(--aw-primary);
+ box-shadow:
+ 12px 0 var(--aw-primary-fixed),
+ -12px 0 var(--aw-primary-fixed);
+ }
+
+ 100% {
+ background-color: var(--aw-primary-fixed);
+ box-shadow:
+ 12px 0 var(--aw-primary),
+ -12px 0 var(--aw-primary-fixed);
+ }
+}
+
+/* Time Elapsed Indicator */
+.wpaw-timeline-elapsed {
+ font-weight: 400;
+ color: var(--aw-on-surface-variant);
+ font-size: 11px;
+ margin-left: 4px;
+}
+
+/* =========================================================================
+ 18. STATUS BAR & COMMAND UI
+ ========================================================================= */
+
+/* Status Bar */
+.wpaw-status-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ background: var(--aw-surface-container-lowest);
+ color: var(--aw-on-surface);
+
+ font-size: 12px;
+ border-bottom: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-status-indicator {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.wpaw-status-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--aw-on-surface-variant);
+}
+
+.wpaw-status-dot.idle {
+ background: var(--aw-on-surface-variant);
+}
+
+.wpaw-status-dot.thinking {
+ background: #b45309;
+ animation: statusPulse 1s infinite;
+}
+
+.wpaw-status-dot.checking,
+.wpaw-status-dot.refining {
+ background: var(--aw-primary);
+ animation: statusPulse 0.8s infinite;
+}
+
+.wpaw-status-dot.writing {
+ background: var(--aw-primary);
+ animation: statusPulse 0.8s infinite;
+}
+
+.wpaw-status-dot.stopping {
+ background: #c2410c;
+ animation: statusPulse 0.55s infinite;
+}
+
+.wpaw-status-dot.complete {
+ background: var(--aw-tertiary);
+}
+
+.wpaw-status-dot.error {
+ background: var(--aw-error);
+}
+
+@keyframes statusPulse {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.4;
+ }
+}
+
+.wpaw-status-label {
+ letter-spacing: 0.05em;
+ font-weight: 500;
+}
+
+.wpaw-memanto-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 2px 8px;
+ border-radius: 10px;
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.02em;
+ background: var(--aw-primary-fixed);
+ color: var(--aw-on-primary-fixed);
+ border: 1px solid var(--aw-primary);
+ cursor: default;
+ white-space: nowrap;
+}
+
+.wpaw-status-cost {
+ color: var(--aw-on-surface-variant);
+ font-size: 11px;
+}
+
+/* Unified Activity Log */
+.wpaw-activity-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ background: var(--aw-surface-container-lowest);
+
+ font-size: 13px;
+ line-height: 1.5;
+}
+
+.wpaw-log-entry {
+ padding: 10px 12px;
+ border-left: 3px solid transparent;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-log-entry:last-child {
+ border-bottom: none;
+}
+
+/* User Command */
+.wpaw-log-entry.user-command {
+ background: var(--aw-primary-fixed);
+ border-left-color: var(--aw-primary);
+}
+
+.wpaw-log-entry.user-command::before {
+ content: "> ";
+ color: var(--aw-primary);
+ font-weight: 600;
+}
+
+/* Agent Status (thinking, processing) */
+.wpaw-log-entry.agent-status {
+ color: var(--aw-on-surface-variant);
+ padding-left: 24px;
+ position: relative;
+}
+
+.wpaw-log-entry.agent-status::before {
+ content: "\25CF";
+ position: absolute;
+ left: 12px;
+ color: var(--aw-outline);
+ font-size: 8px;
+}
+
+.wpaw-log-entry.agent-status.active::before {
+ color: var(--aw-primary);
+ animation: statusPulse 1s infinite;
+}
+
+/* Agent Success */
+.wpaw-log-entry.agent-success {
+ border-left-color: var(--aw-tertiary);
+ color: var(--aw-on-surface);
+}
+
+.wpaw-log-entry.agent-success::before {
+ content: "\2713 ";
+ color: var(--aw-tertiary);
+ font-weight: 600;
+}
+
+/* Agent Error */
+.wpaw-log-entry.agent-error {
+ background: var(--aw-error-container);
+ border-left-color: var(--aw-error);
+ color: var(--aw-on-error-container);
+}
+
+.wpaw-log-entry.agent-error::before {
+ content: "\2717 ";
+ color: var(--aw-error);
+ font-weight: 600;
+}
+
+/* Agent Response (prose) */
+.wpaw-log-entry.agent-response {
+ border-left-color: var(--aw-outline-variant);
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+}
+
+/* Command Input Area */
+.wpaw-command-area {
+ background: var(--aw-surface-container-lowest);
+ padding: 12px;
+ border-top: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-command-area:has(textarea:disabled) {
+ display: none;
+}
+
+.wpaw-command-toolbar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.wpaw-command-mode {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-command-mode-value {
+ color: var(--aw-primary);
+ font-weight: 600;
+}
+
+.wpaw-command-input-wrapper {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ background: var(--aw-surface-container-low);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-lg);
+ padding: 8px 10px;
+ position: relative;
+ z-index: 1;
+}
+
+.wpaw-command-prefix {
+ color: var(--aw-primary);
+
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 1.5;
+ user-select: none;
+}
+
+.wpaw-command-input-wrapper .components-textarea-control {
+ flex: 1;
+}
+
+.wpaw-command-input-wrapper textarea,
+.wpaw-command-input-wrapper .components-textarea-control__input {
+ flex: 1;
+ background: transparent !important;
+ border: none !important;
+ color: var(--aw-on-surface) !important;
+
+ font-size: 13px !important;
+ line-height: 1.5 !important;
+ resize: none !important;
+ min-height: 20px !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ box-shadow: none !important;
+}
+
+.wpaw-command-input-wrapper textarea::placeholder {
+ color: var(--aw-on-surface-variant) !important;
+}
+
+.wpaw-command-actions {
+ display: flex;
+ gap: 8px;
+ margin-top: 8px;
+}
+
+.wpaw-command-btn {
+ background: var(--aw-primary);
+ color: var(--aw-on-primary);
+ border: none;
+ border-radius: var(--aw-radius-sm);
+ padding: 8px 16px;
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: 0.05em;
+ cursor: pointer;
+ transition: background var(--aw-transition-fast);
+}
+
+.wpaw-command-btn:hover {
+ background: var(--aw-primary-container);
+}
+
+.wpaw-command-btn:disabled {
+ background: var(--aw-outline-variant);
+ color: var(--aw-on-surface-variant);
+ cursor: not-allowed;
+}
+
+.wpaw-command-btn.secondary {
+ background: transparent;
+ color: var(--aw-on-surface-variant);
+ border: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-command-btn.secondary:hover {
+ border-color: var(--aw-outline);
+ color: var(--aw-on-surface);
+}
+
+/* Minimal Tabs Override */
+.wpaw-tabs-minimal {
+ display: flex;
+ background: var(--aw-surface-container-lowest);
+ border-bottom: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-tabs-minimal .wpaw-tab-btn {
+ background: transparent;
+ color: var(--aw-on-surface-variant);
+ border: none;
+ border-bottom: 2px solid transparent;
+ padding: 10px 16px;
+ font-size: 12px;
+ letter-spacing: 0.05em;
+}
+
+.wpaw-tabs-minimal .wpaw-tab-btn:hover {
+ color: var(--aw-on-surface);
+}
+
+.wpaw-tabs-minimal .wpaw-tab-btn.active {
+ color: var(--aw-on-surface);
+ border-bottom-color: var(--aw-primary);
+}
+
+/* Status Bar Actions (Top Right) */
+.wpaw-status-actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.wpaw-status-icon-btn {
+ background: transparent;
+ border: none;
+ color: var(--aw-on-surface-variant);
+ cursor: pointer;
+ font-size: 14px;
+ padding: 2px;
+ line-height: 1;
+ transition:
+ color var(--aw-transition-fast),
+ transform var(--aw-transition-fast);
+}
+
+.wpaw-status-icon-btn:hover {
+ color: var(--aw-on-surface);
+ transform: scale(1.1);
+}
+
+.wpaw-status-icon-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.wpaw-undo-btn {
+ background: rgba(0, 73, 113, 0.1);
+ border-radius: var(--aw-radius);
+ padding: 4px 8px;
+ font-size: 12px;
+}
+
+.wpaw-undo-btn:hover:not(:disabled) {
+ background: rgba(0, 73, 113, 0.2);
+ color: var(--aw-primary);
+}
+
+/* Bottom Toolbar (Inline with Execute) */
+.wpaw-command-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 10px;
+ padding-top: 8px;
+ border-top: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-command-actions-group {
+ display: flex;
+ align-items: center;
+}
+
+.wpaw-command-actions-group button:last-child {
+ flex-shrink: 0;
+}
+
+.wpaw-command-mode-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.wpaw-command-label {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-command-mode-select {
+ background: transparent;
+ border: none;
+ color: var(--aw-primary);
+
+ font-size: 11px;
+ font-weight: 600;
+ cursor: pointer;
+ padding: 0;
+ margin: 0;
+ box-shadow: none;
+}
+
+.wpaw-command-mode-select:focus {
+ box-shadow: none;
+ outline: none;
+ text-decoration: underline;
+}
+
+/* Web Search Toggle */
+.wpaw-web-search-toggle {
+ display: flex !important;
+ margin-bottom: 0 !important;
+ align-items: center;
+ gap: 4px;
+ cursor: pointer;
+ padding: 4px 8px;
+ border-radius: var(--aw-radius);
+ transition: background var(--aw-transition-fast);
+}
+
+.wpaw-web-search-toggle:hover {
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-web-search-toggle input[type="checkbox"] {
+ display: none;
+}
+
+.wpaw-web-search-icon {
+ font-size: 12px;
+ opacity: 0.5;
+ transition: opacity var(--aw-transition-fast);
+}
+
+.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon {
+ opacity: 1;
+}
+
+.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon * {
+ stroke: var(--aw-tertiary);
+}
+
+.wpaw-web-search-label {
+ font-size: 10px;
+ letter-spacing: 0.05em;
+ color: var(--aw-on-surface-variant);
+ transition: color var(--aw-transition-fast);
+}
+
+.wpaw-web-search-toggle input:checked ~ .wpaw-web-search-label {
+ color: var(--aw-tertiary);
+}
+
+/* Blocked state (no Brave API key for local models) */
+.wpaw-web-search-toggle.wpaw-search-blocked {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.wpaw-web-search-toggle.wpaw-search-blocked:hover {
+ background: rgba(186, 26, 26, 0.05);
+}
+
+.wpaw-web-search-toggle.wpaw-search-blocked .wpaw-web-search-label {
+ color: var(--aw-error);
+ text-decoration: line-through;
+}
+
+.wpaw-command-text-btn {
+ background: transparent;
+ border: none;
+ color: var(--aw-on-surface-variant);
+
+ font-size: 10px;
+ cursor: pointer;
+ letter-spacing: 0.05em;
+ padding: 4px 8px;
+ transition: color var(--aw-transition-fast);
+}
+
+.wpaw-command-text-btn:hover {
+ color: var(--aw-error);
+}
+
+.wpaw-command-stop-btn {
+ background: var(--aw-error);
+ color: var(--aw-on-error);
+ border: none;
+
+ font-size: 11px;
+ font-weight: 600;
+ cursor: pointer;
+ padding: 6px 12px;
+ border-radius: var(--aw-radius);
+ transition: background var(--aw-transition-fast);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-command-stop-btn:hover {
+ background: #8b1515;
+}
+
+.wpaw-resume-actions {
+ display: flex;
+ gap: 8px;
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid var(--aw-outline-variant);
+}
+
+/* Circle Icon Buttons */
+.wpaw-command-circle-btn {
+ width: 40px !important;
+ height: 40px !important;
+ border-radius: 50%;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ padding: 0;
+}
+
+.wpaw-send-circle-btn {
+ background: var(--aw-primary);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-send-circle-btn:hover:not(:disabled) {
+ background: var(--aw-primary-container);
+ transform: scale(1.05);
+}
+
+.wpaw-send-circle-btn:disabled {
+ background: var(--aw-outline-variant);
+ color: var(--aw-on-surface-variant);
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.wpaw-stop-circle-btn {
+ background: var(--aw-error);
+ color: var(--aw-on-error);
+}
+
+.wpaw-stop-circle-btn:hover {
+ background: #8b1515;
+ transform: scale(1.05);
+}
+
+.wpaw-stop-circle-btn.is-stopping,
+.wpaw-stop-circle-btn.is-stopping:hover {
+ background: #c2410c;
+ cursor: wait;
+ transform: none;
+}
+
+.wpaw-stop-spinner {
+ animation: wpaw-spin 0.85s linear infinite;
+}
+
+.wpaw-command-circle-btn svg {
+ width: 20px !important;
+ height: 20px !important;
+ margin-bottom: unset !important;
+}
+
+/* =========================================================================
+ TAB CONTENT BASE (formerly dark-theme overrides — now the light base)
+ ========================================================================= */
+
+.wpaw-tab-content {
+ background: var(--aw-surface);
+ color: var(--aw-on-surface);
+ overflow-y: auto;
+ padding: 0;
+}
+
+/* Tab Header with Back Button */
+.wpaw-tab-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ background: var(--aw-surface-container-lowest);
+}
+
+.wpaw-tab-header h3 {
+ margin: 0;
+
+ font-size: 12px;
+ letter-spacing: 0.05em;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-back-btn {
+ background: transparent;
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface-variant);
+
+ font-size: 11px;
+ padding: 4px 10px;
+ border-radius: var(--aw-radius-sm);
+ cursor: pointer;
+ transition: all var(--aw-transition-fast);
+}
+
+.wpaw-back-btn:hover {
+ border-color: var(--aw-outline);
+ color: var(--aw-on-surface);
+}
+
+/* Config Sections — base styles */
+.wpaw-config-section {
+ padding: 16px;
+ border-top: unset;
+ border-right: unset;
+ border-left: unset;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ background-color: var(--aw-surface-container-lowest);
+}
+
+.wpaw-tab-content label {
+ display: block;
+
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+ margin-bottom: 8px;
+}
+
+.wpaw-select,
+.wpaw-tab-content input[type="text"],
+.wpaw-tab-content select {
+ background: var(--aw-surface-container-lowest) !important;
+ border: 1px solid var(--aw-outline-variant) !important;
+ color: var(--aw-on-surface) !important;
+ border-radius: var(--aw-radius-sm) !important;
+ padding: 6px 10px !important;
+ width: 100%;
+}
+
+.wpaw-tab-content input[type="text"]::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-tab-content .description,
+.wpaw-tab-content .components-checkbox-control__help {
+ color: var(--aw-on-surface-variant);
+
+ font-size: 11px;
+ margin-top: 6px;
+}
+
+/* Cost Card base overrides */
+.wpaw-tab-content .wpaw-cost-card {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+
+.wpaw-tab-content .wpaw-cost-stat {
+ border-top: unset;
+ border-right: unset;
+ border-left: unset;
+ border-bottom-color: var(--aw-outline-variant);
+}
+
+.wpaw-tab-content .wpaw-cost-stat label {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-tab-content .wpaw-cost-value {
+ color: var(--aw-on-surface);
+ font-size: 18px;
+}
+
+/* Panel body base */
+.wpaw-tab-content .components-panel__body {
+ background: var(--aw-surface);
+}
+
+/* =========================================================================
+ SEO SECTION STYLES / CONFIG DIVIDER
+ ========================================================================= */
+
+.wpaw-config-divider {
+ display: flex;
+ align-items: center;
+ margin: 16px 0 8px;
+ padding: 16px 16px 5px;
+ border-top: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-config-divider span {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-meta-info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 8px;
+ gap: 8px;
+}
+
+.wpaw-meta-info span {
+ font-size: 11px;
+}
+
+.wpaw-meta-info span.good {
+ color: var(--aw-tertiary);
+}
+
+.wpaw-meta-info span.warning {
+ color: #b45309;
+}
+
+.wpaw-meta-info .components-button {
+ font-size: 11px;
+ padding: 4px 8px;
+}
+
+.wpaw-tab-content textarea {
+ background: var(--aw-surface-container-lowest) !important;
+ color: var(--aw-on-surface) !important;
+ width: 100%;
+ min-height: 60px;
+ resize: vertical;
+}
+
+.wpaw-tab-content textarea::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+/* SEO Audit Styles */
+.wpaw-seo-audit-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
+
+.wpaw-seo-audit-header label {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+/* === PART 2 — Sections from original sidebar.css lines ~1700-5116 === */
+
+/* ===========================
+ ANSWER OPTIONS & QUESTION CARDS (cont.)
+ =========================== */
+.wpaw-answer-options {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.wpaw-answer-options label {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 12px;
+ border: 2px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.wpaw-answer-options label:hover {
+ border-color: var(--aw-on-surface);
+}
+
+.wpaw-answer-options label:has(input:checked) {
+ border-color: var(--aw-primary);
+ background: var(--aw-primary-fixed);
+ color: var(--aw-on-surface);
+ font-weight: bold;
+}
+
+.wpaw-answer-options input[type="radio"],
+.wpaw-answer-options input[type="checkbox"] {
+ margin: 0 10px 0 0;
+ appearance: auto !important;
+ -webkit-appearance: auto !important;
+}
+
+.wpaw-answer-options input[type="radio"]:focus,
+.wpaw-answer-options input[type="checkbox"]:focus {
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+.wpaw-answer-options span {
+ flex: 1;
+}
+
+/* Textarea styling for open_text questions */
+.wpaw-answer-options textarea {
+ width: 100%;
+ min-height: 100px;
+ padding: 12px;
+ font-size: 14px;
+ line-height: 1.6;
+ border: 2px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+ background: var(--aw-surface-container-lowest);
+ transition: border-color 0.2s ease;
+}
+
+.wpaw-answer-options textarea:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+ box-shadow: 0 0 0 3px rgba(0, 73, 113, 0.1);
+}
+
+.wpaw-previous-answers {
+ margin-top: 15px;
+ padding: 15px;
+ background: var(--aw-surface-container-lowest);
+ border-radius: var(--aw-radius-md);
+ border: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-previous-answers strong {
+ display: block;
+ margin-bottom: 10px;
+ font-size: 13px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-question-label {
+ display: block;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--aw-primary);
+ margin-bottom: 3px;
+}
+
+.wpaw-answer-text {
+ margin: 0 0 10px 0;
+ padding: 8px 12px;
+ background: var(--aw-surface-container);
+ border-radius: var(--aw-radius);
+ font-size: 13px;
+}
+
+.wpaw-previous-answers > div:last-child .wpaw-answer-text {
+ margin-bottom: 0;
+}
+
+.wpaw-quiz-actions {
+ display: flex;
+ gap: 10px;
+ justify-content: space-between;
+ margin-top: 20px;
+}
+
+.wpaw-quiz-actions button {
+ justify-content: center;
+}
+
+.wpaw-quiz-actions button.is-primary {
+ flex: 1;
+}
+
+/* Custom answer input */
+.wpaw-custom-answer-wrapper {
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-custom-text-input {
+ width: 100%;
+ margin-top: 8px;
+ padding: 8px 12px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius);
+ color: var(--aw-on-surface);
+ font-size: 13px;
+}
+
+.wpaw-custom-text-input:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+}
+
+/* Config form styles */
+.wpaw-config-form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.wpaw-config-field {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 15px;
+ padding: 12px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+}
+
+.wpaw-config-label {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.wpaw-config-label-text {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-config-description {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-config-toggle {
+ position: relative;
+ display: inline-block;
+ width: 48px;
+ height: 24px;
+ flex-shrink: 0;
+ cursor: pointer;
+}
+
+.wpaw-config-toggle input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.wpaw-toggle-slider {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: var(--aw-outline-variant);
+ border-radius: 24px;
+ transition: 0.3s;
+}
+
+.wpaw-toggle-slider:before {
+ position: absolute;
+ content: "";
+ height: 18px;
+ width: 18px;
+ left: 3px;
+ bottom: 3px;
+ background-color: var(--aw-surface-container-lowest);
+ border-radius: 50%;
+ transition: 0.3s;
+}
+
+.wpaw-config-toggle input:checked + .wpaw-toggle-slider {
+ background-color: var(--aw-primary);
+}
+
+.wpaw-config-toggle input:checked + .wpaw-toggle-slider:before {
+ transform: translateX(24px);
+}
+
+.wpaw-config-text-input {
+ width: 250px;
+ padding: 6px 10px;
+ background: var(--aw-surface-container-low);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius);
+ color: var(--aw-on-surface);
+ font-size: 13px;
+
+ flex-shrink: 0;
+}
+
+.wpaw-config-text-input:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+}
+
+.wpaw-config-text-input::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-question-card .wpaw-config-form label {
+ display: flex;
+}
+
+.wpaw-question-card
+ .wpaw-config-form
+ .wpaw-config-label
+ .wpaw-config-description {
+ font-size: 11px;
+}
+
+.wpaw-question-card .wpaw-config-field:has(input[type="text"]) {
+ flex-direction: column;
+}
+
+.wpaw-question-card:has(.wpaw-config-form) {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.wpaw-question-card:has(.wpaw-config-form) h4,
+.wpaw-question-card:has(.wpaw-config-form) .wpaw-quiz-actions {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.wpaw-question-card .wpaw-config-form {
+ gap: 0;
+}
+
+.wpaw-question-card .wpaw-config-form .wpaw-config-field {
+ border-radius: unset !important;
+ border-width: 1px 0;
+ background-color: unset;
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.wpaw-question-card .wpaw-config-form .wpaw-config-field input[type="text"] {
+ background-color: var(--aw-surface-container-lowest) !important;
+}
+
+/* ===========================
+ INFO MESSAGES
+ =========================== */
+.wpaw-info {
+ padding: 12px 15px;
+ background: var(--aw-primary-fixed);
+ border-left: 4px solid var(--aw-primary);
+ border-radius: var(--aw-radius);
+ font-size: 13px;
+ margin: 10px 0;
+ line-height: 1.5;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-info a {
+ color: var(--aw-primary);
+ font-weight: 600;
+ text-decoration: underline;
+}
+
+.wpaw-info a:hover {
+ color: var(--aw-primary-container);
+}
+
+/* ===========================
+ BLOCK MENTION STYLES
+ =========================== */
+.wpaw-block-mentioned {
+ outline: 2px solid var(--aw-primary) !important;
+ outline-offset: 2px;
+ box-shadow: 0 0 0 4px rgba(0, 73, 113, 0.2);
+ animation: wpaw-pulse 1.5s infinite;
+ transition: all 0.3s ease;
+}
+
+.wpaw-block-mentioned:hover {
+ outline-width: 3px;
+ box-shadow: 0 0 0 8px rgba(0, 73, 113, 0.3);
+}
+
+@keyframes wpaw-pulse {
+ 0%,
+ 100% {
+ box-shadow: 0 0 0 0px rgba(0, 73, 113, 0.2);
+ }
+
+ 50% {
+ box-shadow: 0 0 0 6px rgba(0, 73, 113, 0.4);
+ }
+}
+
+/* Mention autocomplete */
+.wpaw-mention-autocomplete {
+ position: absolute;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius);
+ max-height: 200px;
+ overflow-y: auto;
+ z-index: 1000;
+ box-shadow: var(--aw-shadow-sm);
+}
+
+.wpaw-mention-option {
+ padding: 8px 12px;
+ cursor: pointer;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+ transition: background 0.15s ease;
+}
+
+.wpaw-mention-option:hover,
+.wpaw-mention-option.selected {
+ background: var(--aw-primary-fixed);
+ border-left: 3px solid var(--aw-primary);
+}
+
+.wpaw-mention-option strong {
+ display: block;
+ color: var(--aw-on-surface);
+ font-size: 13px;
+}
+
+.wpaw-mention-option span {
+ display: block;
+ color: var(--aw-on-surface-variant);
+ font-size: 12px;
+ margin-top: 2px;
+}
+
+/* ===========================
+ RESPONSIVE
+ =========================== */
+@media (max-width: 782px) {
+ .wpaw-cost-card {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 482px) {
+ .interface-complementary-area__fill:has(
+ #wp-agentic-writer\:wp-agentic-writer
+ ),
+ #wp-agentic-writer\:wp-agentic-writer {
+ width: 100vw !important;
+ }
+}
+
+/* Custom Dots Loader for Agentic Vibe */
+.wpaw-dots-loader {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: var(--aw-primary);
+ box-shadow:
+ 12px 0 var(--aw-primary),
+ -12px 0 var(--aw-primary);
+ position: relative;
+ animation: wpaw-flash 0.5s ease-out infinite alternate;
+ margin: 0 20px 0 16px;
+ display: inline-block;
+}
+
+@keyframes wpaw-flash {
+ 0% {
+ background-color: var(--aw-primary-fixed);
+ box-shadow:
+ 12px 0 var(--aw-primary-fixed),
+ -12px 0 var(--aw-primary);
+ }
+
+ 50% {
+ background-color: var(--aw-primary);
+ box-shadow:
+ 12px 0 var(--aw-primary-fixed),
+ -12px 0 var(--aw-primary-fixed);
+ }
+
+ 100% {
+ background-color: var(--aw-primary-fixed);
+ box-shadow:
+ 12px 0 var(--aw-primary),
+ -12px 0 var(--aw-primary-fixed);
+ }
+}
+
+/* Time Elapsed Indicator */
+.wpaw-timeline-elapsed {
+ font-weight: 400;
+ color: var(--aw-on-surface-variant);
+ font-size: 11px;
+ margin-left: 4px;
+}
+
+/* ===========================
+ AGENTIC UI REVAMP
+ =========================== */
+
+/* Status Bar */
+.wpaw-status-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ background: var(--aw-surface-container);
+ color: var(--aw-on-surface);
+ font-size: 12px;
+ border-bottom: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-status-indicator {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.wpaw-status-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--aw-on-surface-variant);
+}
+
+.wpaw-status-dot.idle {
+ background: var(--aw-on-surface-variant);
+}
+
+.wpaw-status-dot.thinking {
+ background: #dba617;
+ animation: statusPulse 1s infinite;
+}
+
+.wpaw-status-dot.checking,
+.wpaw-status-dot.refining {
+ background: var(--aw-primary);
+ animation: statusPulse 0.8s infinite;
+}
+
+.wpaw-status-dot.writing {
+ background: var(--aw-primary);
+ animation: statusPulse 0.8s infinite;
+}
+
+.wpaw-status-dot.stopping {
+ background: #f97316;
+ animation: statusPulse 0.55s infinite;
+}
+
+.wpaw-status-dot.complete {
+ background: var(--aw-tertiary-container);
+}
+
+.wpaw-status-dot.error {
+ background: var(--aw-error);
+}
+
+@keyframes statusPulse {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.4;
+ }
+}
+
+.wpaw-status-label {
+ letter-spacing: 0.05em;
+ font-weight: 500;
+}
+
+.wpaw-memanto-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 2px 8px;
+ border-radius: 10px;
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.02em;
+ background: var(--aw-primary-fixed);
+ color: var(--aw-primary);
+ border: 1px solid var(--aw-primary-container);
+ cursor: default;
+ white-space: nowrap;
+}
+
+.wpaw-status-cost {
+ color: var(--aw-on-surface-variant);
+ font-size: 11px;
+}
+
+/* Unified Activity Log */
+.wpaw-activity-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ background: var(--aw-surface-container-lowest);
+ font-size: 13px;
+ line-height: 1.5;
+}
+
+.wpaw-log-entry {
+ padding: 10px 12px;
+ border-left: 3px solid transparent;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-log-entry:last-child {
+ border-bottom: none;
+}
+
+/* User Command */
+.wpaw-log-entry.user-command {
+ background: var(--aw-primary-fixed);
+ border-left-color: var(--aw-primary);
+}
+
+.wpaw-log-entry.user-command::before {
+ content: "> ";
+ color: var(--aw-primary);
+ font-weight: 600;
+}
+
+/* Agent Status (thinking, processing) */
+.wpaw-log-entry.agent-status {
+ color: var(--aw-on-surface-variant);
+ padding-left: 24px;
+ position: relative;
+}
+
+.wpaw-log-entry.agent-status::before {
+ content: "\25CF";
+ position: absolute;
+ left: 12px;
+ color: var(--aw-on-surface-variant);
+ font-size: 8px;
+}
+
+.wpaw-log-entry.agent-status.active::before {
+ color: var(--aw-primary);
+ animation: statusPulse 1s infinite;
+}
+
+/* Agent Success */
+.wpaw-log-entry.agent-success {
+ border-left-color: var(--aw-tertiary-container);
+ color: var(--aw-on-surface);
+}
+
+.wpaw-log-entry.agent-success::before {
+ content: "\2713 ";
+ color: var(--aw-tertiary-container);
+ font-weight: 600;
+}
+
+/* Agent Error */
+.wpaw-log-entry.agent-error {
+ background: var(--aw-error-container);
+ border-left-color: var(--aw-error);
+ color: var(--aw-error);
+}
+
+.wpaw-log-entry.agent-error::before {
+ content: "\2717 ";
+ color: var(--aw-error);
+ font-weight: 600;
+}
+
+/* Agent Response (prose) */
+.wpaw-log-entry.agent-response {
+ border-left-color: var(--aw-outline-variant);
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+}
+
+/* Command Input Area */
+.wpaw-command-area {
+ background: var(--aw-surface-container);
+ padding: 12px;
+ border-top: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-command-toolbar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.wpaw-command-mode {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-command-mode-value {
+ color: var(--aw-primary);
+ font-weight: 600;
+}
+
+.wpaw-command-input-wrapper {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-lg);
+ padding: 8px 10px;
+ position: relative;
+ z-index: 1;
+}
+
+.wpaw-command-prefix {
+ color: var(--aw-primary);
+
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 1.5;
+ user-select: none;
+}
+
+.wpaw-command-input-wrapper .components-textarea-control {
+ flex: 1;
+}
+
+.wpaw-command-input-wrapper textarea,
+.wpaw-command-input-wrapper .components-textarea-control__input {
+ flex: 1;
+ background: transparent !important;
+ border: none !important;
+ color: var(--aw-on-surface) !important;
+
+ font-size: 13px !important;
+ line-height: 1.5 !important;
+ resize: none !important;
+ min-height: 20px !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ box-shadow: none !important;
+}
+
+.wpaw-command-input-wrapper textarea::placeholder {
+ color: var(--aw-on-surface-variant) !important;
+}
+
+.wpaw-command-actions {
+ display: flex;
+ gap: 8px;
+ margin-top: 8px;
+}
+
+.wpaw-command-btn {
+ background: var(--aw-primary);
+ color: var(--aw-on-primary);
+ border: none;
+ border-radius: var(--aw-radius-sm);
+ padding: 8px 16px;
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: 0.05em;
+ cursor: pointer;
+ transition: background 0.1s ease;
+}
+
+.wpaw-command-btn:hover {
+ background: var(--aw-primary-container);
+}
+
+.wpaw-command-btn:disabled {
+ background: var(--aw-surface-container-high);
+ color: var(--aw-on-surface-variant);
+ cursor: not-allowed;
+}
+
+.wpaw-command-btn.secondary {
+ background: transparent;
+ color: var(--aw-on-surface-variant);
+ border: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-command-btn.secondary:hover {
+ border-color: var(--aw-on-surface-variant);
+ color: var(--aw-on-surface);
+}
+
+/* Minimal Tabs Override */
+.wpaw-tabs-minimal {
+ display: flex;
+ background: var(--aw-surface-container);
+ border-bottom: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-tabs-minimal .wpaw-tab-btn {
+ background: transparent;
+ color: var(--aw-on-surface-variant);
+ border: none;
+ border-bottom: 2px solid transparent;
+ padding: 10px 16px;
+ font-size: 12px;
+ letter-spacing: 0.05em;
+}
+
+.wpaw-tabs-minimal .wpaw-tab-btn:hover {
+ color: var(--aw-on-surface);
+}
+
+.wpaw-tabs-minimal .wpaw-tab-btn.active {
+ color: var(--aw-on-surface);
+ border-bottom-color: var(--aw-primary);
+}
+
+/* ===========================
+ UI REVAMP - PHASE 2
+ =========================== */
+
+/* Status Bar Actions (Top Right) */
+.wpaw-status-actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.wpaw-status-icon-btn {
+ background: transparent;
+ border: none;
+ color: var(--aw-on-surface-variant);
+ cursor: pointer;
+ font-size: 14px;
+ padding: 2px;
+ line-height: 1;
+ transition:
+ color 0.1s ease,
+ transform 0.1s ease;
+}
+
+.wpaw-status-icon-btn:hover {
+ color: var(--aw-on-surface);
+ transform: scale(1.1);
+}
+
+.wpaw-status-icon-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.wpaw-undo-btn {
+ background: var(--aw-primary-fixed);
+ border-radius: var(--aw-radius);
+ padding: 4px 8px;
+ font-size: 12px;
+}
+
+.wpaw-undo-btn:hover:not(:disabled) {
+ background: rgba(0, 73, 113, 0.3);
+ color: var(--aw-primary);
+}
+
+/* Bottom Toolbar (Inline with Execute) */
+.wpaw-command-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 10px;
+ padding-top: 8px;
+ border-top: 1px solid var(--aw-surface-container-low);
+}
+
+.wpaw-command-actions-group {
+ display: flex;
+ align-items: center;
+}
+
+.wpaw-command-actions-group button:last-child {
+ flex-shrink: 0;
+}
+
+.wpaw-command-mode-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.wpaw-command-label {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-command-mode-select {
+ background: transparent;
+ border: none;
+ color: var(--aw-primary);
+
+ font-size: 11px;
+ font-weight: 600;
+ cursor: pointer;
+ padding: 0;
+ margin: 0;
+ box-shadow: none;
+}
+
+.wpaw-command-mode-select:focus {
+ box-shadow: none;
+ outline: none;
+ text-decoration: underline;
+}
+
+/* Web Search Toggle */
+.wpaw-web-search-toggle {
+ display: flex !important;
+ margin-bottom: 0 !important;
+ align-items: center;
+ gap: 4px;
+ cursor: pointer;
+ padding: 4px 8px;
+ border-radius: var(--aw-radius);
+ transition: background 0.15s ease;
+}
+
+.wpaw-web-search-toggle:hover {
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-web-search-toggle input[type="checkbox"] {
+ display: none;
+}
+
+.wpaw-web-search-icon {
+ font-size: 12px;
+ opacity: 0.5;
+ transition: opacity 0.15s ease;
+}
+
+.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon {
+ opacity: 1;
+}
+
+.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon * {
+ stroke: var(--aw-tertiary-container);
+}
+
+.wpaw-web-search-label {
+ font-size: 10px;
+ letter-spacing: 0.05em;
+ color: var(--aw-on-surface-variant);
+ transition: color 0.15s ease;
+}
+
+.wpaw-web-search-toggle input:checked ~ .wpaw-web-search-label {
+ color: var(--aw-tertiary-container);
+}
+
+/* Blocked state (no Brave API key for local models) */
+.wpaw-web-search-toggle.wpaw-search-blocked {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.wpaw-web-search-toggle.wpaw-search-blocked:hover {
+ background: rgba(186, 26, 26, 0.08);
+}
+
+.wpaw-web-search-toggle.wpaw-search-blocked .wpaw-web-search-label {
+ color: var(--aw-error);
+ text-decoration: line-through;
+}
+
+.wpaw-command-text-btn {
+ background: transparent;
+ border: none;
+ color: var(--aw-on-surface-variant);
+
+ font-size: 10px;
+ cursor: pointer;
+ letter-spacing: 0.05em;
+ padding: 4px 8px;
+ transition: color 0.1s ease;
+}
+
+.wpaw-command-text-btn:hover {
+ color: var(--aw-error);
+}
+
+.wpaw-command-stop-btn {
+ background: var(--aw-error);
+ color: var(--aw-on-primary);
+ border: none;
+
+ font-size: 11px;
+ font-weight: 600;
+ cursor: pointer;
+ padding: 6px 12px;
+ border-radius: var(--aw-radius);
+ transition: background 0.1s ease;
+ letter-spacing: 0.05em;
+}
+
+.wpaw-command-stop-btn:hover {
+ background: #9c1515;
+}
+
+.wpaw-resume-actions {
+ display: flex;
+ gap: 8px;
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid var(--aw-outline-variant);
+}
+
+/* Circle Icon Buttons */
+.wpaw-command-circle-btn {
+ width: 40px !important;
+ height: 40px !important;
+ border-radius: 50%;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ padding: 0;
+}
+
+.wpaw-send-circle-btn {
+ background: var(--aw-primary);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-send-circle-btn:hover:not(:disabled) {
+ background: var(--aw-primary-container);
+ transform: scale(1.05);
+}
+
+.wpaw-send-circle-btn:disabled {
+ background: var(--aw-surface-container-high);
+ color: var(--aw-on-surface-variant);
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.wpaw-stop-circle-btn {
+ background: var(--aw-error);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-stop-circle-btn:hover {
+ background: #9c1515;
+ transform: scale(1.05);
+}
+
+.wpaw-stop-circle-btn.is-stopping,
+.wpaw-stop-circle-btn.is-stopping:hover {
+ background: #f97316;
+ cursor: wait;
+ transform: none;
+}
+
+.wpaw-stop-spinner {
+ animation: wpaw-spin 0.85s linear infinite;
+}
+
+.wpaw-command-circle-btn svg {
+ width: 20px !important;
+ height: 20px !important;
+ margin-bottom: unset !important;
+}
+
+/* Tab Content Styles (replacing dark-theme) */
+.wpaw-tab-content {
+ background: var(--aw-surface-container-lowest);
+ color: var(--aw-on-surface);
+ overflow-y: auto;
+ padding: 0;
+}
+
+/* Tab Header with Back Button */
+.wpaw-tab-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-tab-header h3 {
+ margin: 0;
+
+ font-size: 12px;
+ letter-spacing: 0.05em;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-back-btn {
+ background: transparent;
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface-variant);
+
+ font-size: 11px;
+ padding: 4px 10px;
+ border-radius: var(--aw-radius-sm);
+ cursor: pointer;
+ transition: all 0.1s ease;
+}
+
+.wpaw-back-btn:hover {
+ border-color: var(--aw-on-surface-variant);
+ color: var(--aw-on-surface);
+}
+
+/* Config Sections */
+.wpaw-tab-content .wpaw-config-section {
+ padding: 16px;
+ border-top: unset;
+ border-right: unset;
+ border-left: unset;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ background-color: var(--aw-surface-container-low);
+}
+
+.wpaw-tab-content label {
+ display: block;
+
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+ margin-bottom: 8px;
+}
+
+.wpaw-select,
+.wpaw-tab-content input[type="text"],
+.wpaw-tab-content select {
+ background: var(--aw-surface-container-lowest) !important;
+ border: 1px solid var(--aw-outline-variant) !important;
+ color: var(--aw-on-surface) !important;
+ border-radius: var(--aw-radius-sm) !important;
+ padding: 6px 10px !important;
+ width: 100%;
+}
+
+.wpaw-tab-content input[type="text"]::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-tab-content .description,
+.wpaw-tab-content .components-checkbox-control__help {
+ color: var(--aw-on-surface-variant);
+
+ font-size: 11px;
+ margin-top: 6px;
+}
+
+/* Cost Card overrides */
+.wpaw-tab-content .wpaw-cost-card {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+
+.wpaw-tab-content .wpaw-cost-stat {
+ border-top: unset;
+ border-right: unset;
+ border-left: unset;
+ border-bottom-color: var(--aw-outline-variant);
+}
+
+.wpaw-tab-content .wpaw-cost-stat label {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-tab-content .wpaw-cost-value {
+ color: var(--aw-on-surface);
+ font-size: 18px;
+}
+
+/* Ensure consistent background on tab panels */
+.wpaw-tab-content .components-panel__body {
+ background: var(--aw-surface-container-lowest);
+}
+
+/* ===========================
+ SEO SECTION STYLES
+ =========================== */
+.wpaw-config-divider {
+ display: flex;
+ align-items: center;
+ margin: 16px 0 8px;
+ padding: 16px 16px 5px;
+ border-top: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-config-divider span {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-meta-info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 8px;
+ gap: 8px;
+}
+
+.wpaw-meta-info span {
+ font-size: 11px;
+}
+
+.wpaw-meta-info span.good {
+ color: var(--aw-tertiary-container);
+}
+
+.wpaw-meta-info span.warning {
+ color: #dba617;
+}
+
+.wpaw-meta-info .components-button {
+ font-size: 11px;
+ padding: 4px 8px;
+}
+
+.wpaw-tab-content textarea {
+ background: var(--aw-surface-container-lowest) !important;
+ color: var(--aw-on-surface) !important;
+ width: 100%;
+ min-height: 60px;
+ resize: vertical;
+}
+
+.wpaw-tab-content textarea::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+/* SEO Audit Styles */
+.wpaw-seo-audit-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
+
+.wpaw-seo-audit-header label {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-seo-audit-results {
+ background: var(--aw-surface-container-low);
+ border-radius: var(--aw-radius);
+ padding: 12px;
+}
+
+.wpaw-seo-score {
+ display: flex;
+ align-items: baseline;
+ justify-content: center;
+ margin-bottom: 12px;
+ padding: 8px;
+ border-radius: var(--aw-radius);
+}
+
+.wpaw-seo-score.good {
+ background: rgba(0, 108, 28, 0.1);
+}
+
+.wpaw-seo-score.warning {
+ background: rgba(219, 166, 23, 0.1);
+}
+
+.wpaw-seo-score.poor {
+ background: rgba(186, 26, 26, 0.1);
+}
+
+.wpaw-seo-score .score-value {
+ font-size: 28px;
+ font-weight: 700;
+}
+
+.wpaw-seo-score.good .score-value {
+ color: var(--aw-tertiary-container);
+}
+
+.wpaw-seo-score.warning .score-value {
+ color: #dba617;
+}
+
+.wpaw-seo-score.poor .score-value {
+ color: var(--aw-error);
+}
+
+.wpaw-seo-score .score-label {
+ font-size: 14px;
+ color: var(--aw-on-surface-variant);
+ margin-left: 2px;
+}
+
+.wpaw-seo-stats {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 12px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ justify-content: space-around;
+}
+
+.wpaw-seo-stat {
+ flex: 1;
+ text-align: center;
+}
+
+.wpaw-seo-stat .stat-label {
+ display: block;
+ font-size: 10px;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 4px;
+}
+
+.wpaw-seo-stat .stat-value {
+ display: block;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-seo-checks {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.wpaw-seo-check {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 12px;
+}
+
+.wpaw-seo-check .check-icon {
+ width: 16px;
+ height: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-size: 10px;
+}
+
+.wpaw-seo-check.passed .check-icon {
+ background: rgba(0, 108, 28, 0.15);
+ color: var(--aw-tertiary-container);
+}
+
+.wpaw-seo-check.failed .check-icon {
+ background: rgba(186, 26, 26, 0.15);
+ color: var(--aw-error);
+}
+
+.wpaw-seo-check .check-label {
+ flex: 1;
+ color: var(--aw-on-surface-variant);
+ min-width: 0;
+}
+
+.wpaw-seo-fix-button.components-button.is-secondary.is-small {
+ border-color: var(--aw-primary-fixed);
+ box-shadow: none !important;
+ color: var(--aw-primary);
+ flex-shrink: 0;
+ height: 24px;
+ min-width: 44px;
+ padding: 0 8px;
+}
+
+.wpaw-seo-fix-button.components-button.is-secondary.is-small:hover:not(
+ :disabled
+ ),
+.wpaw-seo-fix-button.components-button.is-secondary.is-small:focus:not(
+ :disabled
+ ) {
+ border-color: var(--aw-primary);
+ color: var(--aw-primary-container);
+}
+
+.wpaw-seo-fix-button.components-button.is-secondary.is-small.is-fixing {
+ border-color: #dba617;
+ color: #dba617;
+}
+
+.wpaw-meta-info > button.components-button.is-secondary.is-small {
+ outline: unset !important;
+ color: #dba617;
+ border: 1px solid #dba617;
+ box-shadow: unset !important;
+}
+
+/* SEO Tab Styles */
+.wpaw-seo-tab {
+ padding: 0;
+}
+
+.wpaw-seo-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 16px;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ background: var(--aw-surface-container);
+}
+
+.wpaw-seo-header h3 {
+ margin: 0;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+ flex: 1;
+}
+
+.wpaw-seo-section {
+ padding: 16px;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-seo-section h4 {
+ margin: 0 0 12px 0;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-seo-field {
+ margin-bottom: 8px;
+}
+
+.wpaw-seo-field input,
+.wpaw-seo-field textarea {
+ width: 100%;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface);
+ padding: 10px 12px;
+ border-radius: var(--aw-radius);
+ font-size: 14px;
+}
+
+.wpaw-seo-field input:focus,
+.wpaw-seo-field textarea:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+}
+
+.wpaw-char-count {
+ display: block;
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ text-align: right;
+ margin-top: 4px;
+}
+
+.wpaw-seo-preview {
+ background: var(--aw-surface-container-low);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius);
+ padding: 16px;
+}
+
+.wpaw-seo-preview-title {
+ color: var(--aw-primary);
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 1.3;
+ margin-bottom: 4px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.wpaw-seo-preview-url {
+ color: var(--aw-tertiary-container);
+ font-size: 14px;
+ margin-bottom: 8px;
+}
+
+.wpaw-seo-preview-desc {
+ color: var(--aw-on-surface-variant);
+ font-size: 14px;
+ line-height: 1.4;
+}
+
+.wpaw-seo-stats {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+}
+
+.wpaw-stat-item {
+ display: flex;
+ flex-direction: column;
+ min-width: 80px;
+}
+
+.wpaw-stat-label {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 4px;
+}
+
+.wpaw-stat-value {
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-seo-actions {
+ padding: 16px;
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.wpaw-seo-actions .components-button {
+ flex: 1;
+ min-width: 140px;
+}
+
+/* SEO Audit Results (in SEO tab) */
+.wpaw-seo-audit-results {
+ margin: 16px;
+ padding: 16px;
+ background: var(--aw-surface-container-low);
+ border-radius: var(--aw-radius);
+}
+
+.wpaw-seo-audit-results h4 {
+ margin: 0 0 12px 0;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-audit-score {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px;
+ background: var(--aw-surface-container);
+ border-radius: var(--aw-radius);
+ margin-bottom: 12px;
+}
+
+.wpaw-score-label {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-score-value {
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.wpaw-score-value.good {
+ color: var(--aw-tertiary-container);
+}
+
+.wpaw-score-value.warning {
+ color: #dba617;
+}
+
+.wpaw-score-value.bad {
+ color: var(--aw-error);
+}
+
+.wpaw-audit-checks {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.wpaw-issue-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ padding: 10px;
+ background: var(--aw-surface-container);
+ border-radius: var(--aw-radius);
+}
+
+.wpaw-issue-item.good {
+ border-left: 3px solid var(--aw-tertiary-container);
+}
+
+.wpaw-issue-item.error,
+.wpaw-issue-item.failed {
+ border-left: 3px solid var(--aw-error);
+}
+
+.wpaw-issue-item.warning {
+ border-left: 3px solid #dba617;
+}
+
+.wpaw-issue-severity {
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-size: 12px;
+ flex-shrink: 0;
+}
+
+.wpaw-issue-item.good .wpaw-issue-severity {
+ background: rgba(0, 108, 28, 0.15);
+ color: var(--aw-tertiary-container);
+}
+
+.wpaw-issue-item.error .wpaw-issue-severity,
+.wpaw-issue-item.failed .wpaw-issue-severity {
+ background: rgba(186, 26, 26, 0.15);
+ color: var(--aw-error);
+}
+
+.wpaw-issue-item.warning .wpaw-issue-severity {
+ background: rgba(219, 166, 23, 0.15);
+ color: #dba617;
+}
+
+.wpaw-check-details {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.wpaw-check-name {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-check-message {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-seo-audit-header .components-button.is-secondary.is-small {
+ outline: unset !important;
+ color: var(--aw-tertiary-container);
+ border: 1px solid var(--aw-tertiary-container);
+ box-shadow: unset !important;
+}
+
+.wpaw-spinning-icon svg {
+ animation: wpaw-spin 1s linear infinite;
+}
+
+@keyframes wpaw-spin {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* ===========================
+ WRITING MODE EMPTY STATE
+ =========================== */
+.wpaw-writing-empty-state {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ padding: 2rem;
+ margin: 1rem 0;
+}
+
+.wpaw-empty-state-content {
+ text-align: center;
+ max-width: 400px;
+}
+
+.wpaw-empty-state-icon {
+ font-size: 3rem;
+ display: block;
+ margin-bottom: 1rem;
+ opacity: 0.8;
+}
+
+.wpaw-empty-state-content h3 {
+ margin: 2rem 0 0.5rem 0;
+ font-size: 1.5rem;
+ color: var(--aw-primary);
+ font-weight: 600;
+}
+
+.wpaw-empty-state-content p {
+ color: var(--aw-on-surface-variant);
+ margin: 0.5rem 0;
+ line-height: 1.5;
+ font-size: 0.95rem;
+}
+
+.wpaw-empty-state-button {
+ margin: 1.5rem 0 1rem 0 !important;
+ font-size: 1rem !important;
+}
+
+.wpaw-empty-state-hint {
+ font-size: 0.9rem !important;
+ margin-top: 1rem !important;
+ color: var(--aw-on-surface-variant) !important;
+}
+
+.wpaw-sessions-list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin: 1.5rem 0;
+ max-height: 300px;
+ overflow-y: auto;
+}
+
+.wpaw-new-chat-btn {
+ margin-top: 1rem !important;
+}
+
+.wpaw-writing-empty-state .wpaw-session-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ background: var(--aw-primary-fixed);
+ border: 1px solid var(--aw-outline-subtle);
+ border-radius: var(--aw-radius-md);
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.wpaw-writing-empty-state .wpaw-session-item:hover {
+ background: var(--aw-surface-container-low);
+ border-color: var(--aw-primary);
+}
+
+.wpaw-writing-empty-state .wpaw-session-info {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ overflow: hidden;
+}
+
+.wpaw-writing-empty-state .wpaw-session-title {
+ font-size: 14px;
+ color: var(--aw-on-surface);
+ font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.wpaw-writing-empty-state .wpaw-session-meta {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-writing-empty-state .wpaw-session-delete {
+ background: transparent;
+ border: none;
+ color: var(--aw-on-surface-variant);
+ font-size: 20px;
+ cursor: pointer;
+ padding: 4px 8px;
+ line-height: 1;
+ border-radius: var(--aw-radius);
+ transition: all 0.2s;
+}
+
+.wpaw-writing-empty-state .wpaw-session-delete:hover {
+ color: var(--aw-error);
+ background: var(--aw-error-container);
+}
+
+.wpaw-link-button {
+ background: none;
+ border: none;
+ color: var(--aw-primary);
+ text-decoration: underline;
+ cursor: pointer;
+ padding: 0;
+ font: inherit;
+ font-size: inherit;
+}
+
+.wpaw-link-button:hover {
+ color: var(--aw-primary-container);
+}
+
+/* ===========================
+ CONTEXT INDICATOR
+ =========================== */
+.wpaw-context-indicator {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.25rem 1rem;
+
+ font-size: 11px;
+ background: var(--aw-surface-container);
+}
+
+.wpaw-context-info {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+}
+
+.wpaw-context-count,
+.wpaw-context-tokens,
+.wpaw-context-cost {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-context-toggle {
+ background: none;
+ border: none;
+ color: var(--aw-on-surface-variant);
+ cursor: pointer;
+ padding: 0.25rem 0.5rem;
+ border-radius: var(--aw-radius);
+ font-size: 0.85rem;
+ transition: background-color 0.2s;
+}
+
+.wpaw-context-toggle:hover {
+ background: var(--aw-primary-fixed);
+}
+
+.wpaw-command-input-wrapper.expanded {
+ transition: min-height 0.3s ease;
+}
+
+.wpaw-command-input-wrapper.expanded textarea {
+ transition: min-height 0.3s ease;
+}
+
+/* ===========================
+ FOCUS KEYWORD BAR
+ =========================== */
+.wpaw-focus-keyword-bar {
+ display: flex;
+ align-items: center;
+ padding: 6px 10px;
+ background: var(--aw-surface-container);
+ border-bottom: 1px solid var(--aw-outline-subtle);
+ font-size: 12px;
+}
+
+.wpaw-focus-keyword-bar.wpaw-compact {
+ gap: 8px;
+ justify-content: space-between;
+}
+
+.wpaw-focus-keyword-bar.wpaw-expanded {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 10px;
+ padding: 12px;
+}
+
+.wpaw-fk-left {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ flex: 1;
+ min-width: 0;
+}
+
+.wpaw-fk-icon {
+ font-size: 14px;
+ flex-shrink: 0;
+}
+
+.wpaw-fk-select,
+.wpaw-fk-select-full {
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface);
+ padding: 4px 8px;
+ border-radius: var(--aw-radius);
+ font-size: 12px;
+ cursor: pointer;
+ transition:
+ border-color 0.2s,
+ background 0.2s;
+}
+
+.wpaw-fk-select {
+ flex: 1;
+ min-width: 0;
+ max-width: 180px;
+}
+
+.wpaw-fk-input {
+ flex: 1;
+ min-width: 0;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface);
+ padding: 6px 10px;
+ border-radius: var(--aw-radius);
+ font-size: 12px;
+ transition:
+ border-color 0.2s,
+ background 0.2s;
+}
+
+.wpaw-fk-input:focus {
+ border-color: var(--aw-primary);
+ outline: none;
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-fk-input::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-fk-select-full {
+ width: 100%;
+}
+
+.wpaw-fk-custom-input {
+ width: 100%;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface);
+ padding: 10px 12px;
+ border-radius: var(--aw-radius-md);
+ font-size: 14px;
+ transition:
+ border-color 0.2s,
+ background 0.2s;
+}
+
+.wpaw-fk-custom-input:focus {
+ border-color: var(--aw-primary);
+ outline: none;
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-fk-custom-input::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-fk-select:focus,
+.wpaw-fk-select-full:focus {
+ border-color: var(--aw-primary);
+ outline: none;
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-fk-select:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.wpaw-fk-select option,
+.wpaw-fk-select-full option {
+ background: var(--aw-surface-container-lowest);
+ color: var(--aw-on-surface);
+}
+
+.wpaw-fk-cost {
+ color: var(--aw-on-surface-variant);
+ font-size: 11px;
+
+ flex-shrink: 0;
+}
+
+.wpaw-fk-expand,
+.wpaw-fk-collapse {
+ background: transparent;
+ border: none;
+ color: var(--aw-on-surface-variant);
+ cursor: pointer;
+ padding: 4px 6px;
+ border-radius: var(--aw-radius);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition:
+ background 0.2s,
+ color 0.2s;
+}
+
+.wpaw-fk-expand:hover,
+.wpaw-fk-collapse:hover {
+ background: var(--aw-surface-container-low);
+ color: var(--aw-on-surface);
+}
+
+.wpaw-fk-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: 600;
+ font-size: 11px;
+ letter-spacing: 0.5px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-fk-main-input {
+ width: 100%;
+}
+
+.wpaw-fk-suggestions {
+ background: var(--aw-surface-container-low);
+ border-radius: var(--aw-radius-md);
+ padding: 8px;
+}
+
+.wpaw-fk-suggestions-label {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 6px;
+}
+
+.wpaw-fk-suggestion-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 8px;
+ border-radius: var(--aw-radius);
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.wpaw-fk-suggestion-item:hover {
+ background: var(--aw-surface-container);
+}
+
+.wpaw-fk-suggestion-item.selected {
+ background: var(--aw-primary-fixed);
+}
+
+.wpaw-fk-radio {
+ color: var(--aw-primary);
+ font-size: 10px;
+ flex-shrink: 0;
+}
+
+.wpaw-fk-suggestion-text {
+ flex: 1;
+ color: var(--aw-on-surface);
+ font-size: 12px;
+}
+
+.wpaw-fk-suggestion-source {
+ color: var(--aw-on-surface-variant);
+ font-size: 10px;
+ flex-shrink: 0;
+}
+
+.wpaw-fk-stats {
+ display: flex;
+ gap: 8px;
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+
+ padding-top: 8px;
+ border-top: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-fk-divider {
+ color: var(--aw-outline-variant);
+}
+
+/* ===========================
+ MESSAGE INPUT IMPROVEMENTS
+ =========================== */
+.wpaw-message-input-wrapper {
+ background: var(--aw-surface-container-lowest);
+ padding: 12px 16px;
+ border-top: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-input-container {
+ display: flex;
+ gap: 10px;
+ align-items: flex-end;
+}
+
+.wpaw-message-input {
+ flex: 1;
+ background: var(--aw-surface-container-low);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-lg);
+ padding: 12px 14px;
+ color: var(--aw-on-surface);
+ font-size: 14px;
+ font-family: inherit;
+ resize: none;
+ transition:
+ border-color 0.2s,
+ box-shadow 0.2s;
+ min-height: 48px;
+ max-height: 120px;
+}
+
+.wpaw-message-input:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+ box-shadow: 0 0 0 3px rgba(0, 73, 113, 0.1);
+}
+
+.wpaw-message-input::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-message-input:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.wpaw-send-circle-btn {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ border: none;
+ background: var(--aw-surface-container);
+ color: var(--aw-on-surface-variant);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s;
+ flex-shrink: 0;
+}
+
+.wpaw-send-circle-btn svg {
+ width: 20px;
+ height: 20px;
+}
+
+.wpaw-send-circle-btn.can-send {
+ background: var(--aw-primary);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-send-circle-btn.can-send:hover {
+ background: var(--aw-primary-hover);
+ transform: scale(1.05);
+}
+
+.wpaw-send-circle-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.wpaw-send-circle-btn:disabled:hover {
+ transform: none;
+}
+
+.wpaw-input-hint {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-top: 8px;
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ opacity: 0.8;
+}
+
+.wpaw-input-hint .wpaw-kbd {
+ background: var(--aw-surface-container);
+ padding: 2px 5px;
+ border-radius: 4px;
+ font-size: 10px;
+ font-family: inherit;
+ border: 1px solid var(--aw-outline-variant);
+}
+
+/* ===========================
+ WELCOME SCREEN
+ =========================== */
+.wpaw-welcome-screen {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem 1.5rem;
+ text-align: center;
+ min-height: 400px;
+ animation: fadeInUp 0.3s ease-out;
+ background: var(--aw-surface-container-lowest);
+}
+
+.wpaw-welcome-content {
+ max-width: 320px;
+ width: 100%;
+}
+
+.wpaw-welcome-icon {
+ display: block;
+ color: var(--aw-primary);
+ margin-bottom: 1.25rem;
+ opacity: 0.9;
+ animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+ 0%,
+ 100% {
+ opacity: 0.7;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1.02);
+ }
+}
+
+.wpaw-welcome-icon svg {
+ width: 56px;
+ height: 56px;
+ stroke-width: 1.5;
+}
+
+.wpaw-welcome-title {
+ margin: 0 0 0.5rem 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+}
+
+.wpaw-welcome-subtitle {
+ margin: 0 0 1.5rem 0;
+ font-size: 0.95rem;
+ color: var(--aw-on-surface-variant);
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+}
+
+.wpaw-welcome-input {
+ width: 100%;
+ padding: 12px 16px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+ color: var(--aw-on-surface);
+ font-size: 14px;
+ margin-bottom: 1rem;
+ box-sizing: border-box;
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+ transition:
+ border-color 0.2s,
+ background 0.2s;
+}
+
+.wpaw-welcome-input:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+ background: var(--aw-surface-container-lowest);
+ box-shadow: 0 0 0 3px rgba(0, 73, 113, 0.1);
+}
+
+.wpaw-welcome-input::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-welcome-pills {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 1.5rem;
+}
+
+.wpaw-welcome-pills button {
+ text-align: center;
+ display: block;
+}
+
+.wpaw-welcome-pill {
+ flex: 1;
+ padding: 10px 12px;
+ background: var(--aw-surface-container-low);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-lg);
+ color: var(--aw-on-surface-variant);
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+}
+
+.wpaw-session-list .wpaw-welcome-pill {
+ width: unset !important;
+ font-size: 13px;
+ cursor: pointer;
+ transition: all 0.2s;
+ display: flex;
+ justify-content: space-between;
+}
+
+.wpaw-welcome-pill:hover {
+ background: var(--aw-surface-container);
+ border-color: var(--aw-outline);
+ color: var(--aw-on-surface);
+}
+
+.wpaw-welcome-pill.active {
+ background: var(--aw-primary-fixed);
+ border-color: var(--aw-primary);
+ color: var(--aw-primary);
+}
+
+.wpaw-session-list {
+ max-height: 35vh;
+ overflow-y: auto;
+ padding-right: 2px;
+ margin-bottom: 8px;
+}
+
+.wpaw-session-open-btn {
+ display: block;
+ min-width: 0;
+ padding: 0;
+}
+
+.wpaw-session-open-btn:disabled {
+ opacity: 0.65;
+}
+
+.wpaw-welcome-start-btn {
+ width: 100%;
+ padding: 12px 24px !important;
+ font-size: 14px !important;
+ font-weight: 600 !important;
+}
+
+/* ===========================
+ SESSIONS LIST VIEW
+ =========================== */
+.wpaw-sessions-list-view {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 1rem;
+ overflow: hidden;
+}
+
+.wpaw-view-loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ color: var(--aw-on-surface-variant);
+ font-size: 14px;
+ padding: 2rem;
+}
+
+.wpaw-sessions-header-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 1rem;
+ padding-bottom: 0.75rem;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-sessions-title {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+ margin: 0;
+}
+
+.wpaw-new-conversation-btn {
+ font-size: 12px !important;
+}
+
+.wpaw-sessions-list {
+ flex: 1;
+ overflow-y: auto;
+}
+
+.wpaw-no-sessions {
+ text-align: center;
+ color: var(--aw-on-surface-variant);
+ padding: 2rem;
+ font-size: 13px;
+}
+
+/* ===========================
+ UNCOMPLETED SESSIONS PANEL
+ =========================== */
+.wpaw-uncompleted-sessions {
+ margin-top: 2rem;
+ width: 100%;
+ text-align: left;
+}
+
+.wpaw-sessions-header {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 0.75rem;
+ letter-spacing: 0.05em;
+}
+
+.wpaw-session-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 12px;
+ background: var(--aw-surface-container-low);
+ border: 1px solid var(--aw-outline-subtle);
+ border-radius: var(--aw-radius-md);
+ margin-bottom: 6px;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.wpaw-session-item:hover {
+ background: var(--aw-surface-container);
+ border-color: var(--aw-outline-variant);
+}
+
+.wpaw-session-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ overflow: hidden;
+}
+
+.wpaw-session-title {
+ font-size: 13px;
+ color: var(--aw-on-surface);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.wpaw-session-meta {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-session-delete {
+ background: transparent;
+ border: none;
+ color: var(--aw-on-surface-variant);
+ font-size: 18px;
+ cursor: pointer;
+ padding: 0 4px;
+ line-height: 1;
+ transition: color 0.2s;
+}
+
+.wpaw-session-delete:hover {
+ color: var(--aw-error);
+}
+
+/* ===========================
+ CONTEXTUAL ACTION CARDS
+ =========================== */
+.wpaw-contextual-action {
+ display: flex;
+ gap: 1rem;
+ padding: 1rem;
+ background: var(--aw-surface-container-low);
+ border: 2px dashed var(--aw-outline-variant);
+ border-radius: var(--aw-radius-lg);
+ margin: 1rem 0;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-action-icon {
+ font-size: 2rem;
+ line-height: 1;
+ flex-shrink: 0;
+}
+
+.wpaw-action-content {
+ flex: 1;
+}
+
+.wpaw-action-content h4 {
+ margin: 0 0 0.25rem 0;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-action-content p {
+ margin: 0 0 0.75rem 0;
+ color: var(--aw-on-surface-variant);
+ line-height: 1.4;
+}
+
+.wpaw-action-content .components-button {
+ background: var(--aw-surface-container-lowest) !important;
+ color: var(--aw-primary) !important;
+ border: none !important;
+ font-weight: 600 !important;
+ padding: 0.5rem 1rem !important;
+}
+
+.wpaw-action-content .components-button:hover {
+ background: var(--aw-surface-container-high) !important;
+ color: var(--aw-primary-container) !important;
+}
+
+/* Variant for different intent types */
+.wpaw-contextual-action.intent-create-outline {
+ background: linear-gradient(
+ 135deg,
+ var(--aw-primary) 0%,
+ var(--aw-primary-container) 100%
+ );
+ color: var(--aw-on-primary);
+ border-color: transparent;
+}
+
+.wpaw-contextual-action.intent-start-writing {
+ background: linear-gradient(135deg, var(--aw-error) 0%, #8a1e1e 100%);
+ color: var(--aw-on-primary);
+ border-color: transparent;
+}
+
+.wpaw-contextual-action.intent-refine-content {
+ background: linear-gradient(
+ 135deg,
+ var(--aw-primary) 0%,
+ var(--aw-tertiary-container) 100%
+ );
+ color: var(--aw-on-primary);
+ border-color: transparent;
+}
+
+/* ===========================
+ INFO MESSAGE STYLES
+ =========================== */
+.wpaw-ai-item[data-type="info"] {
+ background: var(--aw-primary-fixed);
+ border-left: 4px solid var(--aw-primary);
+ padding: 0.75rem 1rem;
+ margin: 0.5rem 0;
+ border-radius: var(--aw-radius);
+}
+
+.wpaw-ai-item[data-type="info"] .wpaw-ai-content {
+ color: var(--aw-on-surface);
+ font-size: 0.9rem;
+ line-height: 1.5;
+}
+
+/* ===========================
+ SMOOTH TRANSITIONS
+ =========================== */
+.wpaw-writing-empty-state,
+.wpaw-context-indicator,
+.wpaw-contextual-action {
+ animation: fadeInUp 0.3s ease-out;
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* ===========================
+ P2: TYPING ANIMATION
+ =========================== */
+@keyframes wpaw-typewriter-cursor {
+ 0%,
+ 100% {
+ border-color: transparent;
+ }
+
+ 50% {
+ border-color: var(--aw-primary);
+ }
+}
+
+.wpaw-typing-indicator {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 6px 12px;
+
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-typing-dots {
+ display: inline-flex;
+ gap: 3px;
+}
+
+.wpaw-typing-dots span {
+ width: 5px;
+ height: 5px;
+ background: var(--aw-primary);
+ border-radius: 50%;
+ animation: wpaw-typing-bounce 1.2s infinite;
+}
+
+.wpaw-typing-dots span:nth-child(2) {
+ animation-delay: 0.2s;
+}
+
+.wpaw-typing-dots span:nth-child(3) {
+ animation-delay: 0.4s;
+}
+
+@keyframes wpaw-typing-bounce {
+ 0%,
+ 60%,
+ 100% {
+ transform: translateY(0);
+ opacity: 0.4;
+ }
+
+ 30% {
+ transform: translateY(-4px);
+ opacity: 1;
+ }
+}
+
+/* P3: KEYBOARD HINTS */
+.wpaw-keyboard-hints {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 6px 0 0;
+
+ font-size: 10px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-kbd {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.wpaw-kbd kbd {
+ background: var(--aw-surface-container);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-sm);
+ padding: 1px 4px;
+
+ font-size: 10px;
+ color: var(--aw-on-surface-variant);
+}
+
+/* ===================================
+ PROACTIVE SUGGESTIONS UI
+ =================================== */
+
+.wpaw-suggestions-banner {
+ background: linear-gradient(
+ 135deg,
+ var(--aw-primary) 0%,
+ var(--aw-primary-container) 100%
+ );
+ border-radius: var(--aw-radius-lg);
+ margin: 8px 12px;
+ padding: 12px;
+ border: 1px solid rgba(0, 73, 113, 0.2);
+ box-shadow: var(--aw-shadow-sm);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-suggestion-analyzing {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--aw-on-primary);
+ font-size: 13px;
+}
+
+.wpaw-suggestion-icon {
+ font-size: 16px;
+ animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+}
+
+.wpaw-suggestion-item {
+ background: rgba(255, 255, 255, 0.15);
+ border-radius: var(--aw-radius-md);
+ margin-bottom: 8px;
+ padding: 10px;
+ border-left: 3px solid var(--aw-tertiary-container);
+}
+
+.wpaw-suggestion-item.wpaw-priority-high {
+ border-left-color: var(--aw-error);
+}
+
+.wpaw-suggestion-item.wpaw-priority-medium {
+ border-left-color: #f97316;
+}
+
+.wpaw-suggestion-item.wpaw-priority-low {
+ border-left-color: var(--aw-tertiary-container);
+}
+
+.wpaw-suggestion-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 6px;
+}
+
+.wpaw-suggestion-type-icon {
+ font-size: 14px;
+}
+
+.wpaw-suggestion-location {
+ font-size: 11px;
+ color: rgba(255, 255, 255, 0.8);
+ flex: 1;
+}
+
+.wpaw-suggestion-priority {
+ font-size: 9px;
+ padding: 2px 6px;
+ border-radius: var(--aw-radius-full);
+ background: rgba(255, 255, 255, 0.2);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-suggestion-priority:empty {
+ display: none;
+}
+
+.wpaw-suggestion-content {
+ margin-bottom: 8px;
+}
+
+.wpaw-suggestion-issue {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.9);
+ margin: 0 0 4px 0;
+}
+
+.wpaw-suggestion-text {
+ font-size: 12px;
+ color: var(--aw-on-primary);
+ margin: 0;
+ font-style: italic;
+}
+
+.wpaw-suggestion-actions {
+ display: flex;
+ gap: 8px;
+}
+
+.wpaw-suggestion-actions .wpaw-btn {
+ flex: 1;
+ padding: 6px 12px;
+ border: none;
+ border-radius: var(--aw-radius);
+ font-size: 11px;
+ cursor: pointer;
+ transition: opacity 0.2s;
+}
+
+.wpaw-suggestion-actions .wpaw-btn:hover {
+ opacity: 0.85;
+}
+
+.wpaw-suggestion-actions .wpaw-btn-apply {
+ background: var(--aw-tertiary-container);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-suggestion-actions .wpaw-btn-dismiss {
+ background: rgba(255, 255, 255, 0.2);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-suggestion-dismiss-all {
+ width: 100%;
+ padding: 8px;
+ background: transparent;
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: var(--aw-radius);
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 11px;
+ cursor: pointer;
+ margin-top: 4px;
+}
+
+.wpaw-suggestion-dismiss-all:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+/* ===================================
+ COMMAND PALETTE (Cmd+Shift+P)
+ =================================== */
+
+.wpaw-command-palette-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(21, 28, 36, 0.5);
+ z-index: 100000;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ padding-top: 15vh;
+}
+
+.wpaw-command-palette {
+ width: 500px;
+ max-width: 90vw;
+ background: var(--aw-surface-container-lowest);
+ border-radius: var(--aw-radius-xl);
+ box-shadow:
+ 0 20px 60px rgba(0, 0, 0, 0.15),
+ 0 0 0 1px var(--aw-outline-variant);
+ overflow: hidden;
+ animation: wpaw-palette-slide-in 0.15s ease-out;
+}
+
+@keyframes wpaw-palette-slide-in {
+ from {
+ opacity: 0;
+ transform: translateY(-20px) scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+.wpaw-command-palette-input {
+ width: 100%;
+ background: transparent;
+ border: none;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface);
+ font-size: 16px;
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+ outline: none;
+}
+
+.wpaw-command-palette-input::placeholder {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-command-palette-results {
+ max-height: 400px;
+ overflow-y: auto;
+}
+
+.wpaw-command-palette-item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 20px;
+ cursor: pointer;
+ transition: background 0.1s;
+}
+
+.wpaw-command-palette-item:hover,
+.wpaw-command-palette-item.selected {
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-command-palette-item.selected {
+ background: var(--aw-primary-fixed);
+}
+
+.wpaw-command-icon {
+ font-size: 18px;
+ width: 24px;
+ text-align: center;
+}
+
+.wpaw-command-label {
+ font-size: 14px;
+ color: var(--aw-on-surface);
+}
+
+/* Scrollbar for command palette */
+.wpaw-command-palette-results::-webkit-scrollbar {
+ width: 8px;
+}
+
+.wpaw-command-palette-results::-webkit-scrollbar-track {
+ background: var(--aw-surface-container-lowest);
+}
+
+.wpaw-command-palette-results::-webkit-scrollbar-thumb {
+ background: var(--aw-surface-container-high);
+ border-radius: 4px;
+}
+
+.wpaw-command-palette-results::-webkit-scrollbar-thumb:hover {
+ background: var(--aw-outline-variant);
+}
+
+/* ===================================
+ PER-ACTION ACCEPT/REJECT
+ =================================== */
+
+.wpaw-edit-plan-item {
+ padding: 10px 12px;
+ background: var(--aw-surface-container-low);
+ border-radius: var(--aw-radius-md);
+ margin-bottom: 8px;
+ border-left: 3px solid var(--aw-primary);
+}
+
+.wpaw-edit-plan-item:last-child {
+ margin-bottom: 0;
+}
+
+.wpaw-edit-plan-item-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 6px;
+}
+
+.wpaw-edit-plan-action-type {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-edit-plan-item-buttons {
+ display: flex;
+ gap: 6px;
+}
+
+.wpaw-edit-plan-accept-btn,
+.wpaw-edit-plan-reject-btn {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.15s;
+}
+
+.wpaw-edit-plan-accept-btn {
+ background: var(--aw-tertiary-container);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-edit-plan-accept-btn:hover {
+ background: #008622;
+ transform: scale(1.1);
+}
+
+.wpaw-edit-plan-reject-btn {
+ background: var(--aw-surface-container);
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-edit-plan-reject-btn:hover {
+ background: var(--aw-error);
+ color: var(--aw-on-primary);
+}
+
+.wpaw-edit-plan-item-before,
+.wpaw-edit-plan-item-after {
+ font-size: 11px;
+ margin: 4px 0;
+ padding: 6px 8px;
+ border-radius: var(--aw-radius-sm);
+ font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
+ white-space: pre-wrap;
+ word-break: break-word;
+ border-left: 3px solid transparent;
+}
+
+.wpaw-edit-plan-item-before {
+ background-color: rgba(220, 38, 38, 0.1);
+ color: var(--aw-error);
+ border-left-color: var(--aw-error);
+ text-decoration: line-through;
+ opacity: 0.8;
+}
+
+.wpaw-edit-plan-item-after {
+ background-color: rgba(16, 185, 129, 0.1);
+ color: #10b981;
+ border-left-color: #10b981;
+}
+
+.wpaw-diff-marker {
+ font-weight: bold;
+ user-select: none;
+ margin-right: 4px;
+}
+
+.wpaw-edit-plan-item-target {
+ background: transparent;
+ border: 1px solid var(--aw-outline-variant);
+ color: var(--aw-on-surface-variant);
+ padding: 4px 8px;
+ border-radius: var(--aw-radius);
+ font-size: 10px;
+ cursor: pointer;
+ margin-top: 4px;
+}
+
+.wpaw-edit-plan-item-target:hover:not(:disabled) {
+ background: var(--aw-surface-container-low);
+ color: var(--aw-on-surface);
+}
+
+/* ===================================
+ Block Outline Panel
+ =================================== */
+
+.wpaw-outline-panel {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 280px;
+ background: var(--aw-surface-container-lowest);
+ border-left: 1px solid var(--aw-outline-variant);
+ display: flex;
+ flex-direction: column;
+ z-index: 100;
+ box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
+}
+
+.wpaw-outline-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 16px;
+ background: var(--aw-surface-container-low);
+ border-bottom: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-outline-title {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-outline-close {
+ width: 24px;
+ height: 24px;
+ border: none;
+ background: var(--aw-surface-container);
+ color: var(--aw-on-surface-variant);
+ border-radius: var(--aw-radius);
+ cursor: pointer;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.wpaw-outline-close:hover {
+ background: var(--aw-surface-container-high);
+ color: var(--aw-on-surface);
+}
+
+.wpaw-outline-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 8px 0;
+}
+
+.wpaw-outline-empty {
+ padding: 24px 16px;
+ text-align: center;
+ color: var(--aw-on-surface-variant);
+ font-size: 12px;
+}
+
+.wpaw-outline-item {
+ display: flex;
+ align-items: center;
+ padding: 8px 16px;
+ cursor: pointer;
+ transition: background 0.15s;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+}
+
+.wpaw-outline-item:hover {
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-outline-item.wpaw-outline-heading {
+ background: rgba(0, 108, 28, 0.05);
+}
+
+.wpaw-outline-item.wpaw-outline-heading:hover {
+ background: rgba(0, 108, 28, 0.1);
+}
+
+.wpaw-outline-item.wpaw-outline-heading[level="2"] {
+ padding-left: 16px;
+}
+
+.wpaw-outline-item.wpaw-outline-heading[level="3"] {
+ padding-left: 28px;
+}
+
+.wpaw-outline-item.wpaw-outline-heading[level="4"] {
+ padding-left: 40px;
+}
+
+.wpaw-outline-icon {
+ font-size: 14px;
+ margin-right: 8px;
+ flex-shrink: 0;
+}
+
+.wpaw-outline-label {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ font-weight: 500;
+ min-width: 50px;
+}
+
+.wpaw-outline-text {
+ font-size: 12px;
+ color: var(--aw-on-surface);
+ margin-left: 8px;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.wpaw-outline-count {
+ font-size: 10px;
+ color: var(--aw-on-surface-variant);
+ margin-left: 8px;
+}
+
+.wpaw-outline-footer {
+ padding: 10px 16px;
+ background: var(--aw-surface-container-low);
+ border-top: 1px solid var(--aw-outline-variant);
+ text-align: center;
+}
+
+.wpaw-outline-stats {
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+}
+
+/* ===================================
+ User Preferences Section in Config
+ =================================== */
+
+.wpaw-config-divider {
+ padding: 12px 0;
+ margin: 16px 0;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--aw-on-surface-variant);
+ letter-spacing: 0.05em;
+}
+
+.wpaw-input {
+ padding: 8px 12px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius);
+ color: var(--aw-on-surface);
+ font-size: 13px;
+}
+
+.wpaw-input:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+}
+
+/* ===================================
+ Provider Transparency Display
+ =================================== */
+
+.wpaw-provider-info {
+ color: var(--aw-on-surface-variant);
+ font-size: 11px;
+
+ margin-left: 4px;
+}
+
+.wpaw-provider-info:hover {
+ color: var(--aw-primary);
+}
+
+.wpaw-provider-badge {
+ margin-left: 2px;
+ font-size: 10px;
+}
+
+.wpaw-provider-badge[title*="warning"],
+.wpaw-provider-badge[title*="Warning"],
+.wpaw-provider-info:has(.wpaw-fallback) {
+ color: #f59e0b;
+}
+
+/* ===========================
+ AUDIT FIXES: Mode Indicator Badge
+ =========================== */
+
+/* Override WordPress editor-sidebar h3 shrinkage inside our panel */
+#wp-agentic-writer\:wp-agentic-writer .interface-complementary-area h3,
+#wp-agentic-writer\:wp-agentic-writer h3,
+.wpaw-response-content h3,
+.wpaw-messages-inner h3 {
+ font-size: 15px !important;
+ text-transform: none !important;
+ font-weight: 700 !important;
+ color: var(--aw-on-surface) !important;
+ margin-bottom: 0.5em !important;
+ letter-spacing: normal !important;
+}
+
+.wpaw-response-content h1 {
+ font-size: 20px !important;
+ color: var(--aw-on-surface) !important;
+ font-weight: bold;
+ margin-top: 1.5rem;
+ margin-bottom: 1rem;
+}
+
+.wpaw-response-content h2 {
+ font-size: 17px !important;
+ color: var(--aw-on-surface) !important;
+ font-weight: bold;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+.wpaw-response-content h4,
+.wpaw-response-content h5,
+.wpaw-response-content h6 {
+ font-size: 13px !important;
+ color: var(--aw-on-surface-variant) !important;
+}
+
+.wpaw-response-content table {
+ border-collapse: collapse;
+ width: 100%;
+}
+
+.wpaw-response-content table th,
+table td {
+ border: 1px solid var(--aw-outline-variant) !important;
+ padding: 4px 6px;
+}
+
+.wpaw-mode-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ padding: 3px 10px;
+ border-radius: var(--aw-radius-full);
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ margin-bottom: 8px;
+}
+
+.wpaw-mode-badge.mode-chat {
+ background: var(--aw-primary-fixed);
+ color: var(--aw-primary);
+ border: 1px solid rgba(0, 73, 113, 0.25);
+}
+
+.wpaw-mode-badge.mode-planning {
+ background: rgba(219, 166, 23, 0.12);
+ color: #9a7b10;
+ border: 1px solid rgba(219, 166, 23, 0.25);
+}
+
+.wpaw-mode-badge.mode-writing {
+ background: rgba(0, 108, 28, 0.12);
+ color: var(--aw-tertiary);
+ border: 1px solid rgba(0, 108, 28, 0.25);
+}
+
+/* ===========================
+ AUDIT FIXES: Streaming Heartbeat
+ =========================== */
+.wpaw-heartbeat-notice {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ margin: 8px 0;
+ background: rgba(219, 166, 23, 0.08);
+ border: 1px solid rgba(219, 166, 23, 0.2);
+ border-radius: var(--aw-radius-lg);
+ font-size: 12px;
+ color: #9a7b10;
+ animation: fadeIn 0.3s ease;
+}
+
+.wpaw-heartbeat-notice .wpaw-heartbeat-icon {
+ animation: pulse-ring 2s infinite;
+}
+
+/* ===========================
+ AUDIT FIXES: Slash Command Hint
+ =========================== */
+.wpaw-input-hint {
+ position: absolute;
+ bottom: 100%;
+ left: 12px;
+ right: 12px;
+ padding: 6px 10px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-bottom: none;
+ border-radius: var(--aw-radius-lg) var(--aw-radius-lg) 0 0;
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ z-index: 0;
+ transition:
+ transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+ opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+ visibility 0.3s;
+ transform: translateY(0);
+ opacity: 1;
+ visibility: visible;
+}
+
+.wpaw-input-hint.is-hidden {
+ transform: translateY(100%);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+
+.wpaw-input-hint kbd {
+ background: var(--aw-surface-container);
+ color: var(--aw-on-surface-variant);
+ padding: 1px 5px;
+ border-radius: 3px;
+ font-size: 10px;
+ font-family: inherit;
+}
+
+/* ===========================
+ AUDIT FIXES: Provider Fallback Warning
+ =========================== */
+.wpaw-provider-warning {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ padding: 10px 12px;
+ margin: 8px 0;
+ background: rgba(249, 115, 22, 0.08);
+ border: 1px solid rgba(249, 115, 22, 0.2);
+ border-left: 3px solid #f97316;
+ border-radius: var(--aw-radius-lg);
+ font-size: 12px;
+ color: #c2410c;
+ line-height: 1.5;
+}
+
+.wpaw-provider-warning a {
+ color: #f97316;
+ text-decoration: underline;
+}
+
+/* ===========================
+ AUDIT FIXES: DB Health Notice
+ =========================== */
+.wpaw-health-notice {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 12px;
+ margin: 8px 0;
+ background: rgba(186, 26, 26, 0.06);
+ border: 1px solid rgba(186, 26, 26, 0.2);
+ border-radius: var(--aw-radius-lg);
+ font-size: 12px;
+ color: var(--aw-error);
+}
+
+.wpaw-health-notice a {
+ color: var(--aw-error);
+ text-decoration: underline;
+}
+
+/* ===========================
+ AUDIT FIXES: Confirm Modal for Writing
+ =========================== */
+.wpaw-write-confirm-overlay {
+ position: absolute;
+ inset: 0;
+ z-index: 1200;
+ background: rgba(21, 28, 36, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 16px;
+ animation: fadeIn 0.2s ease;
+}
+
+.wpaw-write-confirm-modal {
+ width: 100%;
+ max-width: 380px;
+ background: var(--aw-surface-container-lowest);
+ color: var(--aw-on-surface);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-xl);
+ padding: 20px;
+ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
+}
+
+.wpaw-write-confirm-title {
+ font-size: 15px;
+ font-weight: 700;
+ margin-bottom: 8px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-write-confirm-body {
+ font-size: 13px;
+ line-height: 1.6;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 16px;
+}
+
+.wpaw-write-confirm-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+}
+
+/* ===========================
+ AUDIT FIXES: Response content
+ =========================== */
+.wpaw-response-content {
+ line-height: 1.6;
+ word-wrap: break-word;
+ white-space: normal;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-response-content > * {
+ padding: 1rem;
+}
+
+.wpaw-response-content p {
+ margin: 0 0 8px;
+}
+
+.wpaw-response-content p:last-child {
+ margin-bottom: 0;
+}
+
+/* Plan section title */
+.wpaw-plan-section-title {
+ font-weight: 600;
+ margin-bottom: 4px;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-plan-section-desc {
+ color: var(--aw-on-surface-variant);
+ font-size: 13px;
+ line-height: 1.5;
+}
+
+/* Config summary */
+.wpaw-plan-config-summary {
+ margin-bottom: 12px;
+ padding: 10px 12px;
+ background: var(--aw-surface-container);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-lg);
+ font-size: 12px;
+ line-height: 1.6;
+}
+
+.wpaw-config-summary-item {
+ color: var(--aw-on-surface-variant);
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ system-ui,
+ sans-serif;
+ margin-bottom: 4px;
+ font-size: 11.5px;
+}
+
+.wpaw-config-summary-item:last-child {
+ margin-bottom: 0;
+}
+
+/* =========================================================================
+ BOTTOM TAB BAR
+ ========================================================================= */
+
+.wpaw-bottom-tab-bar {
+ display: flex;
+ align-items: stretch;
+ border-top: 1px solid var(--aw-outline-variant);
+ background: var(--aw-surface-container-lowest);
+ flex-shrink: 0;
+ position: sticky;
+ bottom: 0;
+ z-index: 10;
+}
+
+.wpaw-bottom-tab-btn {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 3px;
+ padding: 8px 4px 10px;
+ background: transparent;
+ border: none;
+ border-top: 2px solid transparent;
+ cursor: pointer;
+ color: var(--aw-on-surface-variant);
+ font-size: 10px;
+ font-weight: 500;
+ font-family:
+ "Inter",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+ letter-spacing: 0.02em;
+ transition:
+ color var(--aw-transition-fast),
+ border-color var(--aw-transition-fast),
+ background var(--aw-transition-fast);
+}
+
+.wpaw-bottom-tab-btn:hover {
+ color: var(--aw-primary);
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-bottom-tab-btn.active {
+ color: var(--aw-primary);
+ border-top-color: var(--aw-primary);
+}
+
+.wpaw-bottom-tab-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 1;
+}
+
+.wpaw-bottom-tab-icon svg {
+ width: 18px;
+ height: 18px;
+}
+
+.wpaw-bottom-tab-label {
+ line-height: 1;
+}
+
+/* =========================================================================
+ AUTOCOMPLETE DROPDOWNS (theme-correct)
+ ========================================================================= */
+
+.wpaw-mention-autocomplete {
+ background: var(--aw-surface-container-lowest) !important;
+ border: 1px solid var(--aw-outline-variant) !important;
+ border-radius: var(--aw-radius-md);
+ box-shadow: var(--aw-shadow-sm);
+}
+
+.wpaw-mention-option {
+ border-bottom: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-mention-option:last-child {
+ border-bottom: none;
+}
+
+.wpaw-mention-option.selected,
+.wpaw-mention-option:hover {
+ background: var(--aw-surface-container-low) !important;
+}
+
+.wpaw-mention-option strong {
+ color: var(--aw-on-surface);
+}
+
+.wpaw-mention-option span {
+ color: var(--aw-on-surface-variant);
+}
+
+/* =========================================================================
+ HISTORY TAB
+ ========================================================================= */
+
+.wpaw-history-tab {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-y: auto;
+ padding: 0;
+}
+
+.wpaw-history-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 16px 12px;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ flex-shrink: 0;
+}
+
+.wpaw-history-header h3 {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-history-count {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-history-empty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 48px 24px;
+ text-align: center;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-history-empty p {
+ margin: 0;
+ font-size: 13px;
+ line-height: 1.5;
+}
+
+.wpaw-history-list {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding: 8px;
+}
+
+.wpaw-history-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ padding: 12px;
+ border-radius: var(--aw-radius-md);
+ cursor: pointer;
+ transition: background var(--aw-transition-fast);
+}
+
+.wpaw-history-item:hover {
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-history-item.active {
+ background: var(--aw-primary-fixed);
+ border: 1px solid var(--aw-primary);
+}
+
+.wpaw-history-item-info {
+ flex: 1;
+ min-width: 0;
+}
+
+.wpaw-history-item-title {
+ display: block;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.wpaw-history-item-meta {
+ display: block;
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ margin-top: 2px;
+}
+
+.wpaw-history-item-actions {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ flex-shrink: 0;
+}
+
+.wpaw-history-restore-btn {
+ padding: 4px 12px;
+ border-radius: var(--aw-radius-full);
+ border: 1px solid var(--aw-outline-variant);
+ background: var(--aw-surface-container-lowest);
+ color: var(--aw-primary);
+ font-size: 11px;
+ font-weight: 600;
+ cursor: pointer;
+ font-family: inherit;
+ transition:
+ background var(--aw-transition-fast),
+ border-color var(--aw-transition-fast);
+}
+
+.wpaw-history-restore-btn:hover {
+ background: var(--aw-primary);
+ color: var(--aw-on-primary);
+ border-color: var(--aw-primary);
+}
+
+.wpaw-history-item.active .wpaw-history-restore-btn {
+ background: var(--aw-primary);
+ color: var(--aw-on-primary);
+ border-color: var(--aw-primary);
+}
+
+.wpaw-history-delete-btn {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: var(--aw-radius-full);
+ border: none;
+ background: transparent;
+ color: var(--aw-on-surface-variant);
+ font-size: 12px;
+ cursor: pointer;
+ font-family: inherit;
+ transition:
+ background var(--aw-transition-fast),
+ color var(--aw-transition-fast);
+}
+
+.wpaw-history-delete-btn:hover {
+ background: var(--aw-error-container);
+ color: var(--aw-error);
+}
+
+/* =========================================================================
+ INSIGHTS TAB
+ ========================================================================= */
+
+.wpaw-insights-tab {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-y: auto;
+ padding: 0;
+}
+
+.wpaw-insights-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 16px 12px;
+ border-bottom: 1px solid var(--aw-outline-variant);
+ flex-shrink: 0;
+}
+
+.wpaw-insights-header h3 {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-insights-refresh-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: var(--aw-radius-full);
+ border: 1px solid var(--aw-outline-variant);
+ background: transparent;
+ color: var(--aw-on-surface-variant);
+ cursor: pointer;
+ transition:
+ background var(--aw-transition-fast),
+ color var(--aw-transition-fast);
+}
+
+.wpaw-insights-refresh-btn:hover {
+ background: var(--aw-surface-container-low);
+ color: var(--aw-primary);
+}
+
+.wpaw-insights-card {
+ margin: 12px 16px;
+ padding: 16px;
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-lg);
+}
+
+.wpaw-insights-card-title {
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 12px;
+}
+
+.wpaw-insights-stats-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 12px;
+}
+
+.wpaw-insights-stat {
+ text-align: center;
+ padding: 8px;
+ background: var(--aw-surface-container-low);
+ border-radius: var(--aw-radius-md);
+}
+
+.wpaw-insights-stat-value {
+ display: block;
+ font-size: 16px;
+ font-weight: 700;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-insights-stat-label {
+ display: block;
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ margin-top: 2px;
+}
+
+.wpaw-insights-budget-section {
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid var(--aw-outline-variant);
+}
+
+.wpaw-insights-budget-label {
+ display: flex;
+ justify-content: space-between;
+ font-size: 11px;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 6px;
+}
+
+.wpaw-budget-warning {
+ margin-top: 8px;
+ padding: 8px 12px;
+ border-radius: var(--aw-radius-md);
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.wpaw-budget-warning.ok {
+ background: var(--aw-surface-container-low);
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-budget-warning.warning {
+ background: rgba(217, 119, 6, 0.1);
+ color: #92400e;
+}
+
+.wpaw-budget-warning.danger {
+ background: var(--aw-error-container);
+ color: var(--aw-error);
+}
+
+.wpaw-insights-budget-fill.ok {
+ background: linear-gradient(
+ 90deg,
+ var(--aw-tertiary),
+ var(--aw-tertiary-container)
+ );
+}
+
+.wpaw-insights-budget-fill.warning {
+ background: linear-gradient(90deg, #d97706, #f59e0b);
+}
+
+.wpaw-insights-budget-fill.danger {
+ background: linear-gradient(90deg, var(--aw-error), #ef5350);
+}
+
+.wpaw-insights-budget-track {
+ height: 6px;
+ background: var(--aw-surface-container);
+ border-radius: var(--aw-radius-full);
+ overflow: hidden;
+}
+
+.wpaw-insights-budget-fill {
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ var(--aw-tertiary),
+ var(--aw-tertiary-container)
+ );
+ border-radius: var(--aw-radius-full);
+ transition: width 0.3s ease;
+}
+
+.wpaw-insights-activity-list {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.wpaw-insights-activity-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 10px;
+ border-radius: var(--aw-radius);
+}
+
+.wpaw-insights-activity-item:nth-child(even) {
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-insights-activity-action {
+ font-size: 12px;
+ color: var(--aw-on-surface);
+}
+
+.wpaw-insights-activity-cost {
+ font-size: 12px;
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-insights-footer {
+ padding: 12px 16px 16px;
+}
+
+.wpaw-insights-settings-link {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+ background: transparent;
+ color: var(--aw-primary);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ font-family: inherit;
+ text-align: center;
+ transition:
+ background var(--aw-transition-fast),
+ border-color var(--aw-transition-fast);
+}
+
+.wpaw-insights-settings-link:hover {
+ background: var(--aw-surface-container-low);
+ border-color: var(--aw-primary);
+}
+
+.wpaw-insights-audit-btn {
+ padding: 6px 14px;
+ border: 1px solid var(--aw-primary);
+ border-radius: var(--aw-radius-md);
+ background: transparent;
+ color: var(--aw-primary);
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+ transition:
+ background 150ms ease,
+ border-color 150ms ease;
+}
+
+.wpaw-insights-audit-btn:hover {
+ background: var(--aw-surface-container-low);
+}
+
+.wpaw-insights-audit-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* =========================================================================
+ SVG ICON HELPERS (currentcolor)
+ ========================================================================= */
+
+.wpaw-spinning-icon {
+ animation: wpaw-spin 1s linear infinite;
+ color: var(--aw-primary);
+}
+
+.wpaw-spinning-icon svg {
+ color: inherit;
+}
+
+.wpaw-svg-wrapper svg {
+ color: var(--aw-on-surface-variant);
+}
+
+.wpaw-refresh-btn {
+ color: var(--aw-on-surface-variant);
+ background: transparent;
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-full);
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ padding: 0;
+ transition:
+ background var(--aw-transition-fast),
+ color var(--aw-transition-fast);
+}
+
+.wpaw-refresh-btn:hover {
+ background: var(--aw-surface-container-low);
+ color: var(--aw-primary);
+}
+
+.wpaw-refresh-btn svg {
+ color: inherit;
+}
+
+/* Error message action links */
+.wpaw-message-error a,
+.wpaw-message a[rel="noopener"] {
+ color: var(--aw-error);
+}
+
+.wpaw-message-error a:hover,
+.wpaw-message a[rel="noopener"]:hover {
+ color: var(--aw-error);
+ opacity: 0.8;
+}
+
+/* =========================================================================
+ TAB CONTENT WRAPPER FIX — ensure bottom bar stays fixed
+ ========================================================================= */
+
+.wpaw-tab-content-wrapper {
+ position: relative;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+
+.wpaw-tab-content {
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Top bar Undo Button Styling */
+.wpaw-status-icon-btn.wpaw-undo-btn {
+ color: var(--aw-primary);
+ position: relative;
+ background: transparent;
+}
+.wpaw-status-icon-btn.wpaw-undo-btn::after {
+ content: "";
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ width: 8px;
+ height: 8px;
+ background: #38bdf8; /* Bright sky blue to pop against dark headers */
+ border-radius: 50%;
+ border: 2px solid var(--aw-surface-container);
+}
+.wpaw-status-icon-btn.wpaw-undo-btn:hover {
+ background: var(--aw-surface-container-high);
+}
+
+.wpaw-inline-undo-btn:hover {
+ background: var(--aw-primary-container) !important;
+}
+/**
+ * WP Agentic Writer - Editor Styles
+ *
+ * @package WP_Agentic_Writer
+ */
+
+/* Image Placeholders in Editor */
+.wpaw-image-placeholder {
+ margin: 20px 0;
+ padding: 0;
+ border: 2px dashed #2271b1;
+ border-radius: 8px;
+ background: #f0f6ff;
+}
+
+.wpaw-placeholder-content {
+ display: flex;
+ align-items: flex-start;
+ gap: 15px;
+ padding: 20px;
+}
+
+.wpaw-placeholder-icon {
+ font-size: 32px;
+ line-height: 1;
+ flex-shrink: 0;
+}
+
+.wpaw-placeholder-text {
+ flex: 1;
+}
+
+.wpaw-placeholder-text strong {
+ display: block;
+ margin-bottom: 8px;
+ color: #2271b1;
+ font-size: 14px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.wpaw-placeholder-text p {
+ margin: 0;
+ color: #475569;
+ font-size: 14px;
+ line-height: 1.5;
+}
+
+/* Editor-specific styles for image placeholders */
+.block-editor-block-list__block .wpaw-image-placeholder {
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.block-editor-block-list__block .wpaw-image-placeholder:hover {
+ border-color: #135e96;
+ background: #e7f3ff;
+ box-shadow: 0 2px 8px rgba(34, 113, 177, 0.1);
+}
+
+/* Block Refine Toolbar Button */
+.wpaw-refine-toolbar-button {
+ margin-right: 8px;
+}
+
+.wpaw-refine-toolbar-button button {
+ color: #2271b1;
+}
+
+.wpaw-refine-toolbar-button button:hover {
+ color: #135e96;
+}
+
+/* Refine Modal */
+.wpaw-refine-modal .components-modal__content {
+ padding: 24px;
+ max-width: 500px;
+}
+
+.wpaw-refine-modal .components-modal__header {
+ margin-bottom: 16px;
+}
+
+.wpaw-refine-modal p {
+ margin-bottom: 16px;
+ color: #475569;
+ font-size: 14px;
+}
+
+.wpaw-refine-modal .components-textarea-control__input {
+ min-height: 100px;
+}
+
+.wpaw-refine-modal-actions {
+ display: flex;
+ gap: 12px;
+ justify-content: flex-end;
+ margin-top: 20px;
+}
+
+.wpaw-refine-modal-actions button {
+ flex: 0;
+}
+
+/* Gutenberg Editor Diff Highlights */
+.block-editor-block-list__block.wpaw-diff-removed,
+.editor-styles-wrapper .wpaw-diff-removed {
+ background-color: #f1cbcb !important;
+ position: relative;
+ padding: 20px !important;
+ border-radius: 4px;
+}
+
+.block-editor-block-list__block.wpaw-diff-removed::before,
+.editor-styles-wrapper .wpaw-diff-removed::before {
+ content: "-";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ transform: translateX(-36px);
+ background-color: red;
+ color: white;
+ width: 24px;
+ height: 24px;
+ border-radius: 2px;
+ font-weight: bold;
+ font-family: monospace;
+ font-size: 16px;
+ z-index: 10;
+}
+
+.block-editor-block-list__block.wpaw-diff-added,
+.editor-styles-wrapper .wpaw-diff-added {
+ background-color: #c9f3c9 !important;
+ position: relative;
+ padding: 20px !important;
+ border-radius: 4px;
+}
+
+.block-editor-block-list__block.wpaw-diff-added::before,
+.editor-styles-wrapper .wpaw-diff-added::before {
+ content: "+";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ transform: translateX(-36px);
+ background-color: green;
+ color: white;
+ width: 24px;
+ height: 24px;
+ border-radius: 2px;
+ font-weight: bold;
+ font-family: monospace;
+ font-size: 16px;
+ z-index: 10;
+}
+
+/* Active Tab Highlight in Topbar */
+.wpaw-status-icon-btn.is-active {
+ background: var(--aw-surface-container-highest);
+ color: var(--aw-on-surface);
+}
diff --git a/assets/css/agentic-tokens.css b/assets/css/agentic-tokens.css
new file mode 100644
index 0000000..0c732d4
--- /dev/null
+++ b/assets/css/agentic-tokens.css
@@ -0,0 +1,807 @@
+/**
+ * Agentic Design System — Tokens & Utilities
+ * Source: stitch/wp_agentic_interface/DESIGN.md
+ *
+ * This is the canonical design token layer for the Stitch design system.
+ * Phase 0: Lands alongside existing --wpaw-* tokens (no breakage).
+ * All new UI should use --aw-* tokens exclusively.
+ *
+ * @package WP_Agentic_Writer
+ * @since 0.3.0
+ */
+
+/* =========================================================================
+ 1. FONT FACES
+ ========================================================================= */
+
+/* Inter — Variable font (weights 100–900 via font-weight) */
+@font-face {
+ font-family: "Inter";
+ src: url("../fonts/inter/Inter-Variable.woff2") format("woff2");
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "Inter";
+ src: url("../fonts/inter/Inter-Variable-Italic.woff2") format("woff2");
+ font-weight: 100 900;
+ font-style: italic;
+ font-display: swap;
+}
+
+/* JetBrains Mono — Monospace for technical data */
+@font-face {
+ font-family: "JetBrains Mono";
+ src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2")
+ format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "JetBrains Mono";
+ src: url("../fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+/* =========================================================================
+ 2. DESIGN TOKENS (Custom Properties)
+ ========================================================================= */
+
+:root {
+ /* ---- Surface (tonal depth — NOT shadows) ---- */
+ --aw-surface: #f7f9ff;
+ --aw-surface-dim: #d3dbe5;
+ --aw-surface-bright: #f7f9ff;
+ --aw-surface-container-lowest: #ffffff;
+ --aw-surface-container-low: #edf4ff;
+ --aw-surface-container: #e7eff9;
+ --aw-surface-container-high: #e1e9f3;
+ --aw-surface-container-highest: #dbe3ed;
+ --aw-surface-variant: #dbe3ed;
+ --aw-surface-faint: #f7f9ff;
+
+ /* ---- On-surface (text) ---- */
+ --aw-on-surface: #151c24;
+ --aw-on-surface-variant: #40474f;
+ --aw-inverse-surface: #293139;
+ --aw-inverse-on-surface: #eaf1fc;
+
+ /* ---- Outline ---- */
+ --aw-outline: #717880;
+ --aw-outline-variant: #c0c7d0;
+ --aw-outline-subtle: #bfc7d1;
+
+ /* ---- Surface tint ---- */
+ --aw-surface-tint: #046397;
+
+ /* ---- Primary ---- */
+ --aw-primary: #004971;
+ --aw-on-primary: #ffffff;
+ --aw-primary-container: #006295;
+ --aw-on-primary-container: #b4dbff;
+ --aw-inverse-primary: #92ccff;
+ --aw-primary-fixed: #cce5ff;
+ --aw-primary-fixed-dim: #92ccff;
+ --aw-on-primary-fixed: #001d31;
+ --aw-on-primary-fixed-variant: #004b73;
+
+ /* ---- Secondary ---- */
+ --aw-secondary: #585f65;
+ --aw-on-secondary: #ffffff;
+ --aw-secondary-container: #dce3ea;
+ --aw-on-secondary-container: #5e656b;
+ --aw-secondary-fixed: #dce3ea;
+ --aw-secondary-fixed-dim: #c0c7ce;
+ --aw-on-secondary-fixed: #161c21;
+ --aw-on-secondary-fixed-variant: #41484d;
+
+ /* ---- Tertiary (Success) ---- */
+ --aw-tertiary: #005112;
+ --aw-on-tertiary: #ffffff;
+ --aw-tertiary-container: #006c1c;
+ --aw-on-tertiary-container: #87ec85;
+ --aw-tertiary-fixed: #94f990;
+ --aw-tertiary-fixed-dim: #78dc77;
+ --aw-on-tertiary-fixed: #002204;
+ --aw-on-tertiary-fixed-variant: #005313;
+
+ /* ---- Error ---- */
+ --aw-error: #ba1a1a;
+ --aw-on-error: #ffffff;
+ --aw-error-container: #ffdad6;
+ --aw-on-error-container: #93000a;
+
+ /* ---- WordPress-specific ---- */
+ --aw-wp-dark-sidebar: #2c3338;
+ --aw-wp-active-blue: #2271b1;
+ --aw-wp-hover-dark: #191e23;
+ --aw-wp-link-alt: #72aee6;
+
+ /* ---- Typography ---- */
+ --aw-font-sans:
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Helvetica, Arial, sans-serif;
+ --aw-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
+
+ /* Type scale */
+ --aw-text-headline-lg: 600 24px/32px var(--aw-font-sans);
+ --aw-text-headline-md: 600 18px/24px var(--aw-font-sans);
+ --aw-text-body-md: 400 14px/20px var(--aw-font-sans);
+ --aw-text-body-sm: 400 13px/18px var(--aw-font-sans);
+ --aw-text-label-caps: 700 11px/16px var(--aw-font-sans);
+ --aw-text-code-sm: 400 12px/18px var(--aw-font-mono);
+
+ /* Letter-spacing */
+ --aw-tracking-headline-lg: -0.02em;
+ --aw-tracking-headline-md: -0.01em;
+ --aw-tracking-label-caps: 0.05em;
+
+ /* ---- Border Radius ---- */
+ --aw-radius-sm: 0.125rem; /* 2px */
+ --aw-radius: 0.25rem; /* 4px */
+ --aw-radius-md: 0.375rem; /* 6px */
+ --aw-radius-lg: 0.5rem; /* 8px */
+ --aw-radius-xl: 0.75rem; /* 12px */
+ --aw-radius-full: 9999px;
+
+ /* ---- Spacing ---- */
+ --aw-space-sidebar: 192px;
+ --aw-space-sidebar-collapsed: 64px;
+ --aw-space-page: 32px;
+ --aw-space-stack: 12px;
+ --aw-space-section: 40px;
+ --aw-space-max-content: 840px;
+
+ /* ---- Transitions ---- */
+ --aw-transition-fast: 150ms ease-out;
+ --aw-transition-normal: 200ms ease-out;
+ --aw-transition-slow: 300ms ease-out;
+
+ /* ---- Shadows (minimal usage) ---- */
+ --aw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+/* =========================================================================
+ 3. TYPOGRAPHY UTILITY CLASSES
+ ========================================================================= */
+
+.aw-headline-lg {
+ font: var(--aw-text-headline-lg);
+ letter-spacing: var(--aw-tracking-headline-lg);
+ color: var(--aw-on-surface);
+}
+
+.aw-headline-md {
+ font: var(--aw-text-headline-md);
+ letter-spacing: var(--aw-tracking-headline-md);
+ color: var(--aw-on-surface);
+}
+
+.aw-body-md {
+ font: var(--aw-text-body-md);
+ color: var(--aw-on-surface);
+}
+
+.aw-body-sm {
+ font: var(--aw-text-body-sm);
+ color: var(--aw-on-surface-variant);
+}
+
+.aw-label-caps {
+ font: var(--aw-text-label-caps);
+ letter-spacing: var(--aw-tracking-label-caps);
+ text-transform: uppercase;
+ color: var(--aw-on-surface-variant);
+}
+
+.aw-code-sm {
+ font: var(--aw-text-code-sm);
+ color: var(--aw-on-surface);
+}
+
+/* =========================================================================
+ 4. SURFACE UTILITY CLASSES
+ ========================================================================= */
+
+.aw-surface {
+ background: var(--aw-surface);
+}
+.aw-surface-dim {
+ background: var(--aw-surface-dim);
+}
+.aw-surface-bright {
+ background: var(--aw-surface-bright);
+}
+.aw-surface-lowest {
+ background: var(--aw-surface-container-lowest);
+}
+.aw-surface-low {
+ background: var(--aw-surface-container-low);
+}
+.aw-surface-mid {
+ background: var(--aw-surface-container);
+}
+.aw-surface-high {
+ background: var(--aw-surface-container-high);
+}
+.aw-surface-highest {
+ background: var(--aw-surface-container-highest);
+}
+
+/* =========================================================================
+ 5. CARD CONTAINER
+ ========================================================================= */
+
+.aw-card {
+ background: var(--aw-surface-container-lowest);
+ border: none;
+ border-radius: var(--aw-radius-xl);
+ padding: 24px;
+}
+
+.aw-card--elevated {
+ box-shadow: var(--aw-shadow-sm);
+}
+
+.aw-card__header {
+ margin-bottom: 20px;
+}
+
+.aw-card__title {
+ font: var(--aw-text-headline-md);
+ letter-spacing: var(--aw-tracking-headline-md);
+ color: var(--aw-on-surface);
+ margin: 0;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.aw-card__title i.bi {
+ color: var(--aw-on-surface-variant);
+ font-size: 16px;
+}
+
+.aw-card__subtitle {
+ font: var(--aw-text-body-sm);
+ color: var(--aw-on-surface-variant);
+ margin-top: 4px;
+}
+
+/* =========================================================================
+ 6. BUTTONS
+ ========================================================================= */
+
+.aw-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ font: 600 14px/20px var(--aw-font-sans);
+ padding: 8px 16px;
+ border-radius: var(--aw-radius);
+ border: 1px solid transparent;
+ cursor: pointer;
+ transition: all var(--aw-transition-normal);
+ white-space: nowrap;
+ text-decoration: none;
+}
+
+.aw-btn:focus-visible {
+ outline: 2px solid var(--aw-primary);
+ outline-offset: 1px;
+}
+
+/* Primary */
+.aw-btn--primary {
+ background: var(--aw-primary);
+ color: var(--aw-on-primary);
+}
+
+.aw-btn--primary:hover {
+ background: var(--aw-primary-container);
+}
+
+.aw-btn--primary:active {
+ background: var(--aw-on-primary-fixed-variant);
+}
+
+/* Secondary */
+.aw-btn--secondary {
+ background: transparent;
+ color: var(--aw-primary);
+ border-color: var(--aw-outline-variant);
+}
+
+.aw-btn--secondary:hover {
+ background: var(--aw-surface-container-low);
+ border-color: var(--aw-primary);
+}
+
+.aw-btn--secondary:active {
+ background: var(--aw-surface-container);
+}
+
+/* Ghost */
+.aw-btn--ghost {
+ background: transparent;
+ color: var(--aw-on-surface-variant);
+ border-color: transparent;
+}
+
+.aw-btn--ghost:hover {
+ background: var(--aw-surface-container-low);
+ color: var(--aw-on-surface);
+}
+
+/* Danger */
+.aw-btn--danger {
+ background: var(--aw-error);
+ color: var(--aw-on-error);
+}
+
+.aw-btn--danger:hover {
+ background: #9b1515;
+}
+
+/* Size variants */
+.aw-btn--sm {
+ font-size: 13px;
+ padding: 4px 12px;
+}
+
+.aw-btn--lg {
+ font-size: 15px;
+ padding: 12px 24px;
+}
+
+/* =========================================================================
+ 7. INPUTS
+ ========================================================================= */
+
+.aw-input,
+.aw-select,
+.aw-textarea {
+ font: var(--aw-text-body-md);
+ color: var(--aw-on-surface);
+ background: var(--aw-surface-container-lowest);
+ border: 1px solid var(--aw-outline-variant);
+ border-radius: var(--aw-radius-md);
+ padding: 7px 11px;
+ transition: all var(--aw-transition-fast);
+ width: 100%;
+}
+
+.aw-input:hover,
+.aw-select:hover,
+.aw-textarea:hover {
+ border-color: var(--aw-outline);
+}
+
+.aw-input:focus,
+.aw-select:focus,
+.aw-textarea:focus {
+ outline: none;
+ border-color: var(--aw-primary);
+ box-shadow: 0 0 0 1px var(--aw-primary);
+}
+
+.aw-input::placeholder,
+.aw-textarea::placeholder {
+ color: var(--aw-outline);
+}
+
+.aw-input--code {
+ font: var(--aw-text-code-sm);
+ letter-spacing: 0;
+}
+
+.aw-textarea {
+ resize: vertical;
+ min-height: 80px;
+}
+
+/* =========================================================================
+ 8. FORM GROUP
+ ========================================================================= */
+
+.aw-form-group {
+ margin-bottom: 16px;
+}
+
+.aw-form-group__label {
+ display: block;
+ font: var(--aw-text-label-caps);
+ letter-spacing: var(--aw-tracking-label-caps);
+ text-transform: uppercase;
+ color: var(--aw-on-surface-variant);
+ margin-bottom: 6px;
+}
+
+.aw-form-group__label span[style*="aw-error"] {
+ margin-left: 2px;
+}
+
+.aw-form-group__hint {
+ font: var(--aw-text-body-sm);
+ color: var(--aw-outline);
+ margin-top: 4px;
+}
+
+/* =========================================================================
+ 9. STATUS / BANNER
+ ========================================================================= */
+
+.aw-banner {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ padding: 12px 16px;
+ border-radius: var(--aw-radius-lg);
+ font: var(--aw-text-body-sm);
+}
+
+.aw-banner--info {
+ background: rgba(0, 98, 149, 0.08);
+ border: 1px solid rgba(0, 98, 149, 0.15);
+ color: var(--aw-on-surface);
+}
+
+.aw-banner--success {
+ background: rgba(0, 81, 18, 0.08);
+ border: 1px solid rgba(0, 81, 18, 0.15);
+ color: var(--aw-on-surface);
+}
+
+.aw-banner--warning {
+ background: rgba(255, 193, 7, 0.1);
+ border: 1px solid rgba(255, 193, 7, 0.2);
+ color: var(--aw-on-surface);
+}
+
+.aw-banner--error {
+ background: rgba(186, 26, 26, 0.08);
+ border: 1px solid rgba(186, 26, 26, 0.15);
+ color: var(--aw-on-surface);
+}
+
+/* =========================================================================
+ 10. PROGRESS BAR
+ ========================================================================= */
+
+.aw-progress {
+ width: 100%;
+ height: 8px;
+ background: var(--aw-surface-container);
+ border-radius: var(--aw-radius-full);
+ overflow: hidden;
+}
+
+.aw-progress__fill {
+ height: 100%;
+ background: var(--aw-primary);
+ border-radius: var(--aw-radius-full);
+ transition: width var(--aw-transition-normal);
+}
+
+.aw-progress__fill--success {
+ background: var(--aw-tertiary-container);
+}
+
+.aw-progress__fill--error {
+ background: var(--aw-error);
+}
+
+/* =========================================================================
+ 11. BADGE / TAG
+ ========================================================================= */
+
+.aw-badge {
+ display: inline-flex;
+ align-items: center;
+ font: 600 12px/16px var(--aw-font-sans);
+ padding: 2px 8px;
+ border-radius: var(--aw-radius-full);
+ white-space: nowrap;
+}
+
+.aw-badge--primary {
+ background: var(--aw-primary-fixed);
+ color: var(--aw-on-primary-fixed);
+}
+
+.aw-badge--success {
+ background: var(--aw-tertiary-fixed);
+ color: var(--aw-on-tertiary-fixed);
+}
+
+.aw-badge--error {
+ background: var(--aw-error-container);
+ color: var(--aw-on-error-container);
+}
+
+.aw-badge--neutral {
+ background: var(--aw-secondary-fixed);
+ color: var(--aw-on-secondary-fixed);
+}
+
+/* =========================================================================
+ 12. TABLE
+ ========================================================================= */
+
+.aw-table {
+ width: 100%;
+ border-collapse: collapse;
+ font: var(--aw-text-body-sm);
+}
+
+.aw-table th {
+ font: var(--aw-text-label-caps);
+ letter-spacing: var(--aw-tracking-label-caps);
+ text-transform: uppercase;
+ text-align: left;
+ color: var(--aw-on-surface-variant);
+ padding: 8px 12px;
+ border-bottom: 2px solid var(--aw-outline-subtle);
+}
+
+.aw-table td {
+ padding: 10px 12px;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+ color: var(--aw-on-surface);
+}
+
+.aw-table tbody tr:nth-child(even) {
+ background: var(--aw-surface-container-low);
+}
+
+.aw-table tbody tr:hover {
+ background: var(--aw-surface-container);
+}
+
+/* =========================================================================
+ 13. SIDEBAR NAV (for admin settings)
+ ========================================================================= */
+
+.aw-nav-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ padding: 8px 12px;
+ font: var(--aw-text-body-md);
+ color: var(--aw-on-surface-variant);
+ border: none;
+ background: transparent;
+ border-radius: var(--aw-radius-md);
+ cursor: pointer;
+ text-align: left;
+ transition: all var(--aw-transition-fast);
+}
+
+.aw-nav-item:hover {
+ background: var(--aw-surface-container-low);
+ color: var(--aw-on-surface);
+}
+
+.aw-nav-item--active {
+ background: var(--aw-wp-active-blue);
+ color: var(--aw-on-primary);
+}
+
+.aw-nav-item--active:hover {
+ background: var(--aw-wp-active-blue);
+ color: var(--aw-on-primary);
+}
+
+/* =========================================================================
+ 14. TOGGLE SWITCH
+ ========================================================================= */
+
+.aw-toggle {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 22px;
+}
+
+.aw-toggle input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.aw-toggle__track {
+ position: absolute;
+ cursor: pointer;
+ inset: 0;
+ background: var(--aw-outline-variant);
+ border-radius: var(--aw-radius-full);
+ transition: background var(--aw-transition-fast);
+}
+
+.aw-toggle__track::after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ left: 3px;
+ top: 3px;
+ background: var(--aw-surface-container-lowest);
+ border-radius: var(--aw-radius-full);
+ transition: transform var(--aw-transition-fast);
+}
+
+.aw-toggle input:checked + .aw-toggle__track {
+ background: var(--aw-primary);
+}
+
+.aw-toggle input:checked + .aw-toggle__track::after {
+ transform: translateX(18px);
+}
+
+.aw-toggle input:focus-visible + .aw-toggle__track {
+ outline: 2px solid var(--aw-primary);
+ outline-offset: 1px;
+}
+
+/* =========================================================================
+ 15. DIVIDER
+ ========================================================================= */
+
+.aw-divider {
+ border: none;
+ border-top: 1px solid var(--aw-outline-subtle);
+ margin: 0;
+}
+
+.aw-divider--strong {
+ border-top-color: var(--aw-outline-variant);
+}
+
+/* =========================================================================
+ 16. SKELETON / LOADING
+ ========================================================================= */
+
+.aw-skeleton {
+ background: linear-gradient(
+ 90deg,
+ var(--aw-surface-container) 25%,
+ var(--aw-surface-container-low) 50%,
+ var(--aw-surface-container) 75%
+ );
+ background-size: 200% 100%;
+ animation: aw-shimmer 1.5s ease-in-out infinite;
+ border-radius: var(--aw-radius);
+}
+
+@keyframes aw-shimmer {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+}
+
+/* =========================================================================
+ 17. LAYOUT PRIMITIVES
+ ========================================================================= */
+
+.aw-app-shell {
+ display: flex;
+ min-height: 100vh;
+ background: var(--aw-surface);
+}
+
+.aw-app-shell__sidebar {
+ width: var(--aw-space-sidebar);
+ flex-shrink: 0;
+ background: var(--aw-wp-dark-sidebar);
+ color: var(--aw-inverse-on-surface);
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+}
+
+.aw-app-shell__content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.aw-content-canvas {
+ max-width: var(--aw-space-max-content);
+ padding: var(--aw-space-page);
+ width: 100%;
+}
+
+/* Stack / flex utilities */
+.aw-stack {
+ display: flex;
+ flex-direction: column;
+ gap: var(--aw-space-stack);
+}
+
+.aw-section-gap {
+ margin-bottom: var(--aw-space-section);
+}
+
+/* =========================================================================
+ 18. FOOTER ACTION BAR
+ ========================================================================= */
+
+.aw-footer-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 32px;
+ background: var(--aw-surface-container-low);
+ border-top: 1px solid var(--aw-outline-subtle);
+}
+
+.aw-footer-bar--sticky {
+ position: sticky;
+ bottom: 0;
+ z-index: 10;
+}
+
+/* =========================================================================
+ 19. TAB BAR (horizontal, for Gutenberg sidebar)
+ ========================================================================= */
+
+.aw-tab-bar {
+ display: flex;
+ border-bottom: 1px solid var(--aw-outline-subtle);
+ background: var(--aw-surface-container-lowest);
+}
+
+.aw-tab-bar__item {
+ flex: 1;
+ padding: 10px 12px;
+ font: 600 13px/18px var(--aw-font-sans);
+ color: var(--aw-on-surface-variant);
+ background: transparent;
+ border: none;
+ border-bottom: 2px solid transparent;
+ cursor: pointer;
+ transition: all var(--aw-transition-fast);
+ text-align: center;
+}
+
+.aw-tab-bar__item:hover {
+ color: var(--aw-on-surface);
+ background: var(--aw-surface-container-low);
+}
+
+.aw-tab-bar__item--active {
+ color: var(--aw-primary);
+ border-bottom-color: var(--aw-primary);
+}
+
+/* =========================================================================
+ 20. DARK MODE OVERRIDE (future — scaffold only)
+ ========================================================================= */
+
+[data-aw-theme="dark"] {
+ --aw-surface: #1a2332;
+ --aw-surface-dim: #111827;
+ --aw-surface-bright: #243447;
+ --aw-surface-container-lowest: #0f172a;
+ --aw-surface-container-low: #1e293b;
+ --aw-surface-container: #243447;
+ --aw-surface-container-high: #2d3e52;
+ --aw-surface-container-highest: #374757;
+ --aw-on-surface: #e8eaed;
+ --aw-on-surface-variant: #b8bcc4;
+ --aw-outline: #5a6a7e;
+ --aw-outline-variant: #3a4a5e;
+ --aw-outline-subtle: #2d3e52;
+}
diff --git a/assets/css/agentic-variables.css b/assets/css/agentic-variables.css
deleted file mode 100644
index 63ee51f..0000000
--- a/assets/css/agentic-variables.css
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Agentic Vibe - CSS Variables
- * Design System Foundation
- *
- * @package WP_Agentic_Writer
- * @since 0.2.0
- */
-
-:root {
- /* Primary Colors - Cyan/Blue (matching V1) */
- --wpaw-primary: #17a2b8;
- --wpaw-primary-dark: #138496;
- --wpaw-primary-light: #5bc0de;
-
- /* Dark Theme (matching V1) */
- --wpaw-bg-primary: #1a2332;
- --wpaw-bg-secondary: #243447;
- --wpaw-bg-tertiary: #2d3e52;
- --wpaw-text-primary: #e8eaed;
- --wpaw-text-secondary: #b8bcc4;
- --wpaw-text-tertiary: #8a8f98;
- --wpaw-border: #3a4a5e;
-
- /* Status Colors - Functional & Meaningful */
- --wpaw-success: #28a745;
- --wpaw-success-light: #1e7e34;
- --wpaw-warning: #ffc107;
- --wpaw-warning-light: #e0a800;
- --wpaw-error: #dc3545;
- --wpaw-error-light: #bd2130;
- --wpaw-info: #17a2b8;
- --wpaw-info-light: #138496;
-
- /* Typography */
- --wpaw-font-mono: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
- --wpaw-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-
- /* Font Sizes */
- --wpaw-text-xs: 0.75rem; /* 12px */
- --wpaw-text-sm: 0.875rem; /* 14px */
- --wpaw-text-base: 1rem; /* 16px */
- --wpaw-text-lg: 1.125rem; /* 18px */
- --wpaw-text-xl: 1.25rem; /* 20px */
- --wpaw-text-2xl: 1.5rem; /* 24px */
- --wpaw-text-3xl: 1.875rem; /* 30px */
-
- /* Spacing Scale - Consistent rhythm */
- --wpaw-space-xs: 0.25rem; /* 4px */
- --wpaw-space-sm: 0.5rem; /* 8px */
- --wpaw-space-md: 1rem; /* 16px */
- --wpaw-space-lg: 1.5rem; /* 24px */
- --wpaw-space-xl: 2rem; /* 32px */
- --wpaw-space-2xl: 3rem; /* 48px */
- --wpaw-space-3xl: 4rem; /* 64px */
-
- /* Border Radius */
- --wpaw-radius-sm: 4px;
- --wpaw-radius-md: 8px;
- --wpaw-radius-lg: 12px;
- --wpaw-radius-xl: 16px;
- --wpaw-radius-full: 9999px;
-
- /* Shadows - Subtle elevation */
- --wpaw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
- --wpaw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
- --wpaw-shadow-md: 0 4px 12px rgba(59, 130, 246, 0.1);
- --wpaw-shadow-lg: 0 8px 24px rgba(59, 130, 246, 0.15);
- --wpaw-shadow-xl: 0 12px 32px rgba(59, 130, 246, 0.2);
-
- /* Transitions - Smooth & performant */
- --wpaw-transition-fast: 150ms ease-out;
- --wpaw-transition-normal: 200ms ease-out;
- --wpaw-transition-slow: 300ms ease-out;
- --wpaw-transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
-
- /* Z-index Scale */
- --wpaw-z-base: 1;
- --wpaw-z-dropdown: 1000;
- --wpaw-z-sticky: 1020;
- --wpaw-z-fixed: 1030;
- --wpaw-z-modal-backdrop: 1040;
- --wpaw-z-modal: 1050;
- --wpaw-z-popover: 1060;
- --wpaw-z-tooltip: 1070;
-}
-
-/* Dark Mode Variables - Already dark by default, no override needed */
-
-/* Light Mode Override (if needed in future) */
-.wpaw-light-mode {
- --wpaw-bg-primary: #ffffff;
- --wpaw-bg-secondary: #f8f9fa;
- --wpaw-bg-tertiary: #e9ecef;
- --wpaw-text-primary: #212529;
- --wpaw-text-secondary: #6c757d;
- --wpaw-text-tertiary: #adb5bd;
- --wpaw-border: #dee2e6;
-}
diff --git a/assets/css/cost-log-grouped.css b/assets/css/cost-log-grouped.css
deleted file mode 100644
index 978db75..0000000
--- a/assets/css/cost-log-grouped.css
+++ /dev/null
@@ -1,54 +0,0 @@
-/* Cost Log Grouped/Collapsible Styles */
-
-/* Group row styles */
-.wpaw-group-row {
- transition: background-color 0.2s ease;
-}
-
-.wpaw-group-row:hover {
- background-color: var(--agentic-bg-hover) !important;
-}
-
-.wpaw-group-row .wpaw-collapse-icon {
- transition: transform 0.2s ease;
- font-size: 16px;
- vertical-align: middle;
-}
-
-/* Collapsible row styles */
-.wpaw-collapse-row {
- border: none !important;
-}
-
-.wpaw-collapse-row td {
- background-color: var(--agentic-bg-tertiary) !important;
- border-top: 1px solid var(--agentic-border-color) !important;
-}
-
-/* Details table inside collapse */
-.wpaw-details-table {
- background-color: transparent !important;
- margin: 0 !important;
-}
-
-.wpaw-details-table thead th {
- background-color: rgba(0, 0, 0, 0.1) !important;
- border-bottom: 1px solid var(--agentic-border-color) !important;
- font-weight: 500;
- padding: 8px 12px;
-}
-
-.wpaw-details-table tbody tr {
- background-color: transparent !important;
-}
-
-.wpaw-details-table tbody tr:hover {
- background-color: rgba(0, 0, 0, 0.05) !important;
-}
-
-.wpaw-details-table code {
- background-color: var(--agentic-bg-secondary);
- padding: 2px 6px;
- border-radius: 3px;
- font-size: 0.85em;
-}
diff --git a/assets/css/editor.css b/assets/css/editor.css
index c9a2a7a..e15d45b 100644
--- a/assets/css/editor.css
+++ b/assets/css/editor.css
@@ -6,98 +6,153 @@
/* Image Placeholders in Editor */
.wpaw-image-placeholder {
- margin: 20px 0;
- padding: 0;
- border: 2px dashed #2271b1;
- border-radius: 8px;
- background: #f0f6ff;
+ margin: 20px 0;
+ padding: 0;
+ border: 2px dashed #2271b1;
+ border-radius: 8px;
+ background: #f0f6ff;
}
.wpaw-placeholder-content {
- display: flex;
- align-items: flex-start;
- gap: 15px;
- padding: 20px;
+ display: flex;
+ align-items: flex-start;
+ gap: 15px;
+ padding: 20px;
}
.wpaw-placeholder-icon {
- font-size: 32px;
- line-height: 1;
- flex-shrink: 0;
+ font-size: 32px;
+ line-height: 1;
+ flex-shrink: 0;
}
.wpaw-placeholder-text {
- flex: 1;
+ flex: 1;
}
.wpaw-placeholder-text strong {
- display: block;
- margin-bottom: 8px;
- color: #2271b1;
- font-size: 14px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
+ display: block;
+ margin-bottom: 8px;
+ color: #2271b1;
+ font-size: 14px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
}
.wpaw-placeholder-text p {
- margin: 0;
- color: #475569;
- font-size: 14px;
- line-height: 1.5;
+ margin: 0;
+ color: #475569;
+ font-size: 14px;
+ line-height: 1.5;
}
/* Editor-specific styles for image placeholders */
.block-editor-block-list__block .wpaw-image-placeholder {
- cursor: pointer;
- transition: all 0.2s ease;
+ cursor: pointer;
+ transition: all 0.2s ease;
}
.block-editor-block-list__block .wpaw-image-placeholder:hover {
- border-color: #135e96;
- background: #e7f3ff;
- box-shadow: 0 2px 8px rgba(34, 113, 177, 0.1);
+ border-color: #135e96;
+ background: #e7f3ff;
+ box-shadow: 0 2px 8px rgba(34, 113, 177, 0.1);
}
/* Block Refine Toolbar Button */
.wpaw-refine-toolbar-button {
- margin-right: 8px;
+ margin-right: 8px;
}
.wpaw-refine-toolbar-button button {
- color: #2271b1;
+ color: #2271b1;
}
.wpaw-refine-toolbar-button button:hover {
- color: #135e96;
+ color: #135e96;
}
/* Refine Modal */
.wpaw-refine-modal .components-modal__content {
- padding: 24px;
- max-width: 500px;
+ padding: 24px;
+ max-width: 500px;
}
.wpaw-refine-modal .components-modal__header {
- margin-bottom: 16px;
+ margin-bottom: 16px;
}
.wpaw-refine-modal p {
- margin-bottom: 16px;
- color: #475569;
- font-size: 14px;
+ margin-bottom: 16px;
+ color: #475569;
+ font-size: 14px;
}
.wpaw-refine-modal .components-textarea-control__input {
- min-height: 100px;
+ min-height: 100px;
}
.wpaw-refine-modal-actions {
- display: flex;
- gap: 12px;
- justify-content: flex-end;
- margin-top: 20px;
+ display: flex;
+ gap: 12px;
+ justify-content: flex-end;
+ margin-top: 20px;
}
.wpaw-refine-modal-actions button {
- flex: 0;
+ flex: 0;
+}
+
+/* Gutenberg Editor Diff Highlights */
+.block-editor-block-list__block.wpaw-diff-removed,
+.editor-styles-wrapper .wpaw-diff-removed {
+ background-color: #f1cbcb !important;
+ position: relative;
+ padding: 20px !important;
+ border-radius: 4px;
+}
+
+.block-editor-block-list__block.wpaw-diff-removed::before,
+.editor-styles-wrapper .wpaw-diff-removed::before {
+ content: "-";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ transform: translateX(-36px);
+ background-color: red;
+ color: white;
+ width: 24px;
+ height: 24px;
+ border-radius: 2px;
+ font-weight: bold;
+ font-family: monospace;
+ font-size: 16px;
+ z-index: 10;
+}
+
+.block-editor-block-list__block.wpaw-diff-added,
+.editor-styles-wrapper .wpaw-diff-added {
+ background-color: #c9f3c9 !important;
+ position: relative;
+ padding: 20px !important;
+ border-radius: 4px;
+}
+
+.block-editor-block-list__block.wpaw-diff-added::before,
+.editor-styles-wrapper .wpaw-diff-added::before {
+ content: "+";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ transform: translateX(-36px);
+ background-color: green;
+ color: white;
+ width: 24px;
+ height: 24px;
+ border-radius: 2px;
+ font-weight: bold;
+ font-family: monospace;
+ font-size: 16px;
+ z-index: 10;
}
diff --git a/assets/css/settings-v2-stitch.css b/assets/css/settings-v2-stitch.css
new file mode 100644
index 0000000..1758695
--- /dev/null
+++ b/assets/css/settings-v2-stitch.css
@@ -0,0 +1,716 @@
+/* WP Agentic Writer Settings V2 — Stitch implementation */
+:root {
+ --aw2-canvas: #f7f9ff;
+ --aw2-surface: #ffffff;
+ --aw2-surface-soft: #edf4ff;
+ --aw2-surface-mid: #e7eff9;
+ --aw2-border: #d3dbe5;
+ --aw2-border-soft: #e1e9f3;
+ --aw2-text: #171c20;
+ --aw2-muted: #54606a;
+ --aw2-primary: #004971;
+ --aw2-primary-2: #006295;
+ --aw2-primary-soft: #cce5ff;
+ --aw2-success: #005112;
+ --aw2-success-soft: #e1f8df;
+ --aw2-error: #ba1a1a;
+ --aw2-error-soft: #ffdad6;
+ --aw2-warning: #8a4b00;
+ --aw2-warning-soft: #ffefd6;
+ --aw2-rail: #2c3338;
+ --aw2-rail-active: #2271b1;
+ --aw2-radius-sm: 4px;
+ --aw2-radius: 8px;
+ --aw2-radius-lg: 12px;
+ --aw2-radius-full: 999px;
+ --aw2-font:
+ Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ --aw2-mono: "JetBrains Mono", SFMono-Regular, Consolas, monospace;
+}
+
+#wpcontent {
+ padding-left: 0 !important;
+}
+#wpbody-content {
+ padding-bottom: 0;
+}
+
+.wpaw2-settings * {
+ box-sizing: border-box;
+}
+.wpaw2-settings {
+ margin: 0;
+ color: var(--aw2-text);
+ background: var(--aw2-canvas);
+ font-family: var(--aw2-font);
+ min-height: calc(100vh - 32px);
+}
+.wpaw2-settings button,
+.wpaw2-settings input,
+.wpaw2-settings select,
+.wpaw2-settings textarea {
+ font: inherit;
+}
+.wpaw2-settings a {
+ color: var(--aw2-primary);
+ text-decoration: none;
+}
+.wpaw2-settings h1,
+.wpaw2-settings h2,
+.wpaw2-settings h3,
+.wpaw2-settings p {
+ margin: 0;
+}
+
+.wp-shell {
+ display: grid;
+ grid-template-columns: 248px minmax(0, 1fr);
+ min-height: calc(100vh - 32px);
+}
+.wp-rail {
+ background: var(--aw2-rail);
+ color: #fff;
+ padding: 18px 12px;
+ overflow-y: auto;
+}
+.wp-logo {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 0 8px 18px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+ margin-bottom: 16px;
+}
+.wp-logo-mark {
+ width: 36px;
+ height: 36px;
+ border-radius: var(--aw2-radius);
+ background: #fff;
+ display: grid;
+ place-items: center;
+ color: var(--aw2-primary);
+ font-weight: 800;
+}
+.wp-logo small {
+ display: block;
+ color: #c8d1d8;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ font-size: 11px;
+}
+.wp-logo strong {
+ display: block;
+ font-size: 16px;
+ line-height: 20px;
+}
+.rail-group {
+ margin: 16px 0;
+}
+.rail-group-title {
+ padding: 0 8px 8px;
+ color: #bac4cc;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ font-weight: 700;
+}
+.rail-link {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ width: 100%;
+ border: 0;
+ background: transparent;
+ color: rgba(255, 255, 255, 0.78);
+ padding: 8px 10px;
+ border-radius: var(--aw2-radius-sm);
+ cursor: pointer;
+ text-align: left;
+ font-weight: 600;
+}
+.rail-link:hover,
+.rail-link[aria-selected="true"] {
+ background: var(--aw2-rail-active);
+ color: #fff;
+}
+.rail-pill {
+ min-width: 22px;
+ padding: 1px 7px;
+ border-radius: var(--aw2-radius-full);
+ background: rgba(255, 255, 255, 0.14);
+ color: #fff;
+ font-size: 11px;
+ text-align: center;
+}
+
+.main {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+}
+.admin-top {
+ height: 58px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 32px;
+ border-bottom: 1px solid var(--aw2-border);
+ background: rgba(255, 255, 255, 0.78);
+ backdrop-filter: blur(8px);
+ position: sticky;
+ top: 32px;
+ z-index: 5;
+}
+.crumb {
+ color: var(--aw2-muted);
+ font-size: 13px;
+}
+.top-actions {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+.page {
+ width: min(1120px, calc(100% - 48px));
+ margin: 24px auto 0;
+ padding-bottom: 48px;
+}
+
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ min-height: 36px;
+ padding: 8px 14px;
+ border: 1px solid var(--aw2-border);
+ border-radius: var(--aw2-radius-sm);
+ background: var(--aw2-surface);
+ color: var(--aw2-text);
+ cursor: pointer;
+ font-weight: 700;
+}
+.btn:hover {
+ border-color: var(--aw2-primary);
+}
+.btn-primary {
+ background: var(--aw2-primary);
+ border-color: var(--aw2-primary);
+ color: #fff;
+}
+.btn-danger {
+ color: var(--aw2-error);
+}
+.btn-small {
+ min-height: 30px;
+ padding: 5px 10px;
+ font-size: 12px;
+}
+.btn:disabled {
+ opacity: 0.55;
+ cursor: not-allowed;
+}
+
+.hero {
+ display: grid;
+ grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
+ gap: 16px;
+ margin-bottom: 18px;
+}
+.hero-card,
+.panel,
+.tile {
+ background: var(--aw2-surface);
+ border: 1px solid var(--aw2-border-soft);
+ border-radius: var(--aw2-radius-lg);
+}
+.hero-card {
+ position: relative;
+ padding: 28px;
+ overflow: hidden;
+}
+.hero-card::after {
+ content: "";
+ position: absolute;
+ width: 220px;
+ height: 220px;
+ right: -80px;
+ top: -100px;
+ border-radius: 50%;
+ background: radial-gradient(
+ circle,
+ var(--aw2-primary-soft),
+ transparent 70%
+ );
+}
+.eyebrow {
+ color: var(--aw2-primary);
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ font-weight: 800;
+ margin-bottom: 8px;
+}
+.hero h1 {
+ font-size: clamp(28px, 4vw, 42px);
+ line-height: 1.05;
+ max-width: 660px;
+}
+.hero-copy {
+ margin-top: 12px;
+ color: var(--aw2-muted);
+ font-size: 15px;
+ line-height: 1.6;
+ max-width: 660px;
+}
+.status-panel {
+ padding: 18px;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+.workflow {
+ display: grid;
+ gap: 8px;
+}
+.workflow-step {
+ display: grid;
+ grid-template-columns: 28px minmax(0, 1fr) auto;
+ gap: 10px;
+ align-items: center;
+ padding: 9px;
+ background: var(--aw2-surface-soft);
+ border-radius: var(--aw2-radius);
+}
+.step-dot {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background: var(--aw2-primary);
+ color: #fff;
+ display: grid;
+ place-items: center;
+ font-size: 12px;
+ font-weight: 800;
+}
+.step-label {
+ font-weight: 700;
+}
+.step-state {
+ color: var(--aw2-muted);
+ font-size: 12px;
+}
+
+.tabs-wrap {
+ display: grid;
+ grid-template-columns: 236px minmax(0, 1fr);
+ gap: 16px;
+ align-items: start;
+}
+.tab-sidebar {
+ background: var(--aw2-surface);
+ border: 1px solid var(--aw2-border-soft);
+ border-radius: var(--aw2-radius-lg);
+ padding: 12px;
+ position: sticky;
+ top: 82px;
+}
+.tab-group + .tab-group {
+ margin-top: 14px;
+}
+.tab-group-title {
+ padding: 7px 8px;
+ color: var(--aw2-muted);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ font-weight: 800;
+}
+.tab-btn {
+ width: 100%;
+ border: 0;
+ background: transparent;
+ color: var(--aw2-text);
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ padding: 10px;
+ border-radius: var(--aw2-radius);
+ cursor: pointer;
+ text-align: left;
+ font-weight: 700;
+}
+.tab-btn:hover,
+.tab-btn[aria-selected="true"] {
+ background: var(--aw2-surface-soft);
+ color: var(--aw2-primary);
+}
+.tab-count {
+ color: var(--aw2-muted);
+ font-size: 12px;
+}
+.tab-panel {
+ display: none;
+}
+.tab-panel.active {
+ display: block;
+}
+.section-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 16px;
+ margin-bottom: 14px;
+}
+.section-head h2 {
+ font-size: 24px;
+}
+.section-head p {
+ color: var(--aw2-muted);
+ margin-top: 5px;
+ line-height: 1.5;
+}
+
+.panel {
+ margin-bottom: 14px;
+ overflow: hidden;
+}
+.panel-head {
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+ align-items: flex-start;
+ padding: 18px 20px;
+ border-bottom: 1px solid var(--aw2-border-soft);
+}
+.panel-title h3 {
+ font-size: 16px;
+}
+.panel-title p {
+ color: var(--aw2-muted);
+ margin-top: 4px;
+ font-size: 13px;
+ line-height: 1.5;
+}
+.panel-body {
+ padding: 20px;
+}
+.grid-2 {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 14px;
+}
+.grid-3 {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 14px;
+}
+.grid-4 {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 12px;
+}
+.field {
+ display: grid;
+ gap: 7px;
+ margin-bottom: 14px;
+}
+.field label,
+.field-label {
+ font-size: 13px;
+ font-weight: 800;
+ color: var(--aw2-text);
+}
+.help {
+ color: var(--aw2-muted);
+ font-size: 12px;
+ line-height: 1.45;
+}
+.field-control {
+ width: 100%;
+ min-height: 38px;
+ padding: 8px 10px;
+ border: 1px solid var(--aw2-border);
+ border-radius: var(--aw2-radius-sm);
+ background: var(--aw2-surface);
+ color: var(--aw2-text);
+}
+textarea.field-control {
+ min-height: 82px;
+ resize: vertical;
+}
+.password-row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px;
+}
+.switch-row,
+.check-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ cursor: pointer;
+}
+.switch-row input[type="checkbox"] {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+.switch {
+ width: 42px;
+ height: 24px;
+ border-radius: var(--aw2-radius-full);
+ background: var(--aw2-border);
+ position: relative;
+ flex: 0 0 auto;
+ transition: background 0.18s ease;
+}
+.switch::after {
+ content: "";
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ top: 3px;
+ left: 3px;
+ border-radius: 50%;
+ background: #fff;
+ transition: transform 0.18s ease;
+}
+input[type="checkbox"]:checked + .switch {
+ background: var(--aw2-primary);
+}
+input[type="checkbox"]:checked + .switch::after {
+ transform: translateX(18px);
+}
+.checkbox-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 8px;
+}
+.chip-list {
+ display: flex;
+ gap: 7px;
+ flex-wrap: wrap;
+}
+.chip {
+ border: 1px solid var(--aw2-border);
+ border-radius: var(--aw2-radius-full);
+ padding: 5px 9px;
+ background: var(--aw2-surface);
+ color: var(--aw2-muted);
+ font-size: 12px;
+ font-weight: 700;
+}
+.chip.on {
+ background: var(--aw2-primary-soft);
+ color: var(--aw2-primary);
+ border-color: var(--aw2-primary-soft);
+}
+.status {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ border-radius: var(--aw2-radius-full);
+ padding: 5px 10px;
+ font-size: 12px;
+ font-weight: 800;
+ color: var(--aw2-muted);
+ background: var(--aw2-surface-soft);
+}
+.status::before {
+ content: "";
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: currentColor;
+}
+.status.connected {
+ color: var(--aw2-success);
+ background: var(--aw2-success-soft);
+}
+.status.warn {
+ color: var(--aw2-warning);
+ background: var(--aw2-warning-soft);
+}
+.status.error {
+ color: var(--aw2-error);
+ background: var(--aw2-error-soft);
+}
+.metric-card,
+.preset-card,
+.guide-card {
+ padding: 16px;
+ background: var(--aw2-surface-soft);
+ border: 1px solid transparent;
+ border-radius: var(--aw2-radius);
+}
+.preset-card {
+ text-align: left;
+ cursor: pointer;
+ width: 100%;
+}
+.preset-card:hover,
+.preset-card.active {
+ border-color: var(--aw2-primary);
+ background: #fff;
+}
+.metric-value {
+ font-family: var(--aw2-mono);
+ font-size: 22px;
+ font-weight: 800;
+ color: var(--aw2-primary);
+}
+.metric-label {
+ color: var(--aw2-muted);
+ font-size: 12px;
+ margin-top: 3px;
+}
+.progress {
+ height: 8px;
+ border-radius: var(--aw2-radius-full);
+ background: var(--aw2-surface-mid);
+ overflow: hidden;
+}
+.progress > span {
+ display: block;
+ height: 100%;
+ background: var(--aw2-primary);
+}
+.ds-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 13px;
+}
+preset-card h3 {
+ font-size: 15px;
+ argin-bottom: 8px;
+}
+.prse-meta {
+ colo: var(--aw2-muted);
+ font-sze: 12px;
+ line-height: 1.5;
+}
+.metri.ds-table th,
+.ds-table td {
+ padding: 11px 12px;
+ border-bottom: 1px solid var(--aw2-border-soft);
+ text-align: left;
+ vertical-align: top;
+}
+.ds-table th {
+ background: var(--aw2-surface-soft);
+ color: var(--aw2-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ font-size: 11px;
+}
+.ds-table tbody tr:hover {
+ background: rgba(0, 73, 113, 0.035);
+}
+.code,
+.command {
+ font-family: var(--aw2-mono);
+ background: var(--aw2-surface-soft);
+ border: 1px solid var(--aw2-border-soft);
+ border-radius: var(--aw2-radius-sm);
+ padding: 3px 6px;
+}
+.command {
+ display: block;
+ padding: 10px;
+ overflow-x: auto;
+}
+.custom-row {
+ display: grid;
+ grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) 130px auto;
+ gap: 8px;
+ align-items: center;
+ margin-bottom: 8px;
+}
+/* Hide default WP admin notices on our settings page */
+.wpaw2-settings > .notice,
+.wpaw2-settings > .settings-error,
+.wpaw2-settings .notice.settings-error {
+ display: none !important;
+}
+
+.toast {
+ position: fixed;
+ right: 18px;
+ bottom: 76px;
+ max-width: 360px;
+ background: var(--aw2-surface);
+ border: 1px solid var(--aw2-border);
+ border-left: 4px solid var(--aw2-primary);
+ border-radius: var(--aw2-radius);
+ padding: 12px 14px;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--aw2-text);
+ z-index: 9999;
+ opacity: 0;
+ transform: translateY(10px);
+ transition:
+ opacity 250ms ease,
+ transform 250ms ease;
+ pointer-events: none;
+}
+.toast.show {
+ opacity: 1;
+ transform: translateY(0);
+ pointer-events: auto;
+}
+
+@media (max-width: 1080px) {
+ .wp-shell {
+ grid-template-columns: 1fr;
+ }
+ .wp-rail {
+ position: static;
+ display: none;
+ }
+ .admin-top {
+ top: 32px;
+ }
+ .hero,
+ .tabs-wrap {
+ grid-template-columns: 1fr;
+ }
+ .tab-sidebar {
+ position: static;
+ }
+ .grid-4 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+@media (max-width: 720px) {
+ .admin-top {
+ height: auto;
+ padding: 14px 16px;
+ align-items: flex-start;
+ flex-direction: column;
+ }
+ .page {
+ width: calc(100% - 24px);
+ margin-top: 14px;
+ }
+ .hero-card,
+ .panel-body {
+ padding: 16px;
+ }
+ .panel-head,
+ .section-head {
+ flex-direction: column;
+ }
+ .grid-2,
+ .grid-3,
+ .grid-4,
+ .checkbox-grid,
+ .custom-row {
+ grid-template-columns: 1fr;
+ }
+ .password-row {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css
deleted file mode 100644
index cc2b3d0..0000000
--- a/assets/css/sidebar.css
+++ /dev/null
@@ -1,5116 +0,0 @@
-/**
- * WP Agentic Writer - Sidebar Styles
- *
- * @package WP_Agentic_Writer
- */
-
-.is-pressed[aria-controls="wp-agentic-writer:wp-agentic-writer"] img {
- filter: invert(1);
-}
-
-.interface-complementary-area__fill:has(#wp-agentic-writer\:wp-agentic-writer),
-#wp-agentic-writer\:wp-agentic-writer {
- width: 30vw !important;
- height: 100% !important;
- display: flex !important;
- flex-direction: column !important;
-}
-
-#wp-agentic-writer\:wp-agentic-writer .components-panel,
-#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
- height: 100%;
- display: flex;
- flex-direction: column;
- min-height: 0;
- background: #f8fafc;
- /* Lighter, cleaner background */
-}
-
-#wp-agentic-writer\:wp-agentic-writer .components-panel__body {
- overflow: hidden;
-}
-
-.interface-complementary-area__fill:has(#wp-agentic-writer\:wp-agentic-writer),
-#wp-agentic-writer\:wp-agentic-writer svg {
- margin-bottom: -3px;
-}
-
-.components-tooltip img {
- display: none;
-}
-
-/* ===========================
- TAB NAVIGATION - DARK MINIMAL
- =========================== */
-.wpaw-tabs {
- display: flex;
- gap: 0;
- border-bottom: 1px solid #3c3c3c;
- margin-bottom: 0;
- background: #1d2227;
-}
-
-.wpaw-tab-btn {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 6px;
- padding: 10px 12px;
- background: transparent;
- border: none;
- border-bottom: 2px solid transparent;
- cursor: pointer;
- font-size: 12px;
- font-weight: 500;
- color: #a7aaad;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- transition:
- color 0.1s ease,
- border-color 0.1s ease;
- margin-bottom: -1px;
-}
-
-.wpaw-tab-btn:hover {
- color: #fff;
-}
-
-.wpaw-tab-btn.active {
- color: #fff;
- border-bottom-color: #2271b1;
-}
-
-.wpaw-tab-icon {
- font-size: 18px;
- line-height: 1;
-}
-
-.wpaw-tab-label {
- line-height: 1;
-}
-
-/* ===========================
- TAB CONTENT WRAPPER
- =========================== */
-.wpaw-tab-content-wrapper {
- position: relative;
- height: 100%;
- display: flex;
- flex-direction: column;
- flex: 1;
- min-height: 0;
-}
-
-.wpaw-tab-content {
- animation: fadeIn 0.3s ease;
- flex: 1;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- min-height: 0;
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
-
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-/* ===========================
- CHAT TAB
- =========================== */
-.wpaw-chat-tab {
- display: flex;
- flex-direction: column;
- height: 100%;
- overflow: hidden;
-}
-
-.wpaw-chat-container {
- display: flex;
- flex-direction: column;
- flex: 1;
- min-height: 0;
- overflow: hidden;
-}
-
-.wpaw-messages {
- flex: 1;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- background: #1a1d23;
- border-radius: 0;
- min-height: 0;
- border: 1px solid #2d3139;
-}
-
-.wpaw-messages-inner {
- flex: 1;
- overflow-y: auto;
- overflow-x: hidden;
- padding: 15px;
- scroll-behavior: smooth;
-}
-
-.wpaw-messages-inner::-webkit-scrollbar {
- width: 6px;
-}
-
-.wpaw-messages-inner::-webkit-scrollbar-track {
- background: #1a1d23;
- border-radius: 0;
-}
-
-.wpaw-messages-inner::-webkit-scrollbar-thumb {
- background: #3d4450;
- border-radius: 3px;
-}
-
-.wpaw-messages-inner::-webkit-scrollbar-thumb:hover {
- background: #525b6b;
-}
-
-.wpaw-agent-workspace-card {
- background: linear-gradient(135deg, #111827 0%, #1e293b 100%);
- border: 1px solid #334155;
- border-radius: 12px;
- margin: 10px 10px 8px;
- padding: 12px;
- color: #e5e7eb;
- box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
-}
-
-.wpaw-agent-workspace-card.is-collapsed {
- padding: 9px 10px;
-}
-
-.wpaw-agent-workspace-header {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- gap: 12px;
- margin-bottom: 10px;
-}
-
-.wpaw-agent-workspace-card.is-collapsed .wpaw-agent-workspace-header {
- align-items: center;
- margin-bottom: 0;
-}
-
-.wpaw-agent-workspace-heading {
- min-width: 0;
-}
-
-.wpaw-agent-workspace-kicker {
- color: #93c5fd;
- font-size: 10px;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- font-weight: 700;
- margin-bottom: 3px;
-}
-
-.wpaw-agent-workspace-title {
- color: #f8fafc;
- font-size: 13px;
- font-weight: 700;
- line-height: 1.3;
-}
-
-.wpaw-agent-workspace-actions {
- display: flex;
- align-items: center;
- gap: 6px;
- flex-shrink: 0;
-}
-
-.wpaw-agent-workspace-status {
- white-space: nowrap;
- border-radius: 999px;
- border: 1px solid rgba(148, 163, 184, 0.35);
- color: #cbd5e1;
- background: rgba(15, 23, 42, 0.7);
- padding: 4px 8px;
- font-size: 10px;
- text-transform: capitalize;
-}
-
-.wpaw-agent-workspace-toggle {
- border: 1px solid rgba(147, 197, 253, 0.35);
- border-radius: 999px;
- background: rgba(15, 23, 42, 0.42);
- color: #bfdbfe;
- cursor: pointer;
- font-size: 10px;
- font-weight: 700;
- line-height: 1;
- padding: 5px 8px;
-}
-
-.wpaw-agent-workspace-toggle:hover,
-.wpaw-agent-workspace-toggle:focus {
- border-color: #60a5fa;
- color: #eff6ff;
- outline: none;
-}
-
-.wpaw-agent-workspace-status.status-in_progress,
-.wpaw-agent-workspace-status.status-paused,
-.wpaw-agent-workspace-status.status-running,
-.wpaw-agent-workspace-status.status-stopping {
- color: #fbbf24;
- border-color: rgba(251, 191, 36, 0.45);
- background: rgba(113, 63, 18, 0.28);
-}
-
-.wpaw-agent-workspace-status.status-completed {
- color: #86efac;
- border-color: rgba(134, 239, 172, 0.45);
- background: rgba(20, 83, 45, 0.28);
-}
-
-.wpaw-agent-workspace-status.status-failed {
- color: #fca5a5;
- border-color: rgba(248, 113, 113, 0.45);
- background: rgba(127, 29, 29, 0.28);
-}
-
-.wpaw-agent-context-grid {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 8px;
-}
-
-.wpaw-agent-context-item {
- min-width: 0;
- background: rgba(15, 23, 42, 0.52);
- border: 1px solid rgba(148, 163, 184, 0.18);
- border-radius: 9px;
- padding: 8px;
-}
-
-.wpaw-agent-context-item span {
- display: block;
- color: #94a3b8;
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- margin-bottom: 4px;
-}
-
-.wpaw-agent-context-item strong {
- display: block;
- color: #f8fafc;
- font-size: 12px;
- line-height: 1.35;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.wpaw-agent-keyword-input {
- width: 100%;
- min-height: 26px;
- border: 1px solid rgba(147, 197, 253, 0.32);
- border-radius: 7px;
- background: rgba(15, 23, 42, 0.78);
- color: #f8fafc;
- font-size: 12px;
- padding: 4px 7px;
-}
-
-.wpaw-agent-keyword-input:focus {
- outline: none;
- border-color: #60a5fa;
- box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35);
-}
-
-.wpaw-agent-resume-card {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 10px;
- margin-top: 10px;
- padding: 9px;
- border-radius: 9px;
- background: rgba(59, 130, 246, 0.12);
- border: 1px solid rgba(96, 165, 250, 0.28);
-}
-
-.wpaw-agent-resume-card strong,
-.wpaw-agent-resume-card span {
- display: block;
-}
-
-.wpaw-agent-resume-card strong {
- color: #bfdbfe;
- font-size: 12px;
-}
-
-.wpaw-agent-resume-card span {
- color: #93c5fd;
- font-size: 11px;
- margin-top: 2px;
-}
-
-.wpaw-input-area {
- background: #1e2128;
- padding: 12px;
- border-radius: 0;
- border: 1px solid #2d3139;
- border-top: none;
- margin-top: auto;
-}
-
-.wpaw-input-toolbar {
- display: flex;
- align-items: center;
- gap: 10px;
- margin-bottom: 10px;
-}
-
-.wpaw-input-label {
- font-size: 12px;
- color: #8b95a5;
- font-weight: 600;
- letter-spacing: 0.02em;
- text-transform: uppercase;
-}
-
-.wpaw-mode-select {
- padding: 6px 8px;
- border-radius: 6px;
- border: 1px solid #3d4450;
- background: #252830;
- font-size: 13px;
- font-weight: 400;
- color: #c8cdd5;
- cursor: pointer;
- transition: border-color 0.1s ease;
-}
-
-.wpaw-mode-select:hover {
- border-color: #5b8def;
-}
-
-.wpaw-mode-select:focus {
- outline: none;
- border-color: #5b8def;
- box-shadow: 0 0 0 1px #5b8def;
-}
-
-#agentMode {
- background-color: #1d2227;
- color: #bebebe;
- font-weight: normal;
- text-transform: capitalize;
- font-size: 11px;
-}
-
-#agentMode:active,
-#agentMode:focus {
- text-decoration: unset;
-}
-
-/* Messages */
-.wpaw-message {
- margin-bottom: 12px;
- padding: 10px 12px;
- border-radius: 8px;
- background: #252830;
- border: 1px solid #2d3139;
- color: #e0e4ea;
- animation: messageSlide 0.2s ease;
-}
-
-@keyframes messageSlide {
- from {
- opacity: 0;
- transform: translateY(5px);
- }
-
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-.wpaw-message-user {
- background: #2a3040;
- border-left: none;
- margin-left: 0;
- max-width: 80%;
- margin-left: auto;
- border-radius: 12px 12px 4px 12px;
- border: 1px solid #3b4560;
- color: #e8ecf2;
-}
-
-.wpaw-message-error {
- background: rgba(220, 38, 38, 0.08);
- border: 1px solid rgba(220, 38, 38, 0.25);
- border-left: 3px solid #ef4444;
- border-radius: 8px;
- color: #fca5a5;
- padding: 12px 14px;
-}
-
-.wpaw-message-error .wpaw-error-title {
- font-weight: 600;
- font-size: 13px;
- color: #fca5a5;
- margin-bottom: 4px;
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.wpaw-message-error .wpaw-error-detail {
- font-size: 12px;
- color: #d4a0a0;
- line-height: 1.5;
- margin-top: 6px;
-}
-
-.wpaw-message-error details {
- margin-top: 8px;
-}
-
-.wpaw-message-error details summary {
- font-size: 11px;
- color: #e87171;
- cursor: pointer;
- user-select: none;
-}
-
-.wpaw-message-error details[open] summary {
- margin-bottom: 6px;
-}
-
-.wpaw-message-error button.is-secondary {
- background: rgba(220, 38, 38, 0.15);
- color: #fca5a5;
- border: 1px solid rgba(220, 38, 38, 0.4) !important;
- box-shadow: none !important;
- border-radius: 6px;
- margin-top: 8px;
- font-size: 12px;
- padding: 6px 14px;
- transition: background 0.15s;
-}
-
-.wpaw-message-error button.is-secondary:hover {
- background: rgba(220, 38, 38, 0.25);
-}
-
-/* Research message styling */
-.wpaw-message[type="research"] {
- background: linear-gradient(135deg, #1a2a3a 0%, #0f1a24 100%);
- border: 1px solid #2d4a6a;
- border-left: 4px solid #61dafb;
- padding: 16px;
- margin: 12px 0;
- border-radius: 8px;
-}
-
-.wpaw-message[type="research"] .wpaw-message-content {
- font-size: 13px;
- line-height: 1.7;
-}
-
-.wpaw-research-header {
- display: flex;
- align-items: center;
- gap: 8px;
- margin-bottom: 12px;
- padding-bottom: 10px;
- border-bottom: 1px solid #2d4a6a;
- font-weight: 600;
- color: #61dafb;
-}
-
-.wpaw-research-result {
- background: rgba(0, 0, 0, 0.3);
- padding: 10px 12px;
- margin: 8px 0;
- border-radius: 6px;
- border-left: 3px solid #4a90a4;
-}
-
-.wpaw-research-result-title {
- font-weight: 600;
- color: #fff;
- margin-bottom: 4px;
-}
-
-.wpaw-research-result-url {
- font-size: 11px;
- color: #6ba3c7;
- margin-bottom: 4px;
- word-break: break-all;
-}
-
-.wpaw-research-result-desc {
- color: #a0b8cc;
- font-size: 12px;
-}
-
-.wpaw-research-fetched {
- margin-top: 16px;
- padding-top: 12px;
- border-top: 1px solid #2d4a6a;
-}
-
-.wpaw-research-fetched-title {
- font-size: 12px;
- color: #61dafb;
- font-weight: 600;
- margin-bottom: 8px;
-}
-
-.wpaw-research-fetched-content {
- background: rgba(97, 218, 251, 0.05);
- padding: 10px;
- border-radius: 4px;
- font-size: 12px;
- color: #a0b8cc;
- max-height: 200px;
- overflow-y: auto;
-}
-
-.wpaw-message-content {
- line-height: 1.6;
- word-wrap: break-word;
- white-space: pre-wrap;
-}
-
-.wpaw-ai-response {
- display: flex;
- flex-direction: column;
- gap: 10px;
- margin: 0 0 16px 0;
- padding-left: 10px;
- border-left: 2px solid #e0e6ed;
- position: relative;
-}
-
-.wpaw-ai-item {
- margin: 0;
- position: relative;
-}
-
-.wpaw-plan-card,
-.wpaw-edit-plan {
- background: #1e2530;
- border: 1px solid #2d3a4a;
- padding: 14px;
- border-radius: 10px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.wpaw-plan-card:hover {
- border-color: #3d5070;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.wpaw-plan-title {
- font-weight: 600;
- font-size: 14px;
- margin-bottom: 8px;
- color: #e8ecf2;
-}
-
-.wpaw-plan-section-status {
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- padding: 2px 8px;
- border-radius: 10px;
- margin-top: 2px;
- font-weight: 600;
-}
-
-.wpaw-plan-section.pending .wpaw-plan-section-status {
- color: #94a3b8;
- background: rgba(148, 163, 184, 0.1);
-}
-
-.wpaw-plan-section.done .wpaw-plan-section-status {
- color: #4ade80;
- background: rgba(74, 222, 128, 0.1);
-}
-
-.wpaw-plan-section.in_progress .wpaw-plan-section-status {
- color: #60a5fa;
- background: rgba(96, 165, 250, 0.1);
-}
-
-.wpaw-plan-sections,
-.wpaw-edit-plan-list {
- margin: 0 0 10px 18px;
- padding: 0;
- color: #dedede;
- font-size: 13px;
-}
-
-.wpaw-plan-section {
- margin-bottom: 8px;
-}
-
-.wpaw-plan-section-row {
- display: flex;
- gap: 8px;
- align-items: flex-start;
-}
-
-.wpaw-plan-section-check {
- margin-top: 2px;
-}
-
-input.wpaw-plan-section-check:checked::before {
- filter: brightness(500%) contrast(200%) saturate(100%);
-}
-
-.wpaw-plan-section-body {
- flex: 1;
-}
-
-.wpaw-clear-context {
- margin-left: auto;
- background: #f6f7f7;
- border: 1px solid #8c8f94;
- color: #50575e;
- padding: 4px 8px;
- border-radius: 2px;
- font-size: 11px;
- cursor: pointer;
-}
-
-.wpaw-clear-context:disabled {
- opacity: 0.6;
- cursor: not-allowed;
-}
-
-.wpaw-editor-lock-banner {
- background: #fef3c7;
- color: #92400e;
- padding: 8px 10px;
- border: 1px solid #fcd34d;
- font-size: 12px;
- margin-bottom: 10px;
-}
-
-.wpaw-refinement-lock-banner {
- background: #dbeafe;
- color: #1e3a8a;
- padding: 8px 10px;
- border: 1px solid #93c5fd;
- font-size: 12px;
- margin-bottom: 10px;
-}
-
-.wpaw-refine-confirm-overlay {
- position: absolute;
- inset: 0;
- z-index: 1200;
- background: rgba(10, 16, 27, 0.72);
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 16px;
-}
-
-.wpaw-refine-confirm-modal {
- width: 100%;
- max-width: 420px;
- background: #111827;
- color: #e5e7eb;
- border: 1px solid #334155;
- border-radius: 8px;
- padding: 16px;
- box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
-}
-
-.wpaw-refine-confirm-title {
- font-size: 15px;
- font-weight: 700;
- margin-bottom: 8px;
-}
-
-.wpaw-refine-confirm-body {
- font-size: 13px;
- line-height: 1.5;
- color: #cbd5e1;
- margin-bottom: 12px;
-}
-
-.wpaw-refine-confirm-actions {
- display: flex;
- justify-content: flex-end;
- gap: 8px;
- margin-top: 10px;
-}
-
-.wpaw-block-refining {
- position: relative;
- outline: 2px dashed #3b82f6;
- outline-offset: 2px;
-}
-
-.wpaw-block-refining::before {
- content: "REFINING";
- position: absolute;
- top: -12px;
- right: 8px;
- background: #2563eb;
- color: #fff;
- font-size: 10px;
- line-height: 1;
- padding: 3px 6px;
- border-radius: 4px;
- z-index: 20;
- letter-spacing: 0;
- font-weight: 700;
-}
-
-/* Refinement lock: prevent content editing while still allowing page scroll */
-.wpaw-refining-locked .editor-styles-wrapper [contenteditable="true"],
-.wpaw-refining-locked .block-editor-rich-text__editable,
-.wpaw-refining-locked .block-editor-writing-flow [role="textbox"] {
- pointer-events: none !important;
- user-select: none !important;
- caret-color: transparent !important;
-}
-
-.wpaw-refining-locked .block-editor-block-toolbar,
-.wpaw-refining-locked .block-editor-default-block-appender,
-.wpaw-refining-locked .editor-block-list-item__inline-menu,
-.wpaw-refining-locked .block-editor-inserter {
- pointer-events: none !important;
- opacity: 0.5;
-}
-
-.wpaw-ai-response pre {
- background: #1a1d23;
- padding: 12px;
- border-radius: 8px;
- overflow-x: auto;
- font-family: ui-monospace, "SF Mono", Menlo, monospace;
- font-size: 12px;
- border: 1px solid #2d3139;
- color: #c8cdd5;
-}
-
-.wpaw-ai-response code {
- background: #2d3139;
- color: #a5d6ff;
- padding: 2px 5px;
- border-radius: 4px;
- font-family: ui-monospace, "SF Mono", Menlo, monospace;
- font-size: 12px;
-}
-
-.wpaw-editor-locked
- .admin-ui-navigable-region.interface-interface-skeleton__content {
- position: relative;
-}
-
-.wpaw-editor-locked
- .admin-ui-navigable-region.interface-interface-skeleton__content::after {
- content: "";
- position: absolute;
- inset: 0;
- background: rgba(255, 255, 255, 0.55);
- z-index: 999;
- pointer-events: all;
-}
-
-/* Outline Version Tracking & Inline Editing */
-.wpaw-plan-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.wpaw-plan-version {
- font-size: 10px;
- background: #374151;
- color: #9ca3af;
- padding: 2px 6px;
- border-radius: 4px;
- font-weight: 500;
-}
-
-.wpaw-plan-section-drag {
- cursor: grab;
- color: #6b7280;
- padding: 0 4px;
- font-size: 12px;
- opacity: 0.5;
- transition: opacity 150ms;
-}
-
-.wpaw-plan-section-drag:hover {
- opacity: 1;
-}
-
-.wpaw-plan-section-drag:active {
- cursor: grabbing;
-}
-
-/* Drag and drop visual feedback */
-.wpaw-plan-section.dragging {
- opacity: 0.5;
- background: rgba(59, 130, 246, 0.2);
-}
-
-.wpaw-plan-section.drag-over {
- border-top: 2px solid #3b82f6;
-}
-
-.wpaw-plan-section-drag:hover {
- cursor: grab;
-}
-
-.wpaw-plan-section-drag:active {
- cursor: grabbing;
-}
-
-.wpaw-plan-section-edit {
- display: flex;
- align-items: center;
- gap: 4px;
- flex: 1;
-}
-
-.wpaw-plan-section-edit-input {
- flex: 1;
- background: #1f2937;
- border: 1px solid #3b82f6;
- border-radius: 4px;
- color: #f3f4f6;
- padding: 4px 8px;
- font-size: 13px;
-}
-
-.wpaw-plan-section-edit-input:focus {
- outline: none;
- border-color: #60a5fa;
-}
-
-.wpaw-plan-section-edit-save,
-.wpaw-plan-section-edit-cancel {
- background: none;
- border: none;
- cursor: pointer;
- font-size: 12px;
- padding: 4px;
- border-radius: 4px;
- transition: background 150ms;
-}
-
-.wpaw-plan-section-edit-save {
- color: #22c55e;
-}
-
-.wpaw-plan-section-edit-save:hover {
- background: rgba(34, 197, 94, 0.2);
-}
-
-.wpaw-plan-section-edit-cancel {
- color: #ef4444;
-}
-
-.wpaw-plan-section-edit-cancel:hover {
- background: rgba(239, 68, 68, 0.2);
-}
-
-.wpaw-plan-section-edit-btn {
- background: none;
- border: none;
- cursor: pointer;
- font-size: 12px;
- padding: 4px;
- opacity: 0;
- transition: opacity 150ms;
- margin-left: auto;
-}
-
-.wpaw-plan-section-row:hover .wpaw-plan-section-edit-btn {
- opacity: 1;
-}
-
-.wpaw-plan-section-wordcount {
- font-size: 10px;
- color: #9ca3af;
- margin-top: 2px;
-}
-
-/* Refinement Actions Panel */
-.wpaw-refinement-actions {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 10px 16px;
- background: #1f2937;
- border-top: 1px solid #374151;
- flex-wrap: wrap;
-}
-
-.wpaw-refinement-actions-label {
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: #9ca3af;
- font-weight: 600;
-}
-
-.wpaw-refinement-btn {
- background: #374151;
- border: 1px solid #4b5563;
- border-radius: 6px;
- color: #d1d5db;
- cursor: pointer;
- font-size: 12px;
- padding: 6px 12px;
- transition: all 150ms ease;
- display: flex;
- align-items: center;
- gap: 4px;
-}
-
-.wpaw-refinement-btn:hover {
- background: #4b5563;
- border-color: #6b7280;
- color: #f3f4f6;
-}
-
-.wpaw-refinement-btn:active {
- transform: scale(0.98);
-}
-
-.wpaw-plan-actions {
- display: flex;
- justify-content: flex-end;
- margin-top: 10px;
-}
-
-.wpaw-edit-plan-item {
- margin-bottom: 6px;
- line-height: 1.4;
-}
-
-.wpaw-edit-plan-preview-label {
- font-size: 12px;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- color: #6b7280;
- margin-bottom: 6px;
-}
-
-.wpaw-edit-plan-item-title {
- font-weight: 600;
- color: #1f2937;
-}
-
-.dark-theme .wpaw-edit-plan-item-title {
- color: #dedede;
-}
-
-.wpaw-edit-plan-item-before,
-.wpaw-edit-plan-item-after {
- font-size: 12px;
- /* color: #5b6472; */
- margin-top: 2px;
-}
-
-.wpaw-edit-plan-item-target {
- margin-top: 6px;
- font-size: 12px;
- color: #8b949e;
- background: none;
- border: none;
- padding: 0;
- text-align: left;
- cursor: pointer;
-}
-
-.wpaw-edit-plan-item-target:hover {
- color: #58a6ff;
- text-decoration: underline;
-}
-
-.wpaw-edit-plan-item-target:disabled {
- color: #6b7280;
- cursor: default;
- text-decoration: none;
-}
-
-.wpaw-edit-plan-item-before {
- border-left: 2px solid #f0b429;
- padding-left: 6px;
- color: #f0b429;
-}
-
-.wpaw-edit-plan-item-after {
- border-left: 2px solid #2f855a;
- padding-left: 6px;
- color: #2f855a;
-}
-
-.wpaw-response {
- margin: 0 0 12px 0;
- border-left: 2px solid #3d4450;
- color: #dce0e8;
-}
-
-.dark-theme .wpaw-response {
- color: #dce0e8;
-}
-
-.wpaw-ai-response .wpaw-response {
- border-left: none;
-}
-
-.wpaw-ai-response .wpaw-response::before {
- content: "";
- position: absolute;
- left: -15px;
- top: 20px;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: #cfd7df;
- border: 1px solid #e0e6ed;
- box-shadow: 0 0 0 2px #f6f7fb;
-}
-
-.wpaw-streaming-indicator {
- padding-left: 12px;
- font-size: 12px;
- color: #6b7280;
-}
-
-.wpaw-streaming-indicator::after {
- content: "...";
- display: inline-block;
- width: 18px;
- animation: wpaw-ellipsis 1.1s infinite;
-}
-
-.wpaw-edit-plan {
- padding: 12px;
- border: 1px dashed #d0d7de;
-}
-
-.wpaw-edit-plan-title {
- font-weight: 600;
- margin-bottom: 6px;
- color: #1f2937;
-}
-
-.dark-theme .wpaw-edit-plan-title {
- color: #fff;
-}
-
-.wpaw-edit-plan-summary {
- font-size: 12px;
- color: #4b5563;
- margin-bottom: 10px;
-}
-
-.dark-theme .wpaw-edit-plan-summary {
- color: #dedede;
-}
-
-.wpaw-edit-plan-actions {
- display: flex;
- gap: 8px;
-}
-
-@keyframes wpaw-ellipsis {
- 0% {
- content: ".";
- }
-
- 33% {
- content: "..";
- }
-
- 66% {
- content: "...";
- }
-
- 100% {
- content: ".";
- }
-}
-
-/* Timeline Progress */
-.wpaw-timeline-entry {
- display: flex;
- gap: 15px;
- margin-bottom: 0;
- padding: 10px 12px;
- /* background: #f6f7fb; */
- box-shadow: none;
- position: relative;
- font-size: 12.5px;
- line-height: 1.4;
-}
-
-.wpaw-timeline-entry:last-child {
- margin-bottom: 16px;
-}
-
-.wpaw-timeline-entry:not(:last-child) {
- padding-bottom: 18px;
-}
-
-/* Colored line for active timeline */
-.wpaw-timeline-entry.active:not(:first-of-type)::before {
- /* background: linear-gradient(to bottom, #2271b1 0%, #cfd7df 100%); */
- background: #2271b1;
- display: none;
-}
-
-/* Colored line for completed timeline */
-.wpaw-timeline-entry.complete:not(:first-of-type)::before {
- /* background: linear-gradient(to bottom, #2e8540 0%, #cfd7df 100%); */
- background: #2e8540;
- display: none;
-}
-
-/* .wpaw-timeline-entry.active { */
-/* background: #fff; */
-/* border: 1px solid #bfdbfe; */
-/* box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06); */
-/* margin-bottom: 15px; */
-/* border-radius: 6px; */
-/* } */
-
-.wpaw-timeline-entry.inactive {
- background: transparent;
- border: 1px dashed #e2e8f0;
- margin-bottom: 15px;
- opacity: 0.8;
-}
-
-.wpaw-timeline-entry.complete {
- background: rgb(188 235 203 / 5%);
- /* border: 1px solid #bbf7d0; */
- /* margin-bottom: 15px; */
- /* border-radius: 6px; */
-}
-
-.wpaw-processing-indicator {
- display: flex;
- align-items: center;
- gap: 6px;
- margin-top: 6px;
- font-size: 12px;
- color: #4b5563;
-}
-
-.wpaw-processing-indicator .components-spinner {
- margin: 0;
-}
-
-.wpaw-timeline-dot {
- flex-shrink: 0;
- width: 12px;
- height: 12px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: #eef1f5;
- border-radius: 50%;
- position: absolute;
- left: -17px;
- z-index: 2;
- border: 1px solid #e0e6ed;
- /* box-shadow: 0 0 0 2px #f6f7fb; */
-}
-
-.wpaw-timeline-entry.is-current .wpaw-timeline-dot {
- background: #eff6ff;
- box-shadow: 0 0 0 2px #3b82f6;
- border-color: #3b82f6;
- animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
-}
-
-.wpaw-timeline-entry.complete .wpaw-timeline-dot {
- background: #f0fdf4;
- box-shadow: 0 0 0 1px #22c55e;
- border-color: #22c55e;
- color: #15803d;
-}
-
-.wpaw-timeline-entry.inactive .wpaw-timeline-dot {
- background: #f1f5f9;
- box-shadow: none;
- border-color: #e2e8f0;
-}
-
-.wpaw-plan-section-row input[type="checkbox"] {
- transform: translateY(3px);
-}
-
-@keyframes pulse-ring {
- 0% {
- box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
- }
-
- 70% {
- box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
- }
-
- 100% {
- box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
- }
-}
-
-.wpaw-timeline-content {
- flex: 1;
- font-family:
- -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
- color: #c8cdd5;
-}
-
-.wpaw-timeline-message {
- font-size: 12.5px;
- color: #c8cdd5;
- margin-bottom: 5px;
- line-height: 1.5;
-}
-
-.dark-theme .wpaw-timeline-message {
- color: #e0e4ea;
-}
-
-.wpaw-timeline-complete {
- font-size: 11.5px;
- color: #2e8540;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.02em;
-}
-
-.wpaw-actions {
- display: flex;
- gap: 10px;
- margin-top: 12px;
-}
-
-.wpaw-actions button {
- flex: 1;
-}
-
-/* Primary Button - WP Style */
-.wpaw-actions .is-primary,
-.wpaw-actions .components-button.is-primary,
-.wpaw-plan-actions .is-primary {
- background: #2271b1;
- border: 1px solid #2271b1;
- border-radius: 8px;
- padding: 8px 14px;
- font-weight: 400;
- font-size: 13px;
- color: #fff;
- transition: background 0.1s ease;
- box-shadow: none;
-}
-
-.wpaw-actions .is-primary:hover,
-.wpaw-actions .components-button.is-primary:hover,
-.wpaw-plan-actions .is-primary:hover {
- background: #135e96;
- border-color: #135e96;
-}
-
-.components-button.is-primary,
-.components-button.is-secondary {
- justify-content: center;
-}
-
-.wpaw-actions .is-primary:disabled {
- background: #a7aaad;
- border-color: #a7aaad;
- color: #fff;
-}
-
-/* (Dead wpaw-header-actions CSS removed — P1 cleanup) */
-
-/* ===========================
- CONFIG TAB
- =========================== */
-.wpaw-config-tab {
- padding: 20px 0;
-}
-
-.wpaw-config-tab .wpaw-config-unavailable {
- text-align: center;
- padding: 40px 20px;
- color: #666;
- font-style: italic;
-}
-
-.wpaw-config-tab .wpaw-tab-header {
- position: absolute;
- width: calc(100% - 15px);
- z-index: 2;
-}
-
-.wpaw-config-tab > *:nth-child(2) {
- margin-top: 60px;
-}
-
-.wpaw-config-tab h3 {
- margin: 0 0 20px 0;
- font-size: 18px;
- color: #2271b1;
- border-bottom: 2px solid #e0e0e0;
- padding-bottom: 10px;
-}
-
-.wpaw-config-section {
- padding: 12px;
- background: #fff;
- border-radius: 0;
- border: 1px solid #dcdcde;
-}
-
-.wpaw-config-section:hover {
- border-color: #8c8f94;
-}
-
-.wpaw-config-section label {
- display: block;
- font-weight: 600;
- margin-bottom: 6px;
- color: #1d2227;
- font-size: 13px;
-}
-
-.wpaw-select {
- width: 100%;
- padding: 8px 10px;
- font-size: 11px;
- border: 1px solid #8c8f94;
- border-radius: 2px;
- background: #fff;
- cursor: pointer;
- color: #1d2227;
-}
-
-.wpaw-config-section .wpaw-select {
- width: 100% !important;
- max-width: unset !important;
-}
-
-.wpaw-select:focus {
- outline: none;
- border-color: #2271b1;
- box-shadow: 0 0 0 1px #2271b1;
-}
-
-.wpaw-config-section h4 {
- margin: 0 0 10px 0;
- font-size: 16px;
- color: #333;
-}
-
-/* ===========================
- COST TAB
- =========================== */
-.wpaw-cost-tab {
- font-family: ui-monospace, monospace;
- padding: 20px 0;
-}
-
-.wpaw-cost-tab h3 {
- margin: 0 0 20px 0;
- font-size: 18px;
- color: #2271b1;
- border-bottom: 2px solid #e0e0e0;
- padding-bottom: 10px;
-}
-
-.wpaw-cost-card {
- display: grid;
-}
-
-.wpaw-cost-stat {
- padding: 12px;
- background: #252830;
- border-radius: 0;
- border: 1px solid #dcdcde;
- text-align: center;
-}
-
-.wpaw-cost-stat:hover {
- border-color: #8c8f94;
-}
-
-.wpaw-cost-stat label {
- display: block;
- font-size: 13px;
- color: #6c6c6c;
- font-weight: 600;
- margin-bottom: 6px;
-}
-
-.wpaw-cost-value {
- font-size: 22px;
- color: #ffffff;
-}
-
-.wpaw-budget-bar {
- width: 100%;
- height: 10px;
- background: #4c4c4c;
- overflow: hidden;
- margin-bottom: 10px;
-}
-
-.wpaw-budget-bar ~ .description {
- padding: 0 12px;
-}
-
-.wpaw-budget-fill {
- height: 100%;
- background: linear-gradient(90deg, #4caf50, #66bb6a);
- transition:
- width 0.5s ease,
- background 0.3s ease;
-}
-
-.wpaw-budget-fill.warning {
- background: linear-gradient(90deg, #ff9800, #ffa726);
-}
-
-.wpaw-budget-fill.danger {
- background: linear-gradient(90deg, #f44336, #ef5350);
-}
-
-.wpaw-refresh-btn {
- background: transparent;
- border: none;
- cursor: pointer;
- font-size: 14px;
- padding: 4px;
- margin-left: auto;
- transition: transform 0.2s ease;
-}
-
-.wpaw-refresh-btn:hover {
- transform: rotate(180deg);
-}
-
-.wpaw-cost-remaining .wpaw-cost-value {
- font-weight: 700;
-}
-
-.wpaw-cost-value.ok {
- color: #4caf50;
-}
-
-.wpaw-cost-value.warning {
- color: #ff9800;
-}
-
-.wpaw-cost-value.danger {
- color: #f44336;
-}
-
-.wpaw-budget-section {
- padding: 12px;
- margin-top: 8px;
-}
-
-.wpaw-budget-label {
- display: flex;
- justify-content: space-between;
- font-size: 12px;
- color: #a7aaad;
- margin-bottom: 6px;
-}
-
-.wpaw-budget-warning {
- padding: 8px 12px;
- margin: 8px 12px;
- border-radius: 4px;
- font-size: 12px;
- text-align: center;
-}
-
-.wpaw-budget-warning.warning {
- background: rgba(255, 152, 0, 0.15);
- color: #ff9800;
-}
-
-.wpaw-budget-warning.danger {
- background: rgba(244, 67, 54, 0.15);
- color: #f44336;
-}
-
-.wpaw-cost-footer {
- padding: 12px;
- margin-top: 12px;
- border-top: 1px solid #3c3c3c;
- text-align: center;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-cost-settings-link {
- color: #a7aaad;
- text-decoration: none;
- font-size: 12px;
- transition: color 0.2s ease;
-}
-
-.wpaw-cost-settings-link:hover {
- color: #2271b1;
-}
-
-/* Cost History Table */
-.wpaw-cost-history {
- margin: 16px 12px;
-}
-
-.wpaw-cost-history h4 {
- color: #e0e0e0;
- font-size: 13px;
- font-weight: 600;
- margin: 0 0 12px 0;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wpaw-cost-table-wrapper {
- max-height: 300px;
- overflow-y: auto;
- border: 1px solid #3c3c3c;
- border-radius: 4px;
-}
-
-.wpaw-cost-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 12px;
-}
-
-.wpaw-cost-table thead {
- position: sticky;
- top: 0;
- background: #2c2c2c;
- z-index: 1;
-}
-
-.wpaw-cost-table th {
- padding: 8px 6px;
- text-align: left;
- font-weight: 600;
- color: #a7aaad;
- border-bottom: 1px solid #3c3c3c;
- font-size: 11px;
- text-transform: uppercase;
- background-color: #2c2c2c;
-}
-
-.wpaw-cost-table td {
- padding: 8px 6px;
- color: #e0e0e0;
- border-bottom: 1px solid #2c2c2c;
-}
-
-.wpaw-cost-table tbody tr:hover {
- background: rgba(255, 255, 255, 0.03);
-}
-
-.wpaw-cost-table td:nth-child(4),
-.wpaw-cost-table td:nth-child(5) {
- text-align: right;
-}
-
-.wpaw-cost-table th:nth-child(4),
-.wpaw-cost-table th:nth-child(5) {
- text-align: right;
-}
-
-/* ===========================
- CLARIFICATION QUIZ
- =========================== */
-.wpaw-clarification-quiz {
- margin: 20px 0;
-}
-
-.wpaw-quiz-header {
- text-align: center;
- margin-bottom: 20px;
-}
-
-.wpaw-quiz-header h3 {
- margin: 0 0 15px 0;
- font-size: 18px;
- color: #6c6c6c;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-progress-bar {
- width: 100%;
- height: 8px;
- background: #e0e0e0;
- border-radius: 4px;
- overflow: hidden;
- margin-bottom: 8px;
-}
-
-.wpaw-progress-fill {
- height: 100%;
- background: linear-gradient(90deg, #2271b1, #135e96);
- transition: width 0.3s ease;
-}
-
-.wpaw-quiz-header span {
- font-size: 12px;
- color: #757575;
-}
-
-.wpaw-question-card {
- background: #f9f9f9;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
- padding: 20px;
- margin-bottom: 20px;
-}
-
-.wpaw-question-card h4 {
- margin: 0 0 15px 0;
- font-size: 16px;
- color: #333;
-}
-
-.dark-theme .wpaw-question-card {
- border-radius: unset;
- background-color: #252830;
- border-color: #6c6c6c;
-}
-
-.wpaw-answer-options {
- display: flex;
- flex-direction: column;
- gap: 10px;
-}
-
-.wpaw-answer-options label {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 12px;
- border: 2px solid #6c6c6c;
- border-radius: 6px;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.wpaw-answer-options label:hover {
- border-color: #ffffff;
-}
-
-.wpaw-answer-options label:has(input:checked) {
- border-color: #2271b1;
- background: #162c42;
- color: white;
- font-weight: bold;
-}
-
-.wpaw-answer-options input[type="radio"],
-.wpaw-answer-options input[type="checkbox"] {
- margin: 0 10px 0 0;
-}
-
-.wpaw-answer-options span {
- flex: 1;
-}
-
-/* Textarea styling for open_text questions */
-.wpaw-answer-options textarea {
- width: 100%;
- min-height: 100px;
- padding: 12px;
- font-size: 14px;
- line-height: 1.6;
- border: 2px solid #e0e0e0;
- border-radius: 6px;
- background: white;
- transition: border-color 0.2s ease;
-}
-
-.wpaw-answer-options textarea:focus {
- outline: none;
- border-color: #2271b1;
- box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
-}
-
-.wpaw-previous-answers {
- margin-top: 15px;
- padding: 15px;
- background: #fff;
- border-radius: 6px;
- border: 1px solid #e0e0e0;
-}
-
-.wpaw-previous-answers strong {
- display: block;
- margin-bottom: 10px;
- font-size: 13px;
- color: #757575;
-}
-
-.wpaw-question-label {
- display: block;
- font-size: 12px;
- font-weight: 600;
- color: #2271b1;
- margin-bottom: 3px;
-}
-
-.wpaw-answer-text {
- margin: 0 0 10px 0;
- padding: 8px 12px;
- background: #f5f5f5;
- border-radius: 4px;
- font-size: 13px;
-}
-
-.wpaw-previous-answers > div:last-child .wpaw-answer-text {
- margin-bottom: 0;
-}
-
-.wpaw-quiz-actions {
- display: flex;
- gap: 10px;
- justify-content: space-between;
- margin-top: 20px;
-}
-
-.wpaw-quiz-actions button {
- justify-content: center;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-quiz-actions button.is-primary {
- flex: 1;
-}
-
-/* Custom answer input */
-.wpaw-custom-answer-wrapper {
- margin-top: 12px;
- padding-top: 12px;
- border-top: 1px solid #3c3c3c;
-}
-
-.wpaw-custom-text-input {
- width: 100%;
- margin-top: 8px;
- padding: 8px 12px;
- background: #1e1e1e;
- border: 1px solid #3c3c3c;
- border-radius: 4px;
- color: #e0e0e0;
- font-size: 13px;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-custom-text-input:focus {
- outline: none;
- border-color: #2271b1;
-}
-
-/* Config form styles */
-.wpaw-config-form {
- display: flex;
- flex-direction: column;
- gap: 20px;
-}
-
-.wpaw-config-field {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- gap: 15px;
- padding: 12px;
- background: #1a1a1a;
- border: 1px solid #3c3c3c;
- border-radius: 6px;
-}
-
-.wpaw-config-label {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
-
-.wpaw-config-label-text {
- font-size: 14px;
- font-weight: 500;
- color: #e0e0e0;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-config-description {
- font-size: 12px;
- color: #888;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-config-toggle {
- position: relative;
- display: inline-block;
- width: 48px;
- height: 24px;
- flex-shrink: 0;
- cursor: pointer;
-}
-
-.wpaw-config-toggle input {
- opacity: 0;
- width: 0;
- height: 0;
-}
-
-.wpaw-toggle-slider {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #3c3c3c;
- border-radius: 24px;
- transition: 0.3s;
-}
-
-.wpaw-toggle-slider:before {
- position: absolute;
- content: "";
- height: 18px;
- width: 18px;
- left: 3px;
- bottom: 3px;
- background-color: white;
- border-radius: 50%;
- transition: 0.3s;
-}
-
-.wpaw-config-toggle input:checked + .wpaw-toggle-slider {
- background-color: #2271b1;
-}
-
-.wpaw-config-toggle input:checked + .wpaw-toggle-slider:before {
- transform: translateX(24px);
-}
-
-.wpaw-config-text-input {
- width: 250px;
- padding: 6px 10px;
- background: #252830;
- border: 1px solid #3c3c3c;
- border-radius: 4px;
- color: #e0e0e0;
- font-size: 13px;
- font-family: ui-monospace, monospace;
- flex-shrink: 0;
-}
-
-.wpaw-config-text-input:focus {
- outline: none;
- border-color: #2271b1;
-}
-
-.wpaw-config-text-input::placeholder {
- color: #6c6c6c;
-}
-
-.wpaw-question-card .wpaw-config-form label {
- display: flex;
-}
-
-.wpaw-question-card
- .wpaw-config-form
- .wpaw-config-label
- .wpaw-config-description {
- font-size: 11px;
-}
-
-.wpaw-question-card .wpaw-config-field:has(input[type="text"]) {
- flex-direction: column;
-}
-
-.wpaw-question-card:has(.wpaw-config-form) {
- padding-left: 0;
- padding-right: 0;
-}
-
-.wpaw-question-card:has(.wpaw-config-form) h4,
-.wpaw-question-card:has(.wpaw-config-form) .wpaw-quiz-actions {
- padding-left: 20px;
- padding-right: 20px;
-}
-
-.wpaw-question-card .wpaw-config-form {
- gap: 0;
-}
-
-.wpaw-question-card .wpaw-config-form .wpaw-config-field {
- border-radius: unset !important;
- border-width: 1px 0;
- background-color: unset;
- padding-left: 20px;
- padding-right: 20px;
-}
-
-.wpaw-question-card .wpaw-config-form .wpaw-config-field input[type="text"] {
- background-color: #1a1a1a !important;
-}
-
-.dark-theme .wpaw-question-card {
- border-radius: unset;
- background-color: #252830;
- border-color: #6c6c6c;
-}
-
-.dark-theme .wpaw-question-card h4 {
- color: white;
- font-weight: normal;
-}
-
-.dark-theme .wpaw-question-card textarea {
- background: #252830;
- color: white;
- outline: unset;
- border-color: #3c3c3c;
- font-family: ui-monospace, monospace;
- letter-spacing: 1px;
- line-height: normal;
-}
-
-.dark-theme .wpaw-question-card textarea::placeholder {
- color: #6c6c6c;
-}
-
-.dark-theme .wpaw-question-card textarea::focus,
-.dark-theme .wpaw-question-card textarea::active {
- border-color: #252830 !important;
-}
-
-/* ===========================
- INFO MESSAGES
- =========================== */
-.wpaw-info {
- padding: 12px 15px;
- background: #fff3cd;
- border-left: 4px solid #ffc107;
- border-radius: 4px;
- font-size: 13px;
- margin: 10px 0;
- line-height: 1.5;
-}
-
-.wpaw-info a {
- color: #856404;
- font-weight: 600;
- text-decoration: underline;
-}
-
-.wpaw-info a:hover {
- color: #533f03;
-}
-
-/* ===========================
- BLOCK MENTION STYLES
- =========================== */
-.wpaw-block-mentioned {
- outline: 2px solid #2271b1 !important;
- outline-offset: 2px;
- box-shadow: 0 0 0 4px rgba(34, 113, 177, 0.2);
- animation: wpaw-pulse 1.5s infinite;
- transition: all 0.3s ease;
-}
-
-.wpaw-block-mentioned:hover {
- outline-width: 3px;
- box-shadow: 0 0 0 8px rgba(34, 113, 177, 0.3);
-}
-
-@keyframes wpaw-pulse {
- 0%,
- 100% {
- box-shadow: 0 0 0 0px rgba(34, 113, 177, 0.2);
- }
-
- 50% {
- box-shadow: 0 0 0 6px rgba(34, 113, 177, 0.4);
- }
-}
-
-/* Mention autocomplete */
-.wpaw-mention-autocomplete {
- position: absolute;
- background: white;
- border: 1px solid #ddd;
- border-radius: 4px;
- max-height: 200px;
- overflow-y: auto;
- z-index: 1000;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.wpaw-mention-option {
- padding: 8px 12px;
- cursor: pointer;
- border-bottom: 1px solid #eee;
- transition: background 0.15s ease;
-}
-
-.wpaw-mention-option:hover,
-.wpaw-mention-option.selected {
- background: #e7f3ff;
- border-left: 3px solid #2271b1;
-}
-
-.wpaw-mention-option strong {
- display: block;
- color: #333;
- font-size: 13px;
-}
-
-.wpaw-mention-option span {
- display: block;
- color: #666;
- font-size: 12px;
- margin-top: 2px;
-}
-
-/* ===========================
- RESPONSIVE
- =========================== */
-@media (max-width: 782px) {
- .wpaw-cost-card {
- grid-template-columns: 1fr;
- }
-}
-
-@media (max-width: 482px) {
- .interface-complementary-area__fill:has(
- #wp-agentic-writer\:wp-agentic-writer
- ),
- #wp-agentic-writer\:wp-agentic-writer {
- width: 100vw !important;
- }
-}
-
-/* Custom Dots Loader for Agentic Vibe */
-.wpaw-dots-loader {
- width: 6px;
- height: 6px;
- border-radius: 50%;
- background-color: #3b82f6;
- box-shadow:
- 12px 0 #3b82f6,
- -12px 0 #3b82f6;
- position: relative;
- animation: wpaw-flash 0.5s ease-out infinite alternate;
- margin: 0 20px 0 16px;
- display: inline-block;
-}
-
-@keyframes wpaw-flash {
- 0% {
- background-color: #93c5fd;
- box-shadow:
- 12px 0 #93c5fd,
- -12px 0 #3b82f6;
- }
-
- 50% {
- background-color: #3b82f6;
- box-shadow:
- 12px 0 #93c5fd,
- -12px 0 #93c5fd;
- }
-
- 100% {
- background-color: #93c5fd;
- box-shadow:
- 12px 0 #3b82f6,
- -12px 0 #93c5fd;
- }
-}
-
-/* Time Elapsed Indicator */
-.wpaw-timeline-elapsed {
- font-weight: 400;
- color: #6b7280;
- font-size: 11px;
- margin-left: 4px;
-}
-
-/* ===========================
- AGENTIC UI REVAMP
- =========================== */
-
-/* Status Bar */
-.wpaw-status-bar {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 8px 12px;
- background: #1d2227;
- color: #fff;
- font-family:
- ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
- font-size: 12px;
- border-bottom: 1px solid #3c3c3c;
-}
-
-.wpaw-status-indicator {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.wpaw-status-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: #50575e;
-}
-
-.wpaw-status-dot.idle {
- background: #50575e;
-}
-
-.wpaw-status-dot.thinking {
- background: #dba617;
- animation: statusPulse 1s infinite;
-}
-
-.wpaw-status-dot.checking,
-.wpaw-status-dot.refining {
- background: #60a5fa;
- animation: statusPulse 0.8s infinite;
-}
-
-.wpaw-status-dot.writing {
- background: #2271b1;
- animation: statusPulse 0.8s infinite;
-}
-
-.wpaw-status-dot.stopping {
- background: #f97316;
- animation: statusPulse 0.55s infinite;
-}
-
-.wpaw-status-dot.complete {
- background: #00a32a;
-}
-
-.wpaw-status-dot.error {
- background: #d63638;
-}
-
-@keyframes statusPulse {
- 0%,
- 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: 0.4;
- }
-}
-
-.wpaw-status-label {
- text-transform: uppercase;
- letter-spacing: 0.05em;
- font-weight: 500;
-}
-
-.wpaw-memanto-badge {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- padding: 2px 8px;
- border-radius: 10px;
- font-size: 11px;
- font-weight: 600;
- letter-spacing: 0.02em;
- background: rgba(99, 155, 255, 0.15);
- color: #93b8ff;
- border: 1px solid rgba(99, 155, 255, 0.25);
- cursor: default;
- white-space: nowrap;
-}
-
-.wpaw-status-cost {
- color: #a7aaad;
- font-size: 11px;
-}
-
-/* Unified Activity Log */
-.wpaw-activity-log {
- flex: 1;
- display: flex;
- flex-direction: column;
- overflow-y: auto;
- background: #fff;
- font-family:
- ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
- font-size: 13px;
- line-height: 1.5;
-}
-
-.dark-theme .wpaw-activity-log {
- background: transparent;
- border: unset;
-}
-
-.wpaw-log-entry {
- padding: 10px 12px;
- border-left: 3px solid transparent;
- border-bottom: 1px solid #f0f0f1;
-}
-
-.wpaw-log-entry:last-child {
- border-bottom: none;
-}
-
-/* User Command */
-.wpaw-log-entry.user-command {
- background: #f0f6fc;
- border-left-color: #2271b1;
-}
-
-.wpaw-log-entry.user-command::before {
- content: "> ";
- color: #2271b1;
- font-weight: 600;
-}
-
-/* Agent Status (thinking, processing) */
-.wpaw-log-entry.agent-status {
- color: #50575e;
- padding-left: 24px;
- position: relative;
-}
-
-.wpaw-log-entry.agent-status::before {
- content: "●";
- position: absolute;
- left: 12px;
- color: #8c8f94;
- font-size: 8px;
-}
-
-.wpaw-log-entry.agent-status.active::before {
- color: #2271b1;
- animation: statusPulse 1s infinite;
-}
-
-/* Agent Success */
-.wpaw-log-entry.agent-success {
- border-left-color: #00a32a;
- color: #1d2227;
-}
-
-.wpaw-log-entry.agent-success::before {
- content: "✓ ";
- color: #00a32a;
- font-weight: 600;
-}
-
-/* Agent Error */
-.wpaw-log-entry.agent-error {
- background: #fcf0f0;
- border-left-color: #d63638;
- color: #8a1e1e;
-}
-
-.wpaw-log-entry.agent-error::before {
- content: "✗ ";
- color: #d63638;
- font-weight: 600;
-}
-
-/* Agent Response (prose) */
-.wpaw-log-entry.agent-response {
- border-left-color: #dcdcde;
- font-family:
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
- Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-/* Command Input Area */
-.wpaw-command-area {
- background: #1d2227;
- padding: 12px;
- border-top: 1px solid #3c3c3c;
-}
-
-.wpaw-command-toolbar {
- display: flex;
- align-items: center;
- gap: 8px;
- margin-bottom: 8px;
-}
-
-.wpaw-command-mode {
- font-family: ui-monospace, monospace;
- font-size: 11px;
- color: #a7aaad;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.wpaw-command-mode-value {
- color: #2271b1;
- font-weight: 600;
-}
-
-.wpaw-command-input-wrapper {
- display: flex;
- align-items: flex-start;
- gap: 8px;
- background: #252830;
- border: 1px solid #3c3c3c;
- border-radius: 8px;
- padding: 8px 10px;
-}
-
-.wpaw-command-prefix {
- color: #2271b1;
- font-family: ui-monospace, monospace;
- font-weight: 600;
- font-size: 14px;
- line-height: 1.5;
- user-select: none;
-}
-
-.wpaw-command-input-wrapper .components-textarea-control {
- flex: 1;
-}
-
-.wpaw-command-input-wrapper textarea,
-.wpaw-command-input-wrapper .components-textarea-control__input {
- flex: 1;
- background: transparent !important;
- border: none !important;
- color: #fff !important;
- font-family: ui-monospace, SFMono-Regular, monospace !important;
- font-size: 13px !important;
- line-height: 1.5 !important;
- resize: none !important;
- min-height: 20px !important;
- padding: 0 !important;
- margin: 0 !important;
- box-shadow: none !important;
-}
-
-.wpaw-command-input-wrapper textarea::placeholder {
- color: #6c6c6c !important;
-}
-
-.wpaw-command-actions {
- display: flex;
- gap: 8px;
- margin-top: 8px;
-}
-
-.wpaw-command-btn {
- background: #2271b1;
- color: #fff;
- border: none;
- border-radius: 2px;
- padding: 8px 16px;
- font-size: 12px;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- cursor: pointer;
- transition: background 0.1s ease;
-}
-
-.wpaw-command-btn:hover {
- background: #135e96;
-}
-
-.wpaw-command-btn:disabled {
- background: #3c3c3c;
- color: #6c6c6c;
- cursor: not-allowed;
-}
-
-.wpaw-command-btn.secondary {
- background: transparent;
- color: #a7aaad;
- border: 1px solid #3c3c3c;
-}
-
-.wpaw-command-btn.secondary:hover {
- border-color: #6c6c6c;
- color: #fff;
-}
-
-/* Minimal Tabs Override */
-.wpaw-tabs-minimal {
- display: flex;
- background: #1d2227;
- border-bottom: 1px solid #3c3c3c;
-}
-
-.wpaw-tabs-minimal .wpaw-tab-btn {
- background: transparent;
- color: #a7aaad;
- border: none;
- border-bottom: 2px solid transparent;
- padding: 10px 16px;
- font-size: 12px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.wpaw-tabs-minimal .wpaw-tab-btn:hover {
- color: #fff;
-}
-
-.wpaw-tabs-minimal .wpaw-tab-btn.active {
- color: #fff;
- border-bottom-color: #2271b1;
-}
-
-/* ===========================
- UI REVAMP - PHASE 2
- =========================== */
-
-/* Status Bar Actions (Top Right) */
-.wpaw-status-actions {
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.wpaw-status-icon-btn {
- background: transparent;
- border: none;
- color: #a7aaad;
- cursor: pointer;
- font-size: 14px;
- padding: 2px;
- line-height: 1;
- transition:
- color 0.1s ease,
- transform 0.1s ease;
-}
-
-.wpaw-status-icon-btn:hover {
- color: #fff;
- transform: scale(1.1);
-}
-
-.wpaw-status-icon-btn:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- transform: none;
-}
-
-.wpaw-undo-btn {
- background: rgba(34, 113, 177, 0.15);
- border-radius: 4px;
- padding: 4px 8px;
- font-size: 12px;
-}
-
-.wpaw-undo-btn:hover:not(:disabled) {
- background: rgba(34, 113, 177, 0.3);
- color: #60a5fa;
-}
-
-/* Bottom Toolbar (Inline with Execute) */
-.wpaw-command-actions {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 10px;
- padding-top: 8px;
- border-top: 1px solid #252830;
-}
-
-.wpaw-command-actions-group {
- display: flex;
- align-items: center;
-}
-
-.wpaw-command-actions-group button:last-child {
- flex-shrink: 0;
-}
-
-.wpaw-command-mode-wrapper {
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.wpaw-command-label {
- font-family: ui-monospace, monospace;
- font-size: 11px;
- color: #6c6c6c;
- letter-spacing: 0.05em;
-}
-
-.wpaw-command-mode-select {
- background: transparent;
- border: none;
- color: #2271b1;
- font-family: ui-monospace, monospace;
- font-size: 11px;
- font-weight: 600;
- text-transform: uppercase;
- cursor: pointer;
- padding: 0;
- margin: 0;
- box-shadow: none;
-}
-
-.wpaw-command-mode-select:focus {
- box-shadow: none;
- outline: none;
- text-decoration: underline;
-}
-
-/* Web Search Toggle */
-.wpaw-web-search-toggle {
- display: flex !important;
- margin-bottom: 0 !important;
- align-items: center;
- gap: 4px;
- cursor: pointer;
- padding: 4px 8px;
- border-radius: 4px;
- transition: background 0.15s ease;
-}
-
-.wpaw-web-search-toggle:hover {
- background: rgba(255, 255, 255, 0.1);
-}
-
-.wpaw-web-search-toggle input[type="checkbox"] {
- display: none;
-}
-
-.wpaw-web-search-icon {
- font-size: 12px;
- opacity: 0.5;
- transition: opacity 0.15s ease;
-}
-
-.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon {
- opacity: 1;
-}
-
-.wpaw-web-search-toggle input:checked + .wpaw-web-search-icon * {
- stroke: #4caf50;
-}
-
-.wpaw-web-search-label {
- font-family: ui-monospace, monospace;
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: #6c6c6c;
- transition: color 0.15s ease;
-}
-
-.wpaw-web-search-toggle input:checked ~ .wpaw-web-search-label {
- color: #4caf50;
-}
-
-/* Blocked state (no Brave API key for local models) */
-.wpaw-web-search-toggle.wpaw-search-blocked {
- opacity: 0.4;
- cursor: not-allowed;
-}
-
-.wpaw-web-search-toggle.wpaw-search-blocked:hover {
- background: rgba(255, 80, 80, 0.08);
-}
-
-.wpaw-web-search-toggle.wpaw-search-blocked .wpaw-web-search-label {
- color: #ff6b6b;
- text-decoration: line-through;
-}
-
-.wpaw-command-text-btn {
- background: transparent;
- border: none;
- color: #6c6c6c;
- font-family: ui-monospace, monospace;
- font-size: 10px;
- text-transform: uppercase;
- cursor: pointer;
- letter-spacing: 0.05em;
- padding: 4px 8px;
- transition: color 0.1s ease;
-}
-
-.wpaw-command-text-btn:hover {
- color: #d63638;
- /* Red on hover for clear */
-}
-
-.wpaw-command-stop-btn {
- background: #d63638;
- color: #fff;
- border: none;
- font-family: ui-monospace, monospace;
- font-size: 11px;
- font-weight: 600;
- cursor: pointer;
- padding: 6px 12px;
- border-radius: 4px;
- transition: background 0.1s ease;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.wpaw-command-stop-btn:hover {
- background: #b32d2e;
-}
-
-.wpaw-resume-actions {
- display: flex;
- gap: 8px;
- margin-top: 12px;
- padding-top: 12px;
- border-top: 1px solid #3c3c3c;
-}
-
-/* Circle Icon Buttons */
-.wpaw-command-circle-btn {
- width: 40px !important;
- height: 40px !important;
- border-radius: 50%;
- border: none;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
- padding: 0;
-}
-
-.wpaw-send-circle-btn {
- background: #2271b1;
- color: #fff;
-}
-
-.wpaw-send-circle-btn:hover:not(:disabled) {
- background: #135e96;
- transform: scale(1.05);
-}
-
-.wpaw-send-circle-btn:disabled {
- background: #3c3c3c;
- color: #6c6c6c;
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.wpaw-stop-circle-btn {
- background: #d63638;
- color: #fff;
-}
-
-.wpaw-stop-circle-btn:hover {
- background: #b32d2e;
- transform: scale(1.05);
-}
-
-.wpaw-stop-circle-btn.is-stopping,
-.wpaw-stop-circle-btn.is-stopping:hover {
- background: #f97316;
- cursor: wait;
- transform: none;
-}
-
-.wpaw-stop-spinner {
- animation: wpaw-spin 0.85s linear infinite;
-}
-
-.wpaw-command-circle-btn svg {
- width: 20px !important;
- height: 20px !important;
- margin-bottom: unset !important;
-}
-
-/* Dark Theme Tabs (Config & Cost) */
-.wpaw-tab-content.dark-theme {
- background: #1d2227;
- /* Match status bar / command area */
- color: #fff;
- overflow-y: auto;
- padding: 0;
-}
-
-/* Tab Header with Back Button */
-.wpaw-tab-header {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 12px 16px;
- border-bottom: 1px solid #3c3c3c;
- background: #252525;
-}
-
-.wpaw-tab-header h3 {
- margin: 0;
- font-family: ui-monospace, monospace;
- font-size: 12px;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: #fff;
-}
-
-.wpaw-back-btn {
- background: transparent;
- border: 1px solid #3c3c3c;
- color: #a7aaad;
- font-family: ui-monospace, monospace;
- font-size: 11px;
- padding: 4px 10px;
- border-radius: 2px;
- cursor: pointer;
- transition: all 0.1s ease;
-}
-
-.wpaw-back-btn:hover {
- border-color: #6c6c6c;
- color: #fff;
-}
-
-/* Dark Theme Config Sections */
-.wpaw-tab-content.dark-theme .wpaw-config-section {
- padding: 16px;
- border-top: unset;
- border-right: unset;
- border-left: unset;
- border-bottom: 1px solid #6c6c6c;
- background-color: #252830;
-}
-
-.wpaw-tab-content.dark-theme label {
- display: block;
- font-family: ui-monospace, monospace;
- font-size: 11px;
- color: #a7aaad;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- margin-bottom: 8px;
-}
-
-.wpaw-select,
-.wpaw-tab-content.dark-theme input[type="text"],
-.wpaw-tab-content.dark-theme select {
- background: #252830 !important;
- border: 1px solid #3c3c3c !important;
- color: #fff !important;
- border-radius: 2px !important;
- padding: 6px 10px !important;
- width: 100%;
-}
-
-.wpaw-tab-content.dark-theme input[type="text"]::placeholder {
- color: #4c4c4c;
-}
-
-.wpaw-tab-content.dark-theme .description,
-.wpaw-tab-content.dark-theme .components-checkbox-control__help {
- color: #6c6c6c;
- font-family: ui-monospace, monospace;
- font-size: 11px;
- margin-top: 6px;
-}
-
-/* Dark Theme Cost Card overrides */
-.wpaw-tab-content.dark-theme .wpaw-cost-card {
- background: transparent;
- border: none;
- box-shadow: none;
-}
-
-.wpaw-tab-content.dark-theme .wpaw-cost-stat {
- border-top: unset;
- border-right: unset;
- border-left: unset;
- border-bottom-color: #6c6c6c;
-}
-
-.wpaw-tab-content.dark-theme .wpaw-cost-stat label {
- color: #6c6c6c;
-}
-
-.wpaw-tab-content.dark-theme .wpaw-cost-value {
- font-family: ui-monospace, monospace;
- color: #fff;
- font-size: 18px;
-}
-
-/* Ensure no white flash on dark tabs */
-.wpaw-tab-content.dark-theme .components-panel__body {
- background: #1d2227;
-}
-
-/* ===========================
- SEO SECTION STYLES
- =========================== */
-.wpaw-config-divider {
- display: flex;
- align-items: center;
- margin: 16px 0 8px;
- padding: 16px 16px 5px;
- border-top: 1px solid #3c3c3c;
-}
-
-.wpaw-config-divider span {
- font-size: 11px;
- font-weight: 600;
- color: #a7aaad;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.wpaw-meta-info {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 8px;
- gap: 8px;
-}
-
-.wpaw-meta-info span {
- font-size: 11px;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-meta-info span.good {
- color: #4ade80;
-}
-
-.wpaw-meta-info span.warning {
- color: #fbbf24;
-}
-
-.wpaw-meta-info .components-button {
- font-size: 11px;
- padding: 4px 8px;
-}
-
-.wpaw-tab-content.dark-theme textarea {
- background: #252830 !important;
- /* border: 1px solid #3c3c3c !important; */
- color: #fff !important;
- /* border-radius: 2px !important; */
- /* padding: 8px 10px !important; */
- width: 100%;
- min-height: 60px;
- resize: vertical;
-}
-
-.wpaw-tab-content.dark-theme textarea::placeholder {
- color: #4c4c4c;
-}
-
-/* SEO Audit Styles */
-.wpaw-seo-audit-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 12px;
-}
-
-.wpaw-seo-audit-header label {
- font-size: 11px;
- font-weight: 600;
- color: #a7aaad;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.wpaw-seo-audit-results {
- background: #252830;
- border-radius: 4px;
- padding: 12px;
-}
-
-.wpaw-seo-score {
- display: flex;
- align-items: baseline;
- justify-content: center;
- margin-bottom: 12px;
- padding: 8px;
- border-radius: 4px;
-}
-
-.wpaw-seo-score.good {
- background: rgba(74, 222, 128, 0.1);
-}
-
-.wpaw-seo-score.warning {
- background: rgba(251, 191, 36, 0.1);
-}
-
-.wpaw-seo-score.poor {
- background: rgba(248, 113, 113, 0.1);
-}
-
-.wpaw-seo-score .score-value {
- font-size: 28px;
- font-weight: 700;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-seo-score.good .score-value {
- color: #4ade80;
-}
-
-.wpaw-seo-score.warning .score-value {
- color: #fbbf24;
-}
-
-.wpaw-seo-score.poor .score-value {
- color: #f87171;
-}
-
-.wpaw-seo-score .score-label {
- font-size: 14px;
- color: #6c6c6c;
- margin-left: 2px;
-}
-
-.wpaw-seo-stats {
- display: flex;
- gap: 16px;
- margin-bottom: 12px;
- padding-bottom: 12px;
- border-bottom: 1px solid #3c3c3c;
- justify-content: space-around;
-}
-
-.wpaw-seo-stat {
- flex: 1;
- text-align: center;
-}
-
-.wpaw-seo-stat .stat-label {
- display: block;
- font-size: 10px;
- color: #6c6c6c;
- text-transform: uppercase;
- margin-bottom: 4px;
-}
-
-.wpaw-seo-stat .stat-value {
- display: block;
- font-size: 16px;
- font-weight: 600;
- color: #fff;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-seo-checks {
- display: flex;
- flex-direction: column;
- gap: 6px;
-}
-
-.wpaw-seo-check {
- display: flex;
- align-items: center;
- gap: 8px;
- font-size: 12px;
-}
-
-.wpaw-seo-check .check-icon {
- width: 16px;
- height: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- font-size: 10px;
-}
-
-.wpaw-seo-check.passed .check-icon {
- background: rgba(74, 222, 128, 0.2);
- color: #4ade80;
-}
-
-.wpaw-seo-check.failed .check-icon {
- background: rgba(248, 113, 113, 0.2);
- color: #f87171;
-}
-
-.wpaw-seo-check .check-label {
- flex: 1;
- color: #a7aaad;
- min-width: 0;
-}
-
-.wpaw-seo-fix-button.components-button.is-secondary.is-small {
- border-color: rgba(96, 165, 250, 0.72);
- box-shadow: none !important;
- color: #bfdbfe;
- flex-shrink: 0;
- height: 24px;
- min-width: 44px;
- padding: 0 8px;
-}
-
-.wpaw-seo-fix-button.components-button.is-secondary.is-small:hover:not(
- :disabled
- ),
-.wpaw-seo-fix-button.components-button.is-secondary.is-small:focus:not(
- :disabled
- ) {
- border-color: #60a5fa;
- color: #eff6ff;
-}
-
-.wpaw-seo-fix-button.components-button.is-secondary.is-small.is-fixing {
- border-color: #fbbf24;
- color: #fde68a;
-}
-
-.wpaw-meta-info > button.components-button.is-secondary.is-small {
- outline: unset !important;
- color: #fbbf24;
- border: 1px solid #fbbf24;
- box-shadow: unset !important;
-}
-
-/* SEO Tab Styles */
-.wpaw-seo-tab {
- padding: 0;
-}
-
-.wpaw-seo-header {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 16px;
- border-bottom: 1px solid #3c3c3c;
- background: #1a1a20;
-}
-
-.wpaw-seo-header h3 {
- margin: 0;
- font-size: 14px;
- font-weight: 600;
- color: #fff;
- flex: 1;
-}
-
-.wpaw-back-btn {
- background: none;
- border: 1px solid #4c4c4c;
- color: #a7aaad;
- padding: 6px 12px;
- border-radius: 4px;
- cursor: pointer;
- font-size: 12px;
- transition: all 0.2s;
-}
-
-.wpaw-back-btn:hover {
- background: #3c3c3c;
- color: #fff;
-}
-
-.wpaw-seo-section {
- padding: 16px;
- border-bottom: 1px solid #2a2a30;
-}
-
-.wpaw-seo-section h4 {
- margin: 0 0 12px 0;
- font-size: 12px;
- font-weight: 600;
- color: #a7aaad;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.wpaw-seo-field {
- margin-bottom: 8px;
-}
-
-.wpaw-seo-field input,
-.wpaw-seo-field textarea {
- width: 100%;
- background: #252830;
- border: 1px solid #3c3c3c;
- color: #fff;
- padding: 10px 12px;
- border-radius: 4px;
- font-size: 14px;
-}
-
-.wpaw-seo-field input:focus,
-.wpaw-seo-field textarea:focus {
- outline: none;
- border-color: #6366f1;
-}
-
-.wpaw-char-count {
- display: block;
- font-size: 11px;
- color: #6c6c6c;
- text-align: right;
- margin-top: 4px;
-}
-
-.wpaw-seo-preview {
- background: #252830;
- border: 1px solid #3c3c3c;
- border-radius: 4px;
- padding: 16px;
-}
-
-.wpaw-seo-preview-title {
- color: #8ab4f8;
- font-size: 18px;
- font-weight: 400;
- line-height: 1.3;
- margin-bottom: 4px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.wpaw-seo-preview-url {
- color: #bdc1c6;
- font-size: 14px;
- margin-bottom: 8px;
-}
-
-.wpaw-seo-preview-desc {
- color: #a7aaad;
- font-size: 14px;
- line-height: 1.4;
-}
-
-.wpaw-seo-stats {
- display: flex;
- gap: 16px;
- flex-wrap: wrap;
-}
-
-.wpaw-stat-item {
- display: flex;
- flex-direction: column;
- min-width: 80px;
-}
-
-.wpaw-stat-label {
- font-size: 11px;
- color: #6c6c6c;
- text-transform: uppercase;
- margin-bottom: 4px;
-}
-
-.wpaw-stat-value {
- font-size: 18px;
- font-weight: 600;
- color: #fff;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-seo-actions {
- padding: 16px;
- display: flex;
- gap: 8px;
- flex-wrap: wrap;
-}
-
-.wpaw-seo-actions .components-button {
- flex: 1;
- min-width: 140px;
-}
-
-/* SEO Audit Results (in SEO tab) */
-.wpaw-seo-audit-results {
- margin: 16px;
- padding: 16px;
- background: #252830;
- border-radius: 4px;
-}
-
-.wpaw-seo-audit-results h4 {
- margin: 0 0 12px 0;
- font-size: 13px;
- font-weight: 600;
- color: #fff;
-}
-
-.wpaw-audit-score {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 12px;
- background: #1a1a20;
- border-radius: 4px;
- margin-bottom: 12px;
-}
-
-.wpaw-score-label {
- font-size: 12px;
- color: #a7aaad;
-}
-
-.wpaw-score-value {
- font-size: 16px;
- font-weight: 600;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-score-value.good {
- color: #4ade80;
-}
-
-.wpaw-score-value.warning {
- color: #fbbf24;
-}
-
-.wpaw-score-value.bad {
- color: #f87171;
-}
-
-.wpaw-audit-checks {
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-.wpaw-issue-item {
- display: flex;
- align-items: flex-start;
- gap: 10px;
- padding: 10px;
- background: #1a1a20;
- border-radius: 4px;
-}
-
-.wpaw-issue-item.good {
- border-left: 3px solid #4ade80;
-}
-
-.wpaw-issue-item.error,
-.wpaw-issue-item.failed {
- border-left: 3px solid #f87171;
-}
-
-.wpaw-issue-item.warning {
- border-left: 3px solid #fbbf24;
-}
-
-.wpaw-issue-severity {
- width: 20px;
- height: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- font-size: 12px;
- flex-shrink: 0;
-}
-
-.wpaw-issue-item.good .wpaw-issue-severity {
- background: rgba(74, 222, 128, 0.2);
- color: #4ade80;
-}
-
-.wpaw-issue-item.error .wpaw-issue-severity,
-.wpaw-issue-item.failed .wpaw-issue-severity {
- background: rgba(248, 113, 113, 0.2);
- color: #f87171;
-}
-
-.wpaw-issue-item.warning .wpaw-issue-severity {
- background: rgba(251, 191, 36, 0.2);
- color: #fbbf24;
-}
-
-.wpaw-check-details {
- display: flex;
- flex-direction: column;
- gap: 2px;
-}
-
-.wpaw-check-name {
- font-size: 13px;
- font-weight: 500;
- color: #fff;
-}
-
-.wpaw-check-message {
- font-size: 12px;
- color: #a7aaad;
-}
-
-.wpaw-seo-audit-header .components-button.is-secondary.is-small {
- outline: unset !important;
- color: #4ade80;
- border: 1px solid #4ade80;
- box-shadow: unset !important;
-}
-
-.wpaw-spinning-icon svg {
- animation: wpaw-spin 1s linear infinite;
-}
-
-@keyframes wpaw-spin {
- from {
- transform: rotate(0deg);
- }
-
- to {
- transform: rotate(360deg);
- }
-}
-
-/* ===========================
- WRITING MODE EMPTY STATE
- =========================== */
-.wpaw-writing-empty-state {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 1;
- padding: 2rem;
- margin: 1rem 0;
- font-family: ui-monospace, monospace;
-}
-
-.wpaw-empty-state-content {
- text-align: center;
- max-width: 400px;
-}
-
-.wpaw-empty-state-icon {
- font-size: 3rem;
- display: block;
- margin-bottom: 1rem;
- opacity: 0.8;
-}
-
-.wpaw-empty-state-content h3 {
- margin: 2rem 0 0.5rem 0;
- font-size: 1.5rem;
- color: #135e96;
- font-weight: 600;
-}
-
-.wpaw-empty-state-content p {
- color: #666;
- margin: 0.5rem 0;
- line-height: 1.5;
- font-size: 0.95rem;
-}
-
-.wpaw-empty-state-button {
- margin: 1.5rem 0 1rem 0 !important;
- font-size: 1rem !important;
-}
-
-.wpaw-empty-state-hint {
- font-size: 0.9rem !important;
- margin-top: 1rem !important;
- color: #888 !important;
-}
-
-.wpaw-sessions-list {
- display: flex;
- flex-direction: column;
- gap: 8px;
- margin: 1.5rem 0;
- max-height: 300px;
- overflow-y: auto;
-}
-
-.wpaw-new-chat-btn {
- margin-top: 1rem !important;
-}
-
-.wpaw-writing-empty-state .wpaw-session-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 16px;
- background: #f0f6fc;
- border: 1px solid #d0d7e2;
- border-radius: 6px;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.wpaw-writing-empty-state .wpaw-session-item:hover {
- background: #e8f0fa;
- border-color: #2271b1;
-}
-
-.wpaw-writing-empty-state .wpaw-session-info {
- display: flex;
- flex-direction: column;
- gap: 4px;
- overflow: hidden;
-}
-
-.wpaw-writing-empty-state .wpaw-session-title {
- font-size: 14px;
- color: #1d2327;
- font-weight: 500;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.wpaw-writing-empty-state .wpaw-session-meta {
- font-size: 12px;
- color: #646970;
-}
-
-.wpaw-writing-empty-state .wpaw-session-delete {
- background: transparent;
- border: none;
- color: #a7aaad;
- font-size: 20px;
- cursor: pointer;
- padding: 4px 8px;
- line-height: 1;
- border-radius: 4px;
- transition: all 0.2s;
-}
-
-.wpaw-writing-empty-state .wpaw-session-delete:hover {
- color: #d63638;
- background: #f6f7f7;
-}
-
-.wpaw-link-button {
- background: none;
- border: none;
- color: #2271b1;
- text-decoration: underline;
- cursor: pointer;
- padding: 0;
- font: inherit;
- font-size: inherit;
-}
-
-.wpaw-link-button:hover {
- color: #135e96;
-}
-
-/* ===========================
- CONTEXT INDICATOR
- =========================== */
-.wpaw-context-indicator {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0.25rem 1rem;
- font-family: ui-monospace, monospace;
- font-size: 11px;
- background: rgba(0, 0, 0, 0.1);
-}
-
-.wpaw-context-info {
- display: flex;
- gap: 1rem;
- align-items: center;
-}
-
-/* .wpaw-context-count {
- color: #0066cc;
- font-weight: 500;
-}
-
-.wpaw-context-tokens {
- color: #a7aaad;
-}
-
-.wpaw-context-cost {
- color: #a7aaad;
- font-weight: 600;
-} */
-
-.wpaw-context-count,
-.wpaw-context-tokens,
-.wpaw-context-cost {
- color: #a7aaad;
-}
-
-.wpaw-context-toggle {
- background: none;
- border: none;
- color: #a7aaad;
- cursor: pointer;
- padding: 0.25rem 0.5rem;
- border-radius: 4px;
- font-size: 0.85rem;
- transition: background-color 0.2s;
-}
-
-.wpaw-context-toggle:hover {
- background: rgba(0, 102, 204, 0.1);
-}
-
-.wpaw-command-input-wrapper.expanded {
- transition: min-height 0.3s ease;
-}
-
-.wpaw-command-input-wrapper.expanded textarea {
- transition: min-height 0.3s ease;
-}
-
-/* ===========================
- FOCUS KEYWORD BAR
- =========================== */
-.wpaw-focus-keyword-bar {
- display: flex;
- align-items: center;
- padding: 6px 10px;
- background: rgba(0, 0, 0, 0.15);
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
- font-size: 12px;
-}
-
-.wpaw-focus-keyword-bar.wpaw-compact {
- gap: 8px;
- justify-content: space-between;
-}
-
-.wpaw-focus-keyword-bar.wpaw-expanded {
- flex-direction: column;
- align-items: stretch;
- gap: 10px;
- padding: 12px;
-}
-
-.wpaw-fk-left {
- display: flex;
- align-items: center;
- gap: 6px;
- flex: 1;
- min-width: 0;
-}
-
-.wpaw-fk-icon {
- font-size: 14px;
- flex-shrink: 0;
-}
-
-.wpaw-fk-select,
-.wpaw-fk-select-full {
- background: rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- color: #fff;
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 12px;
- cursor: pointer;
- transition:
- border-color 0.2s,
- background 0.2s;
-}
-
-.wpaw-fk-select {
- flex: 1;
- min-width: 0;
- max-width: 180px;
-}
-
-.wpaw-fk-input {
- flex: 1;
- min-width: 0;
- background: rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- color: #fff;
- padding: 6px 10px;
- border-radius: 4px;
- font-size: 12px;
- transition:
- border-color 0.2s,
- background 0.2s;
-}
-
-.wpaw-fk-input:focus {
- border-color: #007cba;
- outline: none;
- background: rgba(255, 255, 255, 0.15);
-}
-
-.wpaw-fk-input::placeholder {
- color: #888;
-}
-
-.wpaw-fk-select-full {
- width: 100%;
-}
-
-.wpaw-fk-custom-input {
- width: 100%;
- background: rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- color: #fff;
- padding: 10px 12px;
- border-radius: 6px;
- font-size: 14px;
- transition:
- border-color 0.2s,
- background 0.2s;
-}
-
-.wpaw-fk-custom-input:focus {
- border-color: #007cba;
- outline: none;
- background: rgba(255, 255, 255, 0.15);
-}
-
-.wpaw-fk-custom-input::placeholder {
- color: #888;
-}
-
-.wpaw-fk-select:focus,
-.wpaw-fk-select-full:focus {
- border-color: #007cba;
- outline: none;
- background: rgba(255, 255, 255, 0.15);
-}
-
-.wpaw-fk-select:disabled {
- opacity: 0.6;
- cursor: not-allowed;
-}
-
-.wpaw-fk-select option,
-.wpaw-fk-select-full option {
- background: #1e1e1e;
- color: #fff;
-}
-
-.wpaw-fk-cost {
- color: #a7aaad;
- font-size: 11px;
- font-family: ui-monospace, monospace;
- flex-shrink: 0;
-}
-
-.wpaw-fk-expand,
-.wpaw-fk-collapse {
- background: transparent;
- border: none;
- color: #a7aaad;
- cursor: pointer;
- padding: 4px 6px;
- border-radius: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
- transition:
- background 0.2s,
- color 0.2s;
-}
-
-.wpaw-fk-expand:hover,
-.wpaw-fk-collapse:hover {
- background: rgba(255, 255, 255, 0.1);
- color: #fff;
-}
-
-.wpaw-fk-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-weight: 600;
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: #a7aaad;
-}
-
-.wpaw-fk-main-input {
- width: 100%;
-}
-
-.wpaw-fk-custom-input {
- width: 100%;
- background: rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.3);
- color: #fff;
- padding: 8px 12px;
- border-radius: 4px;
- font-size: 13px;
-}
-
-.wpaw-fk-custom-input:focus {
- border-color: #007cba;
- outline: none;
- background: rgba(255, 255, 255, 0.15);
-}
-
-.wpaw-fk-custom-input::placeholder {
- color: #a7aaad;
-}
-
-.wpaw-fk-suggestions {
- background: rgba(0, 0, 0, 0.2);
- border-radius: 6px;
- padding: 8px;
-}
-
-.wpaw-fk-suggestions-label {
- font-size: 11px;
- color: #a7aaad;
- margin-bottom: 6px;
-}
-
-.wpaw-fk-suggestion-item {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 6px 8px;
- border-radius: 4px;
- cursor: pointer;
- transition: background 0.2s;
-}
-
-.wpaw-fk-suggestion-item:hover {
- background: rgba(255, 255, 255, 0.1);
-}
-
-.wpaw-fk-suggestion-item.selected {
- background: rgba(0, 124, 186, 0.2);
-}
-
-.wpaw-fk-radio {
- color: #007cba;
- font-size: 10px;
- flex-shrink: 0;
-}
-
-.wpaw-fk-suggestion-text {
- flex: 1;
- color: #fff;
- font-size: 12px;
-}
-
-.wpaw-fk-suggestion-source {
- color: #666;
- font-size: 10px;
- flex-shrink: 0;
-}
-
-.wpaw-fk-stats {
- display: flex;
- gap: 8px;
- font-size: 11px;
- color: #a7aaad;
- font-family: ui-monospace, monospace;
- padding-top: 8px;
- border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.wpaw-fk-divider {
- color: rgba(255, 255, 255, 0.2);
-}
-
-/* ===========================
- WELCOME SCREEN
- =========================== */
-.wpaw-welcome-screen {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 2rem 1.5rem;
- text-align: center;
- min-height: 400px;
- animation: fadeInUp 0.3s ease-out;
-}
-
-.wpaw-welcome-content {
- max-width: 320px;
- width: 100%;
-}
-
-.wpaw-welcome-icon {
- display: block;
- color: #2271b1;
-}
-
-.wpaw-welcome-icon svg {
- width: 64px;
- height: 64px;
-}
-
-.wpaw-welcome-title {
- margin: 0 0 0.5rem 0;
- font-size: 1.25rem;
- font-weight: 600;
- color: #fff;
-}
-
-.wpaw-welcome-subtitle {
- margin: 0 0 1.5rem 0;
- font-size: 0.95rem;
- color: #a7aaad;
-}
-
-.wpaw-welcome-input {
- width: 100%;
- padding: 12px 16px;
- background: rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- border-radius: 8px;
- color: #fff;
- font-size: 14px;
- margin-bottom: 1rem;
- box-sizing: border-box;
- transition:
- border-color 0.2s,
- background 0.2s;
-}
-
-.wpaw-welcome-input:focus {
- outline: none;
- border-color: #2271b1;
- background: rgba(255, 255, 255, 0.15);
-}
-
-.wpaw-welcome-input::placeholder {
- color: #888;
-}
-
-.wpaw-welcome-pills {
- display: flex;
- gap: 8px;
- margin-bottom: 1.5rem;
-}
-
-.wpaw-welcome-pills button {
- text-align: center;
- display: block;
-}
-
-.wpaw-welcome-pill {
- flex: 1;
- padding: 10px 12px;
- background: rgba(255, 255, 255, 0.08);
- border: 1px solid rgba(255, 255, 255, 0.15);
- border-radius: 8px;
- color: #a7aaad;
- font-size: 13px;
- cursor: pointer;
- transition: all 0.2s;
- display: flex;
- justify-content: space-between;
-}
-
-.wpaw-welcome-pill:hover {
- background: rgba(255, 255, 255, 0.12);
- border-color: rgba(255, 255, 255, 0.25);
- color: #fff;
-}
-
-.wpaw-welcome-pill.active {
- background: rgba(34, 113, 177, 0.2);
- border-color: #2271b1;
- color: #2271b1;
-}
-
-.wpaw-session-list {
- max-height: 35vh;
- overflow-y: auto;
- padding-right: 2px;
- margin-bottom: 8px;
-}
-
-.wpaw-session-open-btn {
- display: block;
- min-width: 0;
- padding: 0;
-}
-
-.wpaw-session-open-btn:disabled {
- opacity: 0.65;
-}
-
-.wpaw-welcome-start-btn {
- width: 100%;
- padding: 12px 24px !important;
- font-size: 14px !important;
- font-weight: 600 !important;
-}
-
-/* ===========================
- SESSIONS LIST VIEW
- =========================== */
-.wpaw-sessions-list-view {
- display: flex;
- flex-direction: column;
- flex: 1;
- padding: 1rem;
- overflow: hidden;
-}
-
-.wpaw-view-loading {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 1;
- color: #a7aaad;
- font-size: 14px;
- padding: 2rem;
-}
-
-.wpaw-sessions-header-bar {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 1rem;
- padding-bottom: 0.75rem;
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.wpaw-sessions-title {
- font-size: 14px;
- font-weight: 600;
- color: #fff;
- margin: 0;
-}
-
-.wpaw-new-conversation-btn {
- font-size: 12px !important;
-}
-
-.wpaw-sessions-list {
- flex: 1;
- overflow-y: auto;
-}
-
-.wpaw-no-sessions {
- text-align: center;
- color: #a7aaad;
- padding: 2rem;
- font-size: 13px;
-}
-
-/* ===========================
- UNCOMPLETED SESSIONS PANEL
- =========================== */
-.wpaw-uncompleted-sessions {
- margin-top: 2rem;
- width: 100%;
- text-align: left;
-}
-
-.wpaw-sessions-header {
- font-size: 12px;
- color: #a7aaad;
- margin-bottom: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.wpaw-session-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px 12px;
- background: rgba(255, 255, 255, 0.05);
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 6px;
- margin-bottom: 6px;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.wpaw-session-item:hover {
- background: rgba(255, 255, 255, 0.1);
- border-color: rgba(255, 255, 255, 0.2);
-}
-
-.wpaw-session-info {
- display: flex;
- flex-direction: column;
- gap: 2px;
- overflow: hidden;
-}
-
-.wpaw-session-title {
- font-size: 13px;
- color: #fff;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.wpaw-session-meta {
- font-size: 11px;
- color: #a7aaad;
-}
-
-.wpaw-session-delete {
- background: transparent;
- border: none;
- color: #72777a;
- font-size: 18px;
- cursor: pointer;
- padding: 0 4px;
- line-height: 1;
- transition: color 0.2s;
-}
-
-.wpaw-session-delete:hover {
- color: #d63638;
-}
-
-/* ===========================
- CONTEXTUAL ACTION CARDS
- =========================== */
-.wpaw-contextual-action {
- display: flex;
- gap: 1rem;
- padding: 1rem;
- background: rgb(255 255 255 / 10%);
- border: 2px dashed rgba(255 255 255 / 25%);
- border-radius: 8px;
- margin: 1rem 0;
- color: white;
-}
-
-.wpaw-action-icon {
- font-size: 2rem;
- line-height: 1;
- flex-shrink: 0;
-}
-
-.wpaw-action-content {
- flex: 1;
-}
-
-.wpaw-action-content h4 {
- margin: 0 0 0.25rem 0;
- font-weight: 600;
- color: white;
-}
-
-.wpaw-action-content p {
- margin: 0 0 0.75rem 0;
- color: rgba(255, 255, 255, 0.9);
- line-height: 1.4;
-}
-
-.wpaw-action-content .components-button {
- background: white !important;
- color: #667eea !important;
- border: none !important;
- font-weight: 600 !important;
- padding: 0.5rem 1rem !important;
-}
-
-.wpaw-action-content .components-button:hover {
- background: #f0f0f0 !important;
- color: #5568d3 !important;
-}
-
-/* Variant for different intent types */
-.wpaw-contextual-action.intent-create-outline {
- background: linear-gradient(135deg, #2271b1 0%, #135e96 100%);
-}
-
-.wpaw-contextual-action.intent-start-writing {
- background: linear-gradient(135deg, #d63638 0%, #8a1e1e 100%);
-}
-
-.wpaw-contextual-action.intent-refine-content {
- background: linear-gradient(135deg, #2271b1 0%, #00a32a 100%);
-}
-
-/* ===========================
- INFO MESSAGE STYLES
- =========================== */
-.wpaw-ai-item[data-type="info"] {
- background: #e7f3ff;
- border-left: 4px solid #2271b1;
- padding: 0.75rem 1rem;
- margin: 0.5rem 0;
- border-radius: 4px;
-}
-
-.wpaw-ai-item[data-type="info"] .wpaw-ai-content {
- color: #1e1e1e;
- font-size: 0.9rem;
- line-height: 1.5;
-}
-
-/* ===========================
- SMOOTH TRANSITIONS
- =========================== */
-.wpaw-writing-empty-state,
-.wpaw-context-indicator,
-.wpaw-contextual-action {
- animation: fadeInUp 0.3s ease-out;
-}
-
-@keyframes fadeInUp {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
-
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-/* ===========================
- P2: TYPING ANIMATION
- =========================== */
-@keyframes wpaw-typewriter-cursor {
- 0%,
- 100% {
- border-color: transparent;
- }
-
- 50% {
- border-color: #a7aaad;
- }
-}
-
-.wpaw-typing-indicator {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- padding: 6px 12px;
- font-family: ui-monospace, monospace;
- font-size: 12px;
- color: #a7aaad;
-}
-
-.wpaw-typing-dots {
- display: inline-flex;
- gap: 3px;
-}
-
-.wpaw-typing-dots span {
- width: 5px;
- height: 5px;
- background: #a7aaad;
- border-radius: 50%;
- animation: wpaw-typing-bounce 1.2s infinite;
-}
-
-.wpaw-typing-dots span:nth-child(2) {
- animation-delay: 0.2s;
-}
-
-.wpaw-typing-dots span:nth-child(3) {
- animation-delay: 0.4s;
-}
-
-@keyframes wpaw-typing-bounce {
- 0%,
- 60%,
- 100% {
- transform: translateY(0);
- opacity: 0.4;
- }
-
- 30% {
- transform: translateY(-4px);
- opacity: 1;
- }
-}
-
-/* P3: KEYBOARD HINTS */
-.wpaw-keyboard-hints {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- padding: 6px 0 0;
- font-family: ui-monospace, monospace;
- font-size: 10px;
- color: #50575e;
-}
-
-.wpaw-kbd {
- display: inline-flex;
- align-items: center;
- gap: 4px;
-}
-
-.wpaw-kbd kbd {
- background: #2c2c2c;
- border: 1px solid #3c3c3c;
- border-radius: 2px;
- padding: 1px 4px;
- font-family: ui-monospace, monospace;
- font-size: 10px;
- color: #a7aaad;
-}
-
-/* ===================================
- PROACTIVE SUGGESTIONS UI
- =================================== */
-
-.wpaw-suggestions-banner {
- background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
- border-radius: 8px;
- margin: 8px 12px;
- padding: 12px;
- border: 1px solid rgba(255, 255, 255, 0.1);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.wpaw-suggestion-analyzing {
- display: flex;
- align-items: center;
- gap: 8px;
- color: #fff;
- font-size: 13px;
-}
-
-.wpaw-suggestion-icon {
- font-size: 16px;
- animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
- 0%,
- 100% {
- opacity: 1;
- }
- 50% {
- opacity: 0.5;
- }
-}
-
-.wpaw-suggestion-item {
- background: rgba(255, 255, 255, 0.08);
- border-radius: 6px;
- margin-bottom: 8px;
- padding: 10px;
- border-left: 3px solid #4caf50;
-}
-
-.wpaw-suggestion-item.wpaw-priority-high {
- border-left-color: #f44336;
-}
-
-.wpaw-suggestion-item.wpaw-priority-medium {
- border-left-color: #ff9800;
-}
-
-.wpaw-suggestion-item.wpaw-priority-low {
- border-left-color: #4caf50;
-}
-
-.wpaw-suggestion-header {
- display: flex;
- align-items: center;
- gap: 8px;
- margin-bottom: 6px;
-}
-
-.wpaw-suggestion-type-icon {
- font-size: 14px;
-}
-
-.wpaw-suggestion-location {
- font-size: 11px;
- color: #a8c8ea;
- flex: 1;
-}
-
-.wpaw-suggestion-priority {
- font-size: 9px;
- text-transform: uppercase;
- padding: 2px 6px;
- border-radius: 10px;
- background: rgba(255, 255, 255, 0.15);
- color: #fff;
-}
-
-.wpaw-suggestion-priority:empty {
- display: none;
-}
-
-.wpaw-suggestion-content {
- margin-bottom: 8px;
-}
-
-.wpaw-suggestion-issue {
- font-size: 12px;
- color: #e0e0e0;
- margin: 0 0 4px 0;
-}
-
-.wpaw-suggestion-text {
- font-size: 12px;
- color: #fff;
- margin: 0;
- font-style: italic;
-}
-
-.wpaw-suggestion-actions {
- display: flex;
- gap: 8px;
-}
-
-.wpaw-suggestion-actions .wpaw-btn {
- flex: 1;
- padding: 6px 12px;
- border: none;
- border-radius: 4px;
- font-size: 11px;
- cursor: pointer;
- transition: opacity 0.2s;
-}
-
-.wpaw-suggestion-actions .wpaw-btn:hover {
- opacity: 0.85;
-}
-
-.wpaw-suggestion-actions .wpaw-btn-apply {
- background: #4caf50;
- color: #fff;
-}
-
-.wpaw-suggestion-actions .wpaw-btn-dismiss {
- background: rgba(255, 255, 255, 0.15);
- color: #fff;
-}
-
-.wpaw-suggestion-dismiss-all {
- width: 100%;
- padding: 8px;
- background: transparent;
- border: 1px solid rgba(255, 255, 255, 0.2);
- border-radius: 4px;
- color: #a8c8ea;
- font-size: 11px;
- cursor: pointer;
- margin-top: 4px;
-}
-
-.wpaw-suggestion-dismiss-all:hover {
- background: rgba(255, 255, 255, 0.05);
-}
-
-/* ===================================
- COMMAND PALETTE (Cmd+Shift+P)
- =================================== */
-
-.wpaw-command-palette-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.6);
- z-index: 100000;
- display: flex;
- align-items: flex-start;
- justify-content: center;
- padding-top: 15vh;
-}
-
-.wpaw-command-palette {
- width: 500px;
- max-width: 90vw;
- background: #2d2d2d;
- border-radius: 12px;
- box-shadow:
- 0 20px 60px rgba(0, 0, 0, 0.5),
- 0 0 0 1px rgba(255, 255, 255, 0.1);
- overflow: hidden;
- animation: wpaw-palette-slide-in 0.15s ease-out;
-}
-
-@keyframes wpaw-palette-slide-in {
- from {
- opacity: 0;
- transform: translateY(-20px) scale(0.95);
- }
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
-}
-
-.wpaw-command-palette-input {
- width: 100%;
- padding: 16px 20px;
- background: transparent;
- border: none;
- border-bottom: 1px solid #3c3c3c;
- color: #fff;
- font-size: 16px;
- font-family: inherit;
- outline: none;
-}
-
-.wpaw-command-palette-input::placeholder {
- color: #888;
-}
-
-.wpaw-command-palette-results {
- max-height: 400px;
- overflow-y: auto;
-}
-
-.wpaw-command-palette-item {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 12px 20px;
- cursor: pointer;
- transition: background 0.1s;
-}
-
-.wpaw-command-palette-item:hover,
-.wpaw-command-palette-item.selected {
- background: #3c3c3c;
-}
-
-.wpaw-command-palette-item.selected {
- background: #2271b1;
-}
-
-.wpaw-command-icon {
- font-size: 18px;
- width: 24px;
- text-align: center;
-}
-
-.wpaw-command-label {
- font-size: 14px;
- color: #fff;
-}
-
-/* Scrollbar for command palette */
-.wpaw-command-palette-results::-webkit-scrollbar {
- width: 8px;
-}
-
-.wpaw-command-palette-results::-webkit-scrollbar-track {
- background: #2d2d2d;
-}
-
-.wpaw-command-palette-results::-webkit-scrollbar-thumb {
- background: #4c4c4c;
- border-radius: 4px;
-}
-
-.wpaw-command-palette-results::-webkit-scrollbar-thumb:hover {
- background: #5c5c5c;
-}
-
-/* ===================================
- PER-ACTION ACCEPT/REJECT
- =================================== */
-
-.wpaw-edit-plan-item {
- padding: 10px 12px;
- background: rgba(255, 255, 255, 0.03);
- border-radius: 6px;
- margin-bottom: 8px;
- border-left: 3px solid #4a90d9;
-}
-
-.wpaw-edit-plan-item:last-child {
- margin-bottom: 0;
-}
-
-.wpaw-edit-plan-item-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 6px;
-}
-
-.wpaw-edit-plan-action-type {
- font-size: 12px;
- font-weight: 500;
- color: #fff;
-}
-
-.wpaw-edit-plan-item-buttons {
- display: flex;
- gap: 6px;
-}
-
-.wpaw-edit-plan-accept-btn,
-.wpaw-edit-plan-reject-btn {
- width: 28px;
- height: 28px;
- border-radius: 50%;
- border: none;
- cursor: pointer;
- font-size: 14px;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.15s;
-}
-
-.wpaw-edit-plan-accept-btn {
- background: #4caf50;
- color: #fff;
-}
-
-.wpaw-edit-plan-accept-btn:hover {
- background: #5cbf60;
- transform: scale(1.1);
-}
-
-.wpaw-edit-plan-reject-btn {
- background: rgba(255, 255, 255, 0.1);
- color: #a7aaad;
-}
-
-.wpaw-edit-plan-reject-btn:hover {
- background: #f44336;
- color: #fff;
-}
-
-.wpaw-edit-plan-item-before,
-.wpaw-edit-plan-item-after {
- font-size: 11px;
- color: #a7aaad;
- margin: 4px 0;
- padding: 4px 8px;
- background: rgba(0, 0, 0, 0.2);
- border-radius: 4px;
- font-family: monospace;
-}
-
-.wpaw-edit-plan-item-before {
- color: #ff8a80;
-}
-
-.wpaw-edit-plan-item-after {
- color: #69f0ae;
-}
-
-.wpaw-edit-plan-item-target {
- background: transparent;
- border: 1px solid rgba(255, 255, 255, 0.2);
- color: #a7aaad;
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 10px;
- cursor: pointer;
- margin-top: 4px;
-}
-
-.wpaw-edit-plan-item-target:hover:not(:disabled) {
- background: rgba(255, 255, 255, 0.1);
- color: #fff;
-}
-
-/* ===================================
- Block Outline Panel
- =================================== */
-
-.wpaw-outline-panel {
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- width: 280px;
- background: #1a1a2e;
- border-left: 1px solid #2a2a4a;
- display: flex;
- flex-direction: column;
- z-index: 100;
- box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
-}
-
-.wpaw-outline-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 12px 16px;
- background: #252545;
- border-bottom: 1px solid #2a2a4a;
-}
-
-.wpaw-outline-title {
- font-size: 13px;
- font-weight: 600;
- color: #e0e0e0;
-}
-
-.wpaw-outline-close {
- width: 24px;
- height: 24px;
- border: none;
- background: rgba(255, 255, 255, 0.1);
- color: #a7aaad;
- border-radius: 4px;
- cursor: pointer;
- font-size: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.wpaw-outline-close:hover {
- background: rgba(255, 255, 255, 0.2);
- color: #fff;
-}
-
-.wpaw-outline-content {
- flex: 1;
- overflow-y: auto;
- padding: 8px 0;
-}
-
-.wpaw-outline-empty {
- padding: 24px 16px;
- text-align: center;
- color: #6b6b8a;
- font-size: 12px;
-}
-
-.wpaw-outline-item {
- display: flex;
- align-items: center;
- padding: 8px 16px;
- cursor: pointer;
- transition: background 0.15s;
- border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-}
-
-.wpaw-outline-item:hover {
- background: rgba(255, 255, 255, 0.05);
-}
-
-.wpaw-outline-item.wpaw-outline-heading {
- background: rgba(76, 175, 80, 0.05);
-}
-
-.wpaw-outline-item.wpaw-outline-heading:hover {
- background: rgba(76, 175, 80, 0.1);
-}
-
-.wpaw-outline-item.wpaw-outline-heading[level="2"] {
- padding-left: 16px;
-}
-
-.wpaw-outline-item.wpaw-outline-heading[level="3"] {
- padding-left: 28px;
-}
-
-.wpaw-outline-item.wpaw-outline-heading[level="4"] {
- padding-left: 40px;
-}
-
-.wpaw-outline-icon {
- font-size: 14px;
- margin-right: 8px;
- flex-shrink: 0;
-}
-
-.wpaw-outline-label {
- font-size: 11px;
- color: #8888aa;
- font-weight: 500;
- min-width: 50px;
-}
-
-.wpaw-outline-text {
- font-size: 12px;
- color: #c0c0d0;
- margin-left: 8px;
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.wpaw-outline-count {
- font-size: 10px;
- color: #6b6b8a;
- margin-left: 8px;
-}
-
-.wpaw-outline-footer {
- padding: 10px 16px;
- background: #252545;
- border-top: 1px solid #2a2a4a;
- text-align: center;
-}
-
-.wpaw-outline-stats {
- font-size: 11px;
- color: #6b6b8a;
-}
-
-/* ===================================
- User Preferences Section in Config
- =================================== */
-
-.wpaw-config-divider {
- padding: 12px 0;
- margin: 16px 0;
- border-bottom: 1px solid #3c3c3c;
- font-size: 11px;
- font-weight: 600;
- color: #8888aa;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.wpaw-input {
- padding: 8px 12px;
- background: #2a2a4a;
- border: 1px solid #3c3c3c;
- border-radius: 4px;
- color: #e0e0e0;
- font-size: 13px;
-}
-
-.wpaw-input:focus {
- outline: none;
- border-color: #4a90d9;
-}
-
-/* ===================================
- Provider Transparency Display
- =================================== */
-
-.wpaw-provider-info {
- color: #6b7280;
- font-size: 11px;
- font-family: ui-monospace, monospace;
- margin-left: 4px;
-}
-
-.wpaw-provider-info:hover {
- color: #3b82f6;
-}
-
-.wpaw-provider-badge {
- margin-left: 2px;
- font-size: 10px;
-}
-
-.wpaw-provider-badge[title*="warning"],
-.wpaw-provider-badge[title*="Warning"],
-.wpaw-provider-info:has(.wpaw-fallback) {
- color: #f59e0b;
-}
-
-/* ===========================
- AUDIT FIXES: Mode Indicator Badge
- =========================== */
-
-/* Override WordPress editor-sidebar h3 shrinkage inside our panel */
-#wp-agentic-writer\:wp-agentic-writer .interface-complementary-area h3,
-#wp-agentic-writer\:wp-agentic-writer h3,
-.wpaw-response-content h3,
-.wpaw-messages-inner h3 {
- font-size: 15px !important;
- text-transform: none !important;
- font-weight: 700 !important;
- color: #e0e4ea !important;
- margin-bottom: 0.5em !important;
- letter-spacing: normal !important;
-}
-.wpaw-response-content h1 {
- font-size: 20px !important;
- color: #e8ecf2 !important;
- font-weight: bold;
- margin-top: 1.5rem;
- margin-bottom: 1rem;
-}
-
-.wpaw-response-content h2 {
- font-size: 17px !important;
- color: #e8ecf2 !important;
- font-weight: bold;
- margin-top: 1rem;
- margin-bottom: 1rem;
-}
-
-.wpaw-response-content h4,
-.wpaw-response-content h5,
-.wpaw-response-content h6 {
- font-size: 13px !important;
- color: #d0d5dd !important;
-}
-
-.wpaw-response-content table {
- border-collapse: collapse;
- width: 100%;
-}
-
-.wpaw-response-content table th,
-table td {
- border: 1px solid #dce0e8 !important;
- padding: 4px 6px;
-}
-
-.wpaw-mode-badge {
- display: inline-flex;
- align-items: center;
- gap: 5px;
- padding: 3px 10px;
- border-radius: 12px;
- font-size: 11px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.04em;
- margin-bottom: 8px;
-}
-
-.wpaw-mode-badge.mode-chat {
- background: rgba(96, 165, 250, 0.12);
- color: #60a5fa;
- border: 1px solid rgba(96, 165, 250, 0.25);
-}
-
-.wpaw-mode-badge.mode-planning {
- background: rgba(251, 191, 36, 0.12);
- color: #fbbf24;
- border: 1px solid rgba(251, 191, 36, 0.25);
-}
-
-.wpaw-mode-badge.mode-writing {
- background: rgba(74, 222, 128, 0.12);
- color: #4ade80;
- border: 1px solid rgba(74, 222, 128, 0.25);
-}
-
-/* ===========================
- AUDIT FIXES: Streaming Heartbeat
- =========================== */
-.wpaw-heartbeat-notice {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 8px 12px;
- margin: 8px 0;
- background: rgba(251, 191, 36, 0.08);
- border: 1px solid rgba(251, 191, 36, 0.2);
- border-radius: 8px;
- font-size: 12px;
- color: #fbbf24;
- animation: fadeIn 0.3s ease;
-}
-
-.wpaw-heartbeat-notice .wpaw-heartbeat-icon {
- animation: pulse-ring 2s infinite;
-}
-
-/* ===========================
- AUDIT FIXES: Slash Command Hint
- =========================== */
-.wpaw-input-hint {
- position: absolute;
- bottom: 100%;
- left: 12px;
- right: 12px;
- padding: 6px 10px;
- background: #252830;
- border: 1px solid #3d4450;
- border-bottom: none;
- border-radius: 8px 8px 0 0;
- font-size: 11px;
- color: #6b7a8d;
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.wpaw-input-hint kbd {
- background: #3d4450;
- color: #a0aec0;
- padding: 1px 5px;
- border-radius: 3px;
- font-size: 10px;
- font-family: inherit;
-}
-
-/* ===========================
- AUDIT FIXES: Provider Fallback Warning
- =========================== */
-.wpaw-provider-warning {
- display: flex;
- align-items: flex-start;
- gap: 8px;
- padding: 10px 12px;
- margin: 8px 0;
- background: rgba(251, 146, 60, 0.08);
- border: 1px solid rgba(251, 146, 60, 0.2);
- border-left: 3px solid #fb923c;
- border-radius: 8px;
- font-size: 12px;
- color: #fdba74;
- line-height: 1.5;
-}
-
-.wpaw-provider-warning a {
- color: #fb923c;
- text-decoration: underline;
-}
-
-/* ===========================
- AUDIT FIXES: DB Health Notice
- =========================== */
-.wpaw-health-notice {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 10px 12px;
- margin: 8px 0;
- background: rgba(220, 38, 38, 0.06);
- border: 1px solid rgba(220, 38, 38, 0.2);
- border-radius: 8px;
- font-size: 12px;
- color: #fca5a5;
-}
-
-.wpaw-health-notice a {
- color: #ef4444;
- text-decoration: underline;
-}
-
-/* ===========================
- AUDIT FIXES: Confirm Modal for Writing
- =========================== */
-.wpaw-write-confirm-overlay {
- position: absolute;
- inset: 0;
- z-index: 1200;
- background: rgba(10, 16, 27, 0.75);
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 16px;
- animation: fadeIn 0.2s ease;
-}
-
-.wpaw-write-confirm-modal {
- width: 100%;
- max-width: 380px;
- background: #1e2530;
- color: #e5e7eb;
- border: 1px solid #334155;
- border-radius: 12px;
- padding: 20px;
- box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
-}
-
-.wpaw-write-confirm-title {
- font-size: 15px;
- font-weight: 700;
- margin-bottom: 8px;
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.wpaw-write-confirm-body {
- font-size: 13px;
- line-height: 1.6;
- color: #94a3b8;
- margin-bottom: 16px;
-}
-
-.wpaw-write-confirm-actions {
- display: flex;
- justify-content: flex-end;
- gap: 8px;
-}
-
-/* ===========================
- AUDIT FIXES: Response content dark theme
- =========================== */
-.wpaw-response-content {
- line-height: 1.6;
- word-wrap: break-word;
- white-space: normal;
- color: #dce0e8;
-}
-
-.wpaw-response-content > * {
- padding: 1rem;
-}
-
-.wpaw-response-content p {
- margin: 0 0 8px;
-}
-
-.wpaw-response-content p:last-child {
- margin-bottom: 0;
-}
-
-/* Plan section title in dark theme */
-.wpaw-plan-section-title {
- font-weight: 600;
- margin-bottom: 4px;
- color: #e0e4ea;
-}
-
-.wpaw-plan-section-desc {
- color: #8b95a5;
- font-size: 13px;
- line-height: 1.5;
-}
-
-/* Config summary dark */
-.wpaw-plan-config-summary {
- margin-bottom: 12px;
- padding: 10px 12px;
- background: #161a20;
- border: 1px solid #2d3a4a;
- border-radius: 8px;
- font-size: 12px;
- line-height: 1.6;
-}
-
-.wpaw-config-summary-item {
- color: #9aa5b4;
- font-family:
- -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
- margin-bottom: 4px;
- font-size: 11.5px;
-}
-
-.wpaw-config-summary-item:last-child {
- margin-bottom: 0;
-}
diff --git a/assets/fonts/inter/Inter-Variable-Italic.woff2 b/assets/fonts/inter/Inter-Variable-Italic.woff2
new file mode 100644
index 0000000..b3530f3
Binary files /dev/null and b/assets/fonts/inter/Inter-Variable-Italic.woff2 differ
diff --git a/assets/fonts/inter/Inter-Variable.woff2 b/assets/fonts/inter/Inter-Variable.woff2
new file mode 100644
index 0000000..5a8d3e7
Binary files /dev/null and b/assets/fonts/inter/Inter-Variable.woff2 differ
diff --git a/assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2 b/assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2
new file mode 100644
index 0000000..81c5a21
Binary files /dev/null and b/assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2 differ
diff --git a/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2 b/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2
new file mode 100644
index 0000000..66c5467
Binary files /dev/null and b/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2 differ
diff --git a/assets/js/dist/sidebar.js b/assets/js/dist/sidebar.js
new file mode 100644
index 0000000..776a461
--- /dev/null
+++ b/assets/js/dist/sidebar.js
@@ -0,0 +1,62 @@
+(()=>{(function(s){let{registerPlugin:cr}=s.plugins,{PluginSidebarMoreMenuItem:lr}=s.editPost,{PluginSidebar:dr}=s.editPost,{Panel:ur,TextareaControl:es,TextControl:yn,CheckboxControl:zt,Button:me}=s.components,{dispatch:ie,select:V}=s.data,{RawHTML:gr}=s.element,kn=typeof wpAgenticWriter!="undefined"&&wpAgenticWriter.debug,K={log:(...C)=>{kn&&console.log("[WPAW]",...C)},error:(...C)=>console.error("[WPAW]",...C),info:(...C)=>{kn&&console.info("[WPAW]",...C)},warn:(...C)=>{kn&&console.warn("[WPAW]",...C)}},ts=s.element.createElement("img",{src:wpAgenticWriter.pluginUrl+"/assets/img/icon.svg",alt:"WP Agentic Writer",style:{width:"20px",height:"20px"}}),fr=({postId:C})=>{let ae=typeof wpAgenticWriter!="undefined"?wpAgenticWriter.settings:{},fe=(e,t="The AI request failed.")=>{let n=typeof e=="string"?e:(e==null?void 0:e.message)||t,r=String(n||t).replace(/^API error:\s*/i,"").trim(),o=r.toLowerCase(),a=(i,c,l,d)=>({title:i,detail:c,actionUrl:l||"",actionLabel:d||""});if(o.includes("no allowed providers are available")||o.includes("allowed providers")&&o.includes("selected model")){let i=ae!=null&&ae.openrouter_provider_slug&&ae.openrouter_provider_slug!=="auto"?` Pinned: ${ae.openrouter_provider_slug}.`:"";return a("Model unavailable from current provider",`The pinned provider routing doesn't support this model.${i} Change provider routing or select a compatible model.`,(ae==null?void 0:ae.settings_url)||"","Open Settings")}return r.includes("429")||o.includes("rate limit")?a("Rate limit exceeded","The AI provider is throttling requests. Wait a moment and try again."):r.includes("cURL error 28")||o.includes("operation timed out")||o.includes("timed out after")?a("Request timed out","The model took too long to respond. Try a faster model, reduce content length, or check your provider routing.",(ae==null?void 0:ae.settings_url)||"","Open Settings"):r.startsWith("HTTP 401")||o.includes("unauthorized")?a("API key rejected","The provider rejected your API key. Check your key in settings.",(ae==null?void 0:ae.settings_url)||"","Open Settings"):r.startsWith("HTTP 402")||o.includes("insufficient credits")?a("Insufficient credits","Your provider account has no remaining credits or quota."):o.includes("api key is not configured")||o.includes("no_api_key")?a("API key not configured","Add your OpenRouter API key in plugin settings to start using AI features.",(ae==null?void 0:ae.settings_url)||"","Configure API Key"):a(r||t,"")},[Le,et]=React.useState("chat"),[J,u]=React.useState([]),[tt,pe]=React.useState(""),[U,M]=React.useState(!1),[z,nt]=React.useState(""),[ft,ns]=React.useState([]),[mt,Ge]=React.useState(!1),[Ce,xe]=React.useState("chat"),qt=React.useRef(Math.random().toString(36).substring(2,10)+Date.now().toString(36)),[Kt,bn]=React.useState({locked:!1,lockedByOther:!1,holderTabId:""}),pt=React.useRef(null),wn=React.useMemo(()=>({article_length:"medium",language:"auto",tone:"",audience:"",experience_level:"general",include_images:!0,web_search:!!ae.web_search_enabled,default_mode:"chat",seo_focus_keyword:"",focus_keyword:"",seo_secondary_keywords:"",seo_meta_description:"",seo_enabled:!0}),[ae.web_search_enabled]),[I,Jt]=React.useState(wn),[Xt,ss]=React.useState(!1),[vn,rs]=React.useState(!1),[Sn,os]=React.useState(""),Gt=React.useRef(!1),_n=React.useRef(""),We=React.useRef(null),[te,he]=React.useState({session:0,today:0,monthlyUsed:0}),[Vt,as]=React.useState(ae.monthly_budget||600),[be,is]=React.useState(null),we=e=>{if(!e)return;e.session_id&&nt(e.session_id);let t=e.provider_metadata||e,n=t.provider||t.selected_provider||t.provider;n&&is({provider:n,model:t.model,fallbackUsed:t.fallback_used||t.fallbackUsed,warnings:t.warnings||[]})},[xt,cs]=React.useState(!1),[Oe,ls]=React.useState(!1),[At,Cn]=React.useState([]),Qt=React.useRef([]),ht=React.useRef([]),st=React.useRef([]),hr=25,[Yt,xn]=React.useState({isOpen:!1,blockCount:0,dontAskAgain:!1}),An=React.useRef(null),ds=React.useRef(!1),[Be,yr]=React.useState(null),[Ve,us]=React.useState(!1),[rt,gs]=React.useState(!1),[fs,Nn]=React.useState(""),[Zt,Nt]=React.useState(!1),[Te,In]=React.useState([]),[Ae,yt]=React.useState(0),[de,Ne]=React.useState([]),[en,ms]=React.useState("auto"),[kr,br]=React.useState("generation"),[Rn,ps]=React.useState(null),[It,Rt]=React.useState(null),[tn,Bn]=React.useState([]),Tn=React.useRef(null),Q=React.useRef(null),$n=React.useRef(null),nn=React.useRef({}),Qe=React.useRef(null),He=React.useRef({}),kt=React.useRef({}),En=React.useRef(null),Bt=React.useRef(null),Mn=React.useRef(null),ue=React.useRef(!1),Tt=React.useRef(null),$t=React.useRef(null),sn=React.useRef({type:"idle",status:"idle",label:""}),[Uo,ot]=React.useState(!1),[$e,wr]=React.useState({type:"idle",status:"idle",label:""}),[Ue,hs]=React.useState({status:"idle",current_section_index:0,sections_written:[],last_updated:null,plan_id:"",resume_token:""}),[vr,ys]=React.useState(!1),[Et,Sr]=React.useState({title:"",blockCount:0,selectedBlockLabel:"None selected",selectedBlockPreview:""}),[rn,_r]=React.useState(()=>{try{return window.localStorage.getItem("wpaw_agent_workspace_collapsed")==="1"}catch{return!1}}),Cr=()=>{_r(e=>{let t=!e;try{window.localStorage.setItem("wpaw_agent_workspace_collapsed",t?"1":"0")}catch{}return t})},[Mt,at]=React.useState(!1),[zo,ks]=React.useState(""),[it,bt]=React.useState([]),[Pn,on]=React.useState(0),[Pt,Lt]=React.useState(!1),[qo,xr]=React.useState(""),[ct,an]=React.useState([]),[Ln,Wn]=React.useState(0),[bs,On]=React.useState(!1),ye=React.useRef(null),ve=React.useRef(null),[ws,vs]=React.useState([]),[Ee,lt]=React.useState(""),[Ko,Ss]=React.useState(!1),[Jo,Ar]=React.useState(""),Ie=React.useRef(null),wt=React.useRef(""),De=React.useRef(!1),[dt,Ye]=React.useState(!0),[Dn,Nr]=React.useState(""),[Fn,_s]=React.useState("chat"),[qe,Cs]=React.useState([]),xs=10,[vt,As]=React.useState({restored:!1,summary:"",memories:[],preferences:[],systemMessage:""}),Ns=React.useRef(!1);React.useEffect(()=>{Ce==="writing"&&!U&&xe("chat")},[Ce,U]),React.useEffect(()=>{C&&(ss(!0),fetch(`${wpAgenticWriter.apiUrl}/post-config/${C}`,{headers:{"X-WP-Nonce":wpAgenticWriter.nonce}}).then(e=>e.ok?e.json():Promise.reject(e)).then(e=>{let t={...wn,...e};t.default_mode="chat",Jt(t),_n.current=JSON.stringify(t),Gt.current=!0}).catch(()=>{Gt.current=!0}).finally(()=>{ss(!1)}))},[C,wn]);let Is=React.useCallback(async e=>{if(C){rs(!0),os("");try{let t=await fetch(`${wpAgenticWriter.apiUrl}/post-config/${C}`,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({postConfig:e})});if(!t.ok){let r=await t.json();throw new Error(r.message||"Failed to save post configuration")}let n=await t.json();_n.current=JSON.stringify(n),Jt(r=>{let o={...r,...n};return JSON.stringify(r)===JSON.stringify(o)?r:o})}catch(t){os(t.message||"Failed to save post configuration")}finally{rs(!1)}}},[C]);React.useEffect(()=>{if(!(!Gt.current||Xt||JSON.stringify(I)===_n.current))return We.current&&clearTimeout(We.current),We.current=setTimeout(()=>{Is(I)},600),()=>{We.current&&clearTimeout(We.current)}},[I,Xt,Is]),React.useEffect(()=>{!ae.cost_tracking_enabled||!C||fetch(`${wpAgenticWriter.apiUrl}/cost-tracking/${C}`,{headers:{"X-WP-Nonce":wpAgenticWriter.nonce}}).then(e=>e.json()).then(e=>{var t,n,r,o;e&&typeof e.session=="number"&&he({session:e.session,today:((n=(t=e.today)==null?void 0:t.total)==null?void 0:n.cost)||0,monthlyUsed:((r=e.monthly)==null?void 0:r.used)||0}),(o=e==null?void 0:e.monthly)!=null&&o.budget&&as(e.monthly.budget)}).catch(()=>{})},[C]);let jn=(e={})=>({status:e.status||"idle",current_section_index:Number(e.current_section_index||0),sections_written:Array.isArray(e.sections_written)?e.sections_written:[],last_updated:e.last_updated||null,plan_id:e.plan_id||"",resume_token:e.resume_token||""}),Rs=React.useCallback(async e=>{if(!C)return;let t=jn(e);try{if(!(await fetch(`${wpAgenticWriter.apiUrl}/writing-state/${C}`,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify(t)})).ok)throw new Error("Failed to save writing state")}catch(n){K.warn("Writing state save failed:",n)}},[C]),Fe=React.useCallback(e=>{hs(t=>{let n=jn({...t,...e});return Rs(n),n})},[Rs]);React.useEffect(()=>{if(!C)return;let e=!1;return ys(!0),fetch(`${wpAgenticWriter.apiUrl}/writing-state/${C}`,{headers:{"X-WP-Nonce":wpAgenticWriter.nonce}}).then(t=>t.ok?t.json():Promise.reject(t)).then(t=>{e||hs(jn(t))}).catch(t=>{K.warn("Writing state load failed:",t)}).finally(()=>{e||ys(!1)}),()=>{e=!0}},[C]);let Hn=React.useRef(null),Un=React.useRef(null);React.useEffect(()=>{Hn.current&&Hn.current.scrollIntoView({behavior:"smooth"})},[J]);let Ir=/^(I'll|Writing|Now|Creating|Adding|Let me|I'll write|Saya|Saya akan|Sedang menulis|Sedang membuat|Menulis tentang|Membuat tentang|Thinking|Analyzing|Reviewing|Refining|Checking|Updating|Planning|Searching|Querying|Generated|Drafting|Reading|Context|Processing)/i,Bs=new Set(["active","starting","refining","checking","waiting","planning","plan_complete","writing","writing_section"]),Rr=new Set(["writing","writing_section"]),Y=e=>{for(let t=e.length-1;t>=0;t--)if(e[t].type==="timeline"&&Bs.has(e[t].status))return t;return-1},oe=e=>e.map(t=>t.type==="timeline"&&Bs.has(t.status)?{...t,status:"inactive"}:t),cn=e=>{u(t=>{let n=[...t],r=Y(n);return r===-1?n.push({role:"system",type:"timeline",status:"active",message:e,timestamp:new Date}):n[r]={...n[r],message:e},n})},zn=(e,t,n={})=>{let{deactivate:r=!0,extra:o={}}=n;u(a=>[...r?oe(a):a,{role:"system",type:"timeline",status:e,message:t,timestamp:new Date,...o}])},qn=e=>{let t={type:(e==null?void 0:e.type)||"idle",status:(e==null?void 0:e.status)||"idle",label:(e==null?void 0:e.label)||""};sn.current=t,wr(t)},Me=(e,t)=>{ue.current=!1;let n=new AbortController;return Tt.current=n,$t.current=null,ot(!1),qn({type:e,status:"running",label:t}),n},ke=(e="")=>{let t=sn.current||{};e&&t.type&&t.type!==e||(Tt.current=null,$t.current=null,qn({type:"idle",status:"idle",label:""}))},Br=()=>{let e=sn.current||{};qn({type:e.type||"unknown",status:"stopping",label:e.label||"operation"}),u(t=>{let n=[...t],r=Y(n);return r!==-1&&(n[r]={...n[r],status:"stopping",message:`Stopping ${e.label||"operation"}...`,timestamp:new Date}),n})},Se=e=>(e==null?void 0:e.name)==="AbortError"||/aborted|abort/i.test(String((e==null?void 0:e.message)||"")),Ke=e=>($t.current=e,e),Tr=React.useCallback(e=>ds.current?Promise.resolve(!0):new Promise(t=>{An.current=t,xn({isOpen:!0,blockCount:Number(e)||0,dontAskAgain:!1})}),[]),Ts=React.useCallback(e=>{let t=An.current;An.current=null,xn(n=>({...n,isOpen:!1})),t&&t(!!e)},[]),$r=(e="AI Operation")=>{let n=V("core/block-editor").getBlocks().map(r=>s.blocks.serialize(r)).join(`
+`);return{label:e,timestamp:new Date,blocks:n}},Kn=(e="AI Operation")=>{let t=$r(e);Cs(n=>{let r=[...n,t];return r.length>xs?r.slice(-xs):r})},$s=()=>{if(qe.length===0)return;let e=qe[qe.length-1],{resetBlocks:t}=ie("core/block-editor");try{let n=s.blocks.parse(e.blocks);t(n),Cs(r=>r.slice(0,-1)),u(r=>[...r,{role:"system",type:"timeline",status:"complete",message:`Undid: ${e.label}`,timestamp:new Date}])}catch(n){K.error("Failed to undo AI operation:",n),u(r=>[...r,{role:"system",type:"error",content:"Failed to undo operation: "+n.message}])}};React.useEffect(()=>{let e=Y(J),t=e!==-1?J[e]:null,n=!!(U&&t&&Rr.has(t.status));n&&!xt?(ie("core/editor").lockPostSaving("wpaw-writing"),document.body.classList.add("wpaw-editor-locked"),cs(!0)):!n&&xt&&(ie("core/editor").unlockPostSaving("wpaw-writing"),document.body.classList.remove("wpaw-editor-locked"),cs(!1))},[J,U,xt]),React.useEffect(()=>{Oe?(ie("core/editor").lockPostSaving("wpaw-refining"),document.body.classList.add("wpaw-refining-locked")):(ie("core/editor").unlockPostSaving("wpaw-refining"),document.body.classList.remove("wpaw-refining-locked"))},[Oe]),React.useEffect(()=>{let e=ie("core/block-editor");if(!(!e||typeof e.setBlockEditingMode!="function")){if(Oe){let t=V("core/block-editor").getBlocks(),n=[],r=o=>{o.forEach(a=>{a!=null&&a.clientId&&(n.push(a.clientId),Array.isArray(a.innerBlocks)&&a.innerBlocks.length>0&&r(a.innerBlocks))})};r(t),st.current=n,n.forEach(o=>e.setBlockEditingMode(o,"disabled"))}else st.current.length>0&&(st.current.forEach(t=>e.setBlockEditingMode(t,"default")),st.current=[]);return()=>{st.current.length>0&&(st.current.forEach(t=>e.setBlockEditingMode(t,"default")),st.current=[])}}},[Oe,J]),React.useEffect(()=>((Qt.current||[]).forEach(t=>{let n=document.querySelector(`[data-block="${t}"]`);n&&n.classList.remove("wpaw-block-refining")}),Oe&&Array.isArray(At)?(At.forEach(t=>{let n=document.querySelector(`[data-block="${t}"]`);n&&n.classList.add("wpaw-block-refining")}),Qt.current=[...At]):Qt.current=[],()=>{(Qt.current||[]).forEach(n=>{let r=document.querySelector(`[data-block="${n}"]`);r&&r.classList.remove("wpaw-block-refining")})}),[Oe,At,J]),React.useEffect(()=>{if(!Oe)return;let e=r=>!r||!(r instanceof Element)||r.closest(".wpaw-sidebar, .wpaw-command-area, .wpaw-messages")?!1:!!r.closest(".interface-interface-skeleton__content, .editor-styles-wrapper, .block-editor-writing-flow"),t=r=>{if(!e(r.target)||r.metaKey||r.ctrlKey||r.altKey)return;let o=new Set(["Enter","Backspace","Delete","Tab"]);(typeof r.key=="string"&&r.key.length===1||o.has(r.key))&&(r.preventDefault(),r.stopPropagation())},n=r=>{e(r.target)&&(r.preventDefault(),r.stopPropagation())};return document.addEventListener("keydown",t,!0),document.addEventListener("paste",n,!0),document.addEventListener("drop",n,!0),document.addEventListener("cut",n,!0),()=>{document.removeEventListener("keydown",t,!0),document.removeEventListener("paste",n,!0),document.removeEventListener("drop",n,!0),document.removeEventListener("cut",n,!0)}},[Oe]),React.useEffect(()=>{if(Oe){let e=Array.from(document.querySelectorAll('.editor-styles-wrapper [contenteditable="true"]'));ht.current=e.map(t=>({node:t,prev:t.getAttribute("contenteditable")})),ht.current.forEach(({node:t})=>{t.setAttribute("contenteditable","false")})}else(ht.current||[]).forEach(({node:e,prev:t})=>{e&&(t===null?e.removeAttribute("contenteditable"):e.setAttribute("contenteditable",t))}),ht.current=[];return()=>{(ht.current||[]).forEach(({node:e,prev:t})=>{e&&(t===null?e.removeAttribute("contenteditable"):e.setAttribute("contenteditable",t))}),ht.current=[]}},[Oe,J]);let Es=e=>e==null?"":typeof e=="string"||typeof e=="number"?String(e):"",ge=(e,t)=>{Jt(n=>({...n,[e]:t}))},Er=(e={})=>{let t={...I};if(e.config_language){let n=e.config_language;n==="__custom__"&&e.config_language_custom&&(n=e.config_language_custom.toLowerCase().trim()),n&&n!=="__skipped__"&&(t.language=n)}if(e.config_all)try{let n=JSON.parse(e.config_all);n.web_search!==void 0&&(t.web_search=n.web_search),n.seo!==void 0&&(t.seo_enabled=n.seo),n.focus_keyword&&(t.focus_keyword=n.focus_keyword,t.seo_focus_keyword=n.focus_keyword),n.secondary_keywords&&(t.seo_secondary_keywords=n.secondary_keywords)}catch(n){K.error("Failed to merge config answers:",n)}return t},Je=e=>{lt(e),ge("focus_keyword",e),ge("seo_focus_keyword",e),Ss(!1),Ar("")},Xo=e=>{let t=e.target.value;t==="__custom__"?Ss(!0):Je(t)},Jn=e=>{if(!e||typeof e!="string")return[];let t=[],n=e.match(/(?:fokus|focus)\s+keyword\s+suggestion[s]?\s*:\s*([\s\S]*?)(?=\n\n|Pilih|$)/i);if(n){let o=n[1].match(/[-*]\s*["']?([^"'\n]+)["']?/g);o&&o.forEach(a=>{let i=a.replace(/^[-*]\s*["']?/,"").replace(/["']?$/,"").trim();i.length>2&&i.length<60&&t.push(i)})}if(t.length===0){let r=e.match(/(?:fokus|focus)\s+keyword\s+suggestion[s]?\s*:\s*["']?([^"'\n]+)["']?/i);if(r&&!r[1].includes("-")&&!r[1].includes("*")){let o=r[1].trim();o.length>2&&o.length<60&&t.push(o)}}return t},Go=e=>{let t=Jn(e);return t.length>0?t[0]:null},Mr=e=>{e&&vs(t=>t.includes(e)?t:[...t,e].slice(-5))},Ms=e=>{!e||!Array.isArray(e)||e.forEach(t=>Mr(t))};React.useEffect(()=>{I.focus_keyword&&!Ee?lt(I.focus_keyword):I.seo_focus_keyword&&!Ee&<(I.seo_focus_keyword)},[I.focus_keyword,I.seo_focus_keyword]),React.useEffect(()=>{(J.length>0||Q.current)&&Ye(!1)},[J.length]);let Ps=()=>{if(Dn.trim()){let e=Dn.trim();Je(e)}xe(Fn),Ye(!1),setTimeout(()=>{ye.current&&ye.current.focus()},100)},Ls=async()=>{if(Ve||!C)return;let e=Me("seo_audit","SEO audit");us(!0);try{let t=await fetch(`${wpAgenticWriter.apiUrl}/seo-audit/${C}`,{headers:{"X-WP-Nonce":wpAgenticWriter.nonce},signal:e.signal}),n=await t.json();if(!t.ok)throw new Error(n.message||"Failed to run SEO audit");yr(n),u(r=>{let o=[...r],a=Y(o);return a!==-1&&(o[a]={...o[a],status:"complete",message:"SEO audit complete.",completedAt:new Date}),o})}catch(t){if(Se(t)){u(n=>{let r=[...n],o=Y(r);return o!==-1&&(r[o]={...r[o],status:"stopped",message:"SEO audit stopped."}),r});return}K.error("SEO Audit error:",t),u(n=>[...n,{role:"assistant",content:`SEO Audit error: ${t.message}`,type:"error"}]),u(n=>{let r=[...n],o=Y(r);return o!==-1&&(r[o]={...r[o],status:"error",message:"SEO audit failed."}),r})}finally{us(!1),ke("seo_audit")}},Pr=e=>{let t=Ee||I.focus_keyword||I.seo_focus_keyword||"",n=I.language&&I.language!=="auto"?`Use ${I.language}.`:"Use the same language as the article.",r=(e==null?void 0:e.name)||"SEO audit issue",o=(e==null?void 0:e.message)||"",a=t?`Focus keyword: "${t}".`:"If a focus keyword is missing, ask the user to set one first.",i=String(r).toLowerCase();return i.includes("keyword in intro")?`Fix this SEO audit issue in the article introduction: ${o}. ${a} Add the focus keyword naturally in the first paragraph without sounding forced. ${n}`:i.includes("keyword density")?`Fix this SEO audit issue across the article: ${o}. ${a} Improve keyword usage naturally, avoid stuffing, and keep the writing human and useful. ${n}`:i.includes("ai-ish")?`Fix this audit issue across the article: ${o}. Make the writing more natural, specific, and human. Reduce generic AI-style phrasing while preserving meaning, structure, and facts. ${n}`:i.includes("content length")?`Fix this SEO audit issue: ${o}. Expand the article with useful, non-fluffy details, examples, and reader guidance. ${a} ${n}`:i.includes("subheadings")?`Fix this readability issue: ${o}. Improve the article structure with useful H2/H3 subheadings while preserving the article's intent. ${a} ${n}`:`Fix this SEO audit issue: ${r}: ${o}. ${a} Keep the result natural, useful, and aligned with the article intent. ${n}`},Ws=e=>`${(e==null?void 0:e.name)||""}:${(e==null?void 0:e.message)||""}`,Os=e=>{let t=Number((Be==null?void 0:Be.ai_ish_pattern_count)||0);if(t>0)return t;let n=String((e==null?void 0:e.message)||"").match(/(\d+)\s+pattern/i);return n?Number(n[1]):0},ze=(e,t,n=`${t}s`)=>{let r=Number(e||0);return`${r} ${r===1?t:n}`},ln=e=>{let t=Number((e==null?void 0:e.patternCount)||0);return t>0?ze(t,"pattern occurrence"):"audit pattern occurrences"},Lr=(e,t,n)=>({source:"seo_audit",issueName:(e==null?void 0:e.name)||"SEO audit issue",auditMessage:(e==null?void 0:e.message)||"",patternCount:Os(e),candidateBlockCount:Array.isArray(t)?t.length:0,refineableBlockCount:Array.isArray(n)?n.length:0}),Wr=async e=>{if(U||Ve||!e)return;let t=String(e.name||"").toLowerCase(),n=Ee||I.focus_keyword||I.seo_focus_keyword||"",r=Ws(e);if(Nn(r),t.includes("focus keyword")&&!n){u(o=>[...o,{role:"system",type:"error",content:"Set a focus keyword first, then run the audit again."}]),et("config"),Nn("");return}et("chat"),Ye(!1);try{if(t.includes("meta description")){u(c=>[...c,{role:"user",content:`Fix SEO audit: ${e.message}`}]),u(c=>[...oe(c),{role:"system",type:"timeline",status:"refining",message:"Generating SEO meta description...",timestamp:new Date}]),await Xn();return}if(t.includes("keyword in title")){let c=n?`include the focus keyword "${n}" naturally in the title, keep it compelling, and match the article language`:"make the title more SEO-friendly and aligned with the article";await Js(`@title ${c}`,["@title"]);return}let o=jt();if(!o.length){u(c=>[...c,{role:"system",type:"error",content:"No article blocks found to fix yet. Generate or insert content first, then run the audit again."}]);return}let a=Pr(e),i=t.includes("ai-ish")?Yn(a,o):o;if(t.includes("ai-ish")&&i.length===0){let c=Os(e);u(l=>[...l,{role:"assistant",content:c>0?`Audit found ${ze(c,"pattern occurrence")}, but I could not safely map those occurrences to editor blocks. I did not send the whole article to refinement.`:"I rechecked the editor blocks and did not find AI-ish pattern matches, so I did not send the whole article to refinement."}]);return}await gt(a,i.map(c=>c.clientId),{useDiffPlan:!1,auditContext:t.includes("ai-ish")?Lr(e,i,o):null})}finally{Nn("")}},Xn=async()=>{if(rt)return;let e=Me("meta","meta description");gs(!0);try{let t=await fetch(`${wpAgenticWriter.apiUrl}/generate-meta`,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({postId:C,sessionId:z,focusKeyword:I.seo_focus_keyword,chatHistory:J.filter(r=>r.role!=="system")}),signal:e.signal});if(!t.ok){let r=await t.json();throw new Error(r.message||"Failed to generate meta description")}let n=await t.json();if(we(n),n.meta_description)ge("seo_meta_description",n.meta_description),u(r=>[...r,{role:"assistant",content:"\u2705 Meta description generated successfully",type:"success"}]),u(r=>{let o=[...r],a=Y(o);return a!==-1&&(o[a]={...o[a],status:"complete",message:"Meta description generated.",completedAt:new Date}),o});else throw new Error("No meta description returned from API")}catch(t){if(Se(t)){u(n=>{let r=[...n],o=Y(r);return o!==-1&&(r[o]={...r[o],status:"stopped",message:"Meta description generation stopped."}),r});return}K.error("Error generating meta description:",t),u(n=>[...n,{role:"system",content:`\u274C Failed to generate meta description: ${t.message}`,type:"error"}]),u(n=>{let r=[...n],o=Y(r);return o!==-1&&(r[o]={...r[o],status:"error",message:"Meta description failed."}),r})}finally{gs(!1),ke("meta")}},Pe=e=>{var n,r,o,a;let t=Es(((n=e.attributes)==null?void 0:n.content)||((r=e.attributes)==null?void 0:r.value)||((o=e.attributes)==null?void 0:o.caption)||((a=e.attributes)==null?void 0:a.title)||"");if(t)return t;if(s.blocks&&typeof s.blocks.getBlockContent=="function"){let i=s.blocks.getBlockContent(e);if(i){let c=document.createElement("div");return c.innerHTML=i,Es(c.textContent)}}return""},Or=e=>{if(!e)return"";let n=V("core/block-editor").getBlocks().find(r=>r.clientId===e);return n?Pe(n):""},Ds=React.useCallback(()=>{let e=V("core/editor"),t=V("core/block-editor"),n=t!=null&&t.getBlocks?t.getBlocks():[],r=t!=null&&t.getSelectedBlockClientId?t.getSelectedBlockClientId():"",o=r&&(t!=null&&t.getBlock)?t.getBlock(r):null,a=e!=null&&e.getEditedPostAttribute&&e.getEditedPostAttribute("title")||"",i=o!=null&&o.name?o.name.replace("core/",""):"",c=o?Pe(o):"";return{title:a||"Untitled draft",blockCount:n.filter(l=>Pe(l)||Array.isArray(l.innerBlocks)&&l.innerBlocks.length>0).length,selectedBlockLabel:o?`${i||"block"} ${r.slice(0,6)}`:"None selected",selectedBlockPreview:c?c.slice(0,90):""}},[]);React.useEffect(()=>{var n;let e=()=>{let r=Ds();Sr(o=>JSON.stringify(o)===JSON.stringify(r)?o:r)};e();let t=(n=s.data)!=null&&n.subscribe?s.data.subscribe(e):null;return()=>{typeof t=="function"&&t()}},[Ds]),React.useEffect(()=>{if(Un.current){let e=Un.current;e.scrollTop=e.scrollHeight}},[J,U]),React.useEffect(()=>{let e=t=>{if(U)return t.preventDefault(),t.returnValue="",""};return window.addEventListener("beforeunload",e),()=>window.removeEventListener("beforeunload",e)},[U]),React.useEffect(()=>{Yr()},[C]),React.useEffect(()=>{if(C)try{let e=window.localStorage.getItem(`wpawSessionId_${C}`);e&&nt(e)}catch{}},[C]),React.useEffect(()=>{if(!(!C||!z))try{window.localStorage.setItem(`wpawSessionId_${C}`,z)}catch{}},[C,z]);let St=React.useCallback(e=>Array.isArray(e)?e.slice(-300).map(r=>{let o={};return o.role=typeof(r==null?void 0:r.role)=="string"?r.role:"assistant",typeof(r==null?void 0:r.content)=="string"&&(o.content=r.content),typeof(r==null?void 0:r.type)=="string"&&(o.type=r.type),typeof(r==null?void 0:r.status)=="string"&&(o.status=r.status),r!=null&&r.timestamp&&(o.timestamp=r.timestamp),Array.isArray(r==null?void 0:r.sections)&&(o.sections=r.sections),r!=null&&r.meta&&typeof r.meta=="object"&&(o.meta=r.meta),r!=null&&r.plan&&typeof r.plan=="object"&&(o.plan=r.plan),o}):[],[]),Fs=React.useCallback(e=>{var n,r;if(!Array.isArray(e)||e.length===0){Q.current=null,xe("chat");return}let t=null;for(let o=e.length-1;o>=0;o-=1)if(((n=e[o])==null?void 0:n.type)==="plan"&&((r=e[o])!=null&&r.plan)){t=Gn(e[o].plan);break}Q.current=t,xe(t?"planning":"chat"),Ye(!1)},[]),js=React.useCallback(async(e=null,t=!1,n=null)=>{var c,l;let r=e||z;if(!r)return;let o=n||(Re&&Re.current?Re.current:J);if(!Array.isArray(o)||o.length===0)return;let a=t?o:St(o),i=JSON.stringify(a);if(i!==wt.current)try{if(!(await fetch(`${wpAgenticWriter.apiUrl}/conversations/${r}/messages`,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({messages:a})})).ok)throw new Error("Failed to persist session messages");wt.current=i}catch(d){(l=(c=window.console)==null?void 0:c.warn)==null||l.call(c,"WP Agentic Writer: failed to persist session messages.",d)}},[St,z]),Re=React.useRef(J);React.useEffect(()=>{Re.current=J},[J]),React.useEffect(()=>{let e=()=>{if(Ie.current&&clearTimeout(Ie.current),!z||De.current)return;let t=Re&&Re.current?Re.current:J;if(!Array.isArray(t)||t.length===0)return;let n=St(t);if(JSON.stringify(n)!==wt.current)try{let o=new XMLHttpRequest;o.open("POST",`${wpAgenticWriter.apiUrl}/conversations/${z}/messages`,!1),o.setRequestHeader("Content-Type","application/json"),o.setRequestHeader("X-WP-Nonce",wpAgenticWriter.nonce),o.send(JSON.stringify({messages:n}))}catch{}};return window.addEventListener("beforeunload",e),()=>window.removeEventListener("beforeunload",e)},[z,St]);let Wt=React.useCallback(async e=>{var t;if(!e)return!1;try{let n=await fetch(`${wpAgenticWriter.apiUrl}/conversations/${e}/lock`,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({tab_id:qt.current})});if(!n.ok)return!1;let r=await n.json();return r.locked?(bn({locked:!0,lockedByOther:!1,holderTabId:""}),!0):(bn({locked:!1,lockedByOther:!0,holderTabId:((t=r.holder)==null?void 0:t.tab_id)||""}),!1)}catch{return!0}},[]),Hs=React.useCallback(async e=>{if(e)try{await fetch(`${wpAgenticWriter.apiUrl}/conversations/${e}/lock`,{method:"DELETE",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({tab_id:qt.current}),keepalive:!0})}catch{}},[]),Ot=React.useCallback(e=>{pt.current&&clearInterval(pt.current),pt.current=setInterval(()=>{Wt(e)},3e4)},[Wt]),dn=React.useCallback(()=>{pt.current&&(clearInterval(pt.current),pt.current=null)},[]);React.useEffect(()=>{let e=()=>{if(z){dn();try{let t=new XMLHttpRequest;t.open("DELETE",`${wpAgenticWriter.apiUrl}/conversations/${z}/lock`,!1),t.setRequestHeader("Content-Type","application/json"),t.setRequestHeader("X-WP-Nonce",wpAgenticWriter.nonce),t.send(JSON.stringify({tab_id:qt.current}))}catch{}}};return window.addEventListener("beforeunload",e),()=>window.removeEventListener("beforeunload",e)},[z,dn]);let Dr=React.useCallback(async()=>{if(z)try{let e=await fetch(`${wpAgenticWriter.apiUrl}/conversations/${z}/lock`,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({tab_id:qt.current,force:!0})});e.ok&&(await e.json()).locked&&(bn({locked:!0,lockedByOther:!1,holderTabId:""}),Ot(z))}catch{}},[z,Ot]);React.useEffect(()=>{if(!z||De.current||Kt.lockedByOther)return;let e=Re&&Re.current?Re.current:J;if(!(!Array.isArray(e)||e.length===0))return Ie.current&&clearTimeout(Ie.current),Ie.current=setTimeout(()=>{if(De.current)return;let t=Re&&Re.current?Re.current:[];t.length!==0&&js(z,!1,t)},3e3),()=>{Ie.current&&clearTimeout(Ie.current)}},[z,J,js]),React.useEffect(()=>{(async()=>{if(!(J.length>0||De.current))try{let t={"X-WP-Nonce":wpAgenticWriter.nonce},n=[],r="",o=await un();if(!C)return;if(o.length>0&&o.length>0){let a=o[0],i=(()=>{try{return window.localStorage.getItem(`wpawSessionId_${C}`)||""}catch{return""}})();if(i){let c=o.find(l=>(l==null?void 0:l.session_id)===i);c&&(a=c)}r=(a==null?void 0:a.session_id)||"",Array.isArray(a==null?void 0:a.messages)&&a.messages.length>0&&(n=a.messages)}if(r&&n.length===0)try{let a=await fetch(`${wpAgenticWriter.apiUrl}/conversations/${r}`,{method:"GET",headers:t});if(a.ok){let i=await a.json();i&&Array.isArray(i.messages)&&i.messages.length>0&&(n=i.messages)}}catch{}if(C&&!r){let a=await fetch(`${wpAgenticWriter.apiUrl}/conversation/${C}`,{method:"GET",headers:t});if(a.ok){let i=await a.json();i!=null&&i.session_id&&(r=i.session_id),i&&Array.isArray(i.messages)&&i.messages.length>0&&(n=i.messages)}}if(C&&n.length===0&&!r){let a=await fetch(`${wpAgenticWriter.apiUrl}/chat-history/${C}`,{method:"GET",headers:t});if(a.ok){let i=await a.json();i&&Array.isArray(i.messages)&&i.messages.length>0&&(n=i.messages)}}n.length>0&&(De.current=!0,wt.current=JSON.stringify(St(n)),Fs(n),u(n),setTimeout(()=>{De.current=!1},0)),r&&(nt(r),Wt(r).then(a=>{a&&Ot(r)}))}catch{}})()},[C]),React.useEffect(()=>{!C||Ns.current||(Ns.current=!0,fetch(`${wpAgenticWriter.apiUrl}/memanto/restore?post_id=${C}`,{headers:{"X-WP-Nonce":wpAgenticWriter.nonce}}).then(e=>e.ok?e.json():Promise.reject(e)).then(e=>{e!=null&&e.restored&&(K.info("MEMANTO: Session restored",e),As({restored:!0,summary:e.summary||"",memories:e.memories||[],preferences:e.preferences||[],systemMessage:e.system_message||""}))}).catch(()=>{}))},[C]),React.useEffect(()=>{var e;!C||!vt.restored||!((e=vt.preferences)!=null&&e.length)||!Gt.current||Jt(t=>{let n=!1,r={...t};for(let o of vt.preferences){let a=o.content||"",i=a.match(/tone\s*=\s*([^,\n]+)/i),c=a.match(/audience\s*=\s*([^,\n]+)/i),l=a.match(/(?:article_)?length\s*=\s*([^,\n]+)/i),d=a.match(/language\s*=\s*([^,\n]+)/i);i&&!t.tone&&i[1].trim().toLowerCase()!=="default"&&(r.tone=i[1].trim(),n=!0),c&&!t.audience&&c[1].trim().toLowerCase()!=="general"&&(r.audience=c[1].trim(),n=!0),l&&t.article_length==="medium"&&l[1].trim().toLowerCase()!=="medium"&&(r.article_length=l[1].trim(),n=!0),d&&t.language==="auto"&&d[1].trim().toLowerCase()!=="auto"&&(r.language=d[1].trim(),n=!0)}return n?r:t})},[C,vt.restored,Xt]);let un=async()=>{let e={"X-WP-Nonce":wpAgenticWriter.nonce},t=[],n=[],r=async l=>{let d=await fetch(`${wpAgenticWriter.apiUrl}/conversations?status=${l}&limit=50`,{method:"GET",headers:e});if(!d.ok)return[];let g=await d.json();return Array.isArray(g==null?void 0:g.sessions)?g.sessions:[]},o=l=>l.filter(d=>Number((d==null?void 0:d.post_id)||0)===0);if(C){let l=await fetch(`${wpAgenticWriter.apiUrl}/conversations/post/${C}`,{method:"GET",headers:e});if(l.ok){let d=await l.json();t=Array.isArray(d==null?void 0:d.sessions)?d.sessions:[]}if(t.length===0){let[d,g]=await Promise.all([r("active"),r("completed")]);n=o([...d,...g])}}else{let[l,d]=await Promise.all([r("active"),r("completed")]);n=[...l,...d]}let a=[...t,...n],i=[],c=new Set;return a.forEach(l=>{var h;let d=(l==null?void 0:l.session_id)||"";!d||c.has(d)||Number((h=l==null?void 0:l.message_count)!=null?h:Array.isArray(l==null?void 0:l.messages)?l.messages.length:0)<=0||(c.add(d),i.push(l))}),ns(i),i},Us=async e=>{if(!e)return;let t={"X-WP-Nonce":wpAgenticWriter.nonce};Ge(!0);try{z&&z!==e&&(dn(),Hs(z));let n=await fetch(`${wpAgenticWriter.apiUrl}/conversations/${e}`,{method:"GET",headers:t});if(!n.ok)throw new Error("Failed to load session");let r=await n.json();Ie.current&&(clearTimeout(Ie.current),Ie.current=null),De.current=!0,nt(e);let o=Array.isArray(r==null?void 0:r.messages)?r.messages:[];if(o.length===0&&(r!=null&&r.post_id)&&Number(r.post_id)>0){K.warn("Session has 0 messages, attempting post-based recovery:",e);try{let c=await fetch(`${wpAgenticWriter.apiUrl}/conversation/${r.post_id}`,{method:"GET",headers:t});if(c.ok){let l=await c.json();Array.isArray(l==null?void 0:l.messages)&&l.messages.length>0&&o.push(...l.messages)}}catch{}}wt.current=JSON.stringify(St(o)),Fs(o),u(o),Ye(!1);let a=Number((r==null?void 0:r.post_id)||0);C&&C>0&&a===0&&fetch(`${wpAgenticWriter.apiUrl}/conversations/${e}/link-post`,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({postId:C})}).catch(()=>{}),await Wt(e)&&Ot(e),setTimeout(()=>{De.current=!1},0)}catch{De.current=!1,u(r=>[...r,{role:"system",type:"error",content:"Error: Failed to load selected session."}])}finally{Ge(!1)}},Dt=e=>Ir.test(e)?"timeline":e.length>=6||/[\s.!?]/.test(e)?"assistant":null,gn=e=>e?e.replace(/[\u2010-\u2015\u2212]/g,"-").replace(/[.,;:!?)]*$/g,"").toLowerCase():"",zs=e=>{let t=[],n=/@([^\s]+)/g,r;for(;r=n.exec(e);){let o=gn(r[1]);o&&t.push("@"+o)}return t},qs=e=>e?e.replace(/@[\w-]+/g,"").replace(/\s{2,}/g," ").trim():"",Ks=e=>Array.isArray(e)&&e.some(t=>gn(String(t).replace("@",""))==="title"),Js=async(e,t,n={})=>{let{skipUserMessage:r=!1}=n,o=qs(e||"");if(!o)return u(i=>[...i,{role:"system",type:"error",content:"Please add title instruction after @title. Example: @title tulis ulang, gunakan focus keyword di awal."}]),!1;r||u(i=>[...i,{role:"user",content:e}]);let a=Me("title","title refinement");M(!0),u(i=>[...oe(i),{role:"system",type:"timeline",status:"refining",message:"Refining title...",timestamp:new Date}]);try{let i=await fetch(`${wpAgenticWriter.apiUrl}/refine-title`,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({postId:C,sessionId:z,instruction:o}),signal:a.signal}),c=await i.json();if(!i.ok)throw new Error((c==null?void 0:c.message)||"Failed to refine title");return c!=null&&c.title&&ie("core/editor").editPost({title:c.title}),c!=null&&c.cost&&he({...te,session:te.session+Number(c.cost||0)}),we(c),u(l=>{let d=[...l],g=Y(d);return g!==-1&&(d[g]={...d[g],status:"complete",message:"Title refined successfully.",completedAt:new Date}),d.push({role:"assistant",content:`Updated title: ${c.title||""}`}),d}),!0}catch(i){return timeout&&clearTimeout(timeout),Se(i)?(u(c=>{let l=[...c],d=Y(l);return d!==-1&&(l[d]={...l[d],status:"stopped",message:"Title refinement stopped."}),l}),!1):(u(c=>[...c,{role:"system",type:"error",content:"Error: "+(i.message||"Failed to refine title")}]),!1)}finally{M(!1),ke("title")}},Fr=e=>{let t=[{mode:"add_below",regex:/^\s*(?:\/)?add below\b[:\-]?\s*/i},{mode:"add_above",regex:/^\s*(?:\/)?add above\b[:\-]?\s*/i},{mode:"append_code",regex:/^\s*(?:\/)?append code block\b[:\-]?\s*/i},{mode:"append_code",regex:/^\s*(?:\/)?append code\b[:\-]?\s*/i},{mode:"append_code",regex:/^\s*(?:\/)?add code block\b[:\-]?\s*/i}];for(let n of t)if(n.regex.test(e))return{mode:n.mode,message:e.replace(n.regex,"").trim()};return null},jr=e=>{let t=[{id:"add-below",label:"add below",sublabel:"Insert a new paragraph below the target block",insertText:"add below @"},{id:"add-above",label:"add above",sublabel:"Insert a new paragraph above the target block",insertText:"add above @"},{id:"append-code-block",label:"append code block",sublabel:"Insert a code block below the target block",insertText:"append code block @"},{id:"reformat",label:"reformat",sublabel:"Convert markdown-like text into blocks",insertText:"reformat @"}];if(!e)return t;let n=e.toLowerCase();return t.filter(r=>r.label.includes(n))},Hr=e=>{let t=V("core/block-editor").getBlockIndex?V("core/block-editor").getBlockIndex(e):-1;return t!==-1?t:V("core/block-editor").getBlocks().findIndex(r=>r.clientId===e)},Ur=e=>{if(e.length>0){let r=Ut(e);if(r.length>0)return r[0]}let t=V("core/block-editor").getSelectedBlockClientId();if(t)return t;let n=V("core/block-editor").getBlocks();return n.length>0?n[n.length-1].clientId:null},zr=async(e,t,n,r)=>{let o=Ur(n),a=o?V("core/block-editor").getBlock(o):null,c=((a==null?void 0:a.name)==="core/list-item"?yo(o):null)||o;if(!c){u(b=>[...b,{role:"system",type:"error",content:"No target block found. Select a block or mention one with @paragraph-1."}]),M(!1);return}let l=Hr(c),d=l===-1?void 0:l+(e==="add_above"?0:1),{insertBlocks:g}=ie("core/block-editor"),h=e==="append_code"?"core/code":"core/paragraph",v=s.blocks.createBlock(h,e==="append_code"?{content:"",language:"text"}:{content:""});g(v,d);let y=qs(t);if((a==null?void 0:a.name)==="core/list-item"){let b=Pe(a);b&&(y=y?`${y}
+
+Add a short description for: "${b}".`:`Add a short description for: "${b}".`)}let _=vo(n,o);if(!_.length){let b=bo(c);b&&_.push(`Heading: ${b}`),wo(c,2).forEach((S,x)=>{_.push(`Paragraph ${x+1}: ${S}`)})}_.length&&(y=`${y}
+
+Context snippets:
+${_.map(b=>`- ${b}`).join(`
+`)}`),y=`${y}
+
+Return only JSON: {"content":"...","blockType":"${h}"} with no extra text.`,e==="append_code"&&(y+=' Put the code in "content" only, no backticks.'),pe(""),u(b=>[...b,{role:"user",content:r}]),await gt(y,[v.clientId],{skipUserMessage:!0,useDiffPlan:!1})},qr=async(e,t={})=>{var l,d,g,h,v,y,_,B;let{resume:n=!1,suggestKeywords:r=Ce==="planning"}=t,o={...e,postConfig:I,chatHistory:ut()};Tn.current=o;let a=Ce==="planning"?"planning":"generation",i=Me(a,a==="planning"?"outline generation":"article generation");M(!0),n||Kn("Article Generation");let c=null;try{let b=await fetch(wpAgenticWriter.apiUrl+"/generate-plan",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({...o,resume:n}),signal:i.signal});if(!b.ok){let $=await b.json();u(q=>[...q,{role:"system",type:"error",content:fe($,"Failed to generate article"),canRetry:!0,retryType:"generation"}]);return}let S=Ke(b.body.getReader()),x=new TextDecoder;for(c=setTimeout(()=>{U&&(K.error("Generation timeout - no response received"),u($=>[...$,{role:"system",type:"error",content:fe("cURL error 28: Operation timed out after 120000 milliseconds","Failed to generate article"),canRetry:!0,retryType:"generation"}]),M(!1),S.cancel())},12e4);;){if(ue.current||i.signal.aborted)throw await S.cancel().catch(()=>{}),new DOMException("Operation stopped by user","AbortError");let{done:$,value:q}=await S.read();if($)break;let L=x.decode(q,{stream:!0}).split(`
+`);for(let w of L)if(w.startsWith("data: "))try{let f=JSON.parse(w.slice(6));if(f.type==="plan")he({...te,session:te.session+f.cost}),Ce==="planning"&&f.plan&&Ct(f.plan,{suggestKeywords:r});else if(f.type==="title_update")ie("core/editor").editPost({title:f.title});else if(f.type==="status"){if(f.status==="complete")continue;u(p=>{let m=[...p],k=Y(m);return k!==-1&&(m[k]={...m[k],status:f.status,message:f.message,icon:f.icon}),m})}else if(f.type==="conversational"||f.type==="conversational_stream"){let p=(f.content||"").replace(/~~~ARTICLE~+/g,"").replace(/~~~ARTICLE~~~[\r\n]*/g,"").trim();if(!p||pn(p))continue;let m=ve.current||Dt(p);if(!m)continue;ve.current=m,m==="timeline"?cn(p):f.type==="conversational"?u(k=>[...k,{role:"assistant",content:p}]):u(k=>{let N=[...k],Z=N.length-1;return N[Z]&&N[Z].role==="assistant"?N[Z]={...N[Z],content:p}:N.push({role:"assistant",content:p}),N})}else if(f.type==="block"){let{insertBlocks:p}=ie("core/block-editor"),m;if(f.block.blockName==="core/paragraph"){let k=((d=(l=f.block.innerHTML)==null?void 0:l.match(/
(.*?)<\/p>/))==null?void 0:d[1])||"";m=s.blocks.createBlock("core/paragraph",{content:k})}else if(f.block.blockName==="core/heading"){let k=((g=f.block.attrs)==null?void 0:g.level)||2,N=((v=(h=f.block.innerHTML)==null?void 0:h.match(/(.*?)<\/h[1-6]>/))==null?void 0:v[1])||"";m=s.blocks.createBlock("core/heading",{level:k,content:N})}else if(f.block.blockName==="core/list"){let k=(f.block.innerBlocks||[]).map(N=>{var _e,E;let Z=((E=(_e=N.innerHTML)==null?void 0:_e.match(/(.*?)<\/li>/))==null?void 0:E[1])||"";return s.blocks.createBlock("core/list-item",{content:Z})});m=s.blocks.createBlock("core/list",{...f.block.attrs||{},ordered:((y=f.block.attrs)==null?void 0:y.ordered)||!1},k)}else if(f.block.blockName==="core/quote"){let k=((B=(_=f.block.innerHTML)==null?void 0:_.match(/(.*?)<\/p>/))==null?void 0:B[1])||"";m=s.blocks.createBlock("core/quote",{value:k})}else f.block.blockName==="core/image"?m=s.blocks.createBlock("core/image",f.block.attrs||{}):f.block.blockName==="core/code"&&(m=s.blocks.createBlock("core/code",f.block.attrs||{}));m&&p(m)}else f.type==="complete"?(we(f),clearTimeout(c),he({...te,session:te.session+f.totalCost}),u(p=>{let m=[...p],k=Y(m);return k!==-1&&(m[k]={...m[k],status:"complete",message:Ce==="planning"?"Outline ready.":"Article generated successfully!",completedAt:new Date}),m})):f.type==="error"&&(clearTimeout(c),u(p=>[...p,{role:"system",type:"error",content:fe(f.message||"An error occurred during article generation","Failed to generate article"),canRetry:!0,retryType:"generation"}]))}catch(f){K.error("Failed to parse streaming data:",w,f)}}c&&clearTimeout(c)}catch(b){if(Se(b)){u(S=>{let x=[...S],$=Y(x);return $!==-1&&(x[$]={...x[$],status:"stopped",message:"Generation stopped."}),x});return}K.error("Article generation error:",b),u(S=>[...S,{role:"system",type:"error",content:fe(b,"Failed to generate article"),canRetry:!0,retryType:"generation"}])}finally{M(!1),ke(a)}},Kr=()=>{if(!Tn.current){u(e=>[...e,{role:"system",type:"error",content:"Cannot retry because the original generation request is no longer available. Please send the request again."}]);return}u(e=>[...oe(e),{role:"system",type:"timeline",status:"starting",message:"Resuming generation...",timestamp:new Date}]),qr(Tn.current,{resume:!0})},Jr=()=>{if(!$n.current){u(e=>[...e,{role:"system",type:"error",content:"Cannot retry because the original writing request is no longer available. Please start writing again."}]);return}Ft({retry:!0})},Xr=()=>{if(!Bt.current){u(e=>[...e,{role:"system",type:"error",content:"Cannot retry because the original refinement request is no longer available. Please send the refinement again."}]);return}u(e=>[...oe(e),{role:"system",type:"timeline",status:"starting",message:"Retrying refinement...",timestamp:new Date}]),gt(Bt.current.message,Bt.current.blocksOverride,Bt.current.options)},Gr=async()=>{if(!Mn.current){u(n=>[...n,{role:"system",type:"error",content:"Cannot retry because the original chat request is no longer available. Please send the message again."}]);return}let e=Mn.current.message;u(n=>n.filter(r=>!(r.type==="error"&&r.retryType==="chat"))),M(!0);let t=Me("chat","chat retry");try{let n=J.filter(v=>v.role==="user"||v.role==="assistant").map(v=>({role:v.role,content:v.content})),r=await fetch(wpAgenticWriter.apiUrl+"/chat",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({messages:[...n,{role:"user",content:e}],postId:C,sessionId:z,type:"chat",stream:!0,postConfig:I}),signal:t.signal});if(!r.ok){let v=await r.json();throw new Error(v.message||"Failed to chat")}let o=Ke(r.body.getReader()),a=new TextDecoder,i="",c="",l=null,d=Date.now(),g=!1,h=setInterval(()=>{Date.now()-d>3e4&&!g&&(g=!0,u(v=>[...v,{role:"system",type:"timeline",status:"active",message:"\u23F3 Still waiting for response \u2014 the model is processing...",timestamp:new Date}]))},1e4);try{for(;;){if(ue.current||t.signal.aborted)throw new DOMException("Chat retry stopped","AbortError");let{done:v,value:y}=await o.read();if(v)break;d=Date.now(),g=!1,i+=a.decode(y,{stream:!0});let _=i.split(`
+`);i=_.pop()||"";for(let B of _)if(B.startsWith("data: "))try{let b=JSON.parse(B.slice(6));if(b.type==="error"){l=new Error(b.message||"Chat error");break}if(b.type==="conversational_stream"||b.type==="conversational")c=b.content,u(S=>{let x=S[S.length-1];return x&&x.role==="assistant"&&x.isStreaming?[...S.slice(0,-1),{...x,content:c}]:[...S,{role:"assistant",content:c,isStreaming:!0}]});else if(b.type==="complete"){if(we(b),u(S=>{let x=S[S.length-1];return x&&x.role==="assistant"?[...S.slice(0,-1),{...x,isStreaming:!1}]:S}),c){let S=Jn(c);S.length>0&&Ms(S)}}else b.type==="provider"&&b.fallback_used&&u(S=>[...S,{role:"system",type:"timeline",status:"active",message:`\u26A0\uFE0F ${b.selectedProvider||"Selected provider"} unavailable \u2014 using ${b.provider||"fallback"}`,timestamp:new Date}])}catch(b){K.error("Failed to parse retry streaming data:",B,b)}if(l)throw l}if(ue.current||t.signal.aborted)throw new DOMException("Chat retry stopped","AbortError")}finally{clearInterval(h)}}catch(n){if(Se(n)||ue.current||t.signal.aborted)u(r=>[...oe(r),{role:"system",type:"timeline",status:"stopped",message:"Chat retry stopped by user.",timestamp:new Date}]);else{let r=fe(n,"Failed to chat");u(o=>[...o,{role:"system",type:"error",content:r,canRetry:!0,retryType:"chat"}])}}finally{M(!1),ke("chat")}},_t=e=>{let t=e.blockType||"core/paragraph",n=e.content||"";if(t==="core/image"){let r=n.match(/^!\[(.*?)\]\(([^)\s]+)(?:\s+"[^"]*")?\)\s*$/),o=r?r[1]:"",a=r?r[2]:"";return s.blocks.createBlock("core/image",{id:0,url:a,alt:o,caption:"",sizeSlug:"large",linkDestination:"none"})}if(t==="core/heading")return s.blocks.createBlock("core/heading",{level:e.level||2,content:n});if(t==="core/list"){let o=n.split(`
+`).map(a=>a.trim()).filter(Boolean).map(a=>s.blocks.createBlock("core/list-item",{content:a}));return s.blocks.createBlock("core/list",{ordered:e.ordered||!1,...e.start?{start:parseInt(e.start,10)}:{}},o)}return t==="core/code"?s.blocks.createBlock("core/code",{content:n,language:e.language||"text"}):t==="core/paragraph"&&n.includes("<")&&n.includes(">")?s.blocks.rawHandler({HTML:n}):s.blocks.createBlock(t,{content:n})},fn=e=>!e||!e.actions?[]:Array.isArray(e.actions)?e.actions:Object.values(e.actions),Vr=(e,t)=>{if(!e||!e.action)return{title:"Unknown action"};let n=e.blockType?` (${e.blockType.replace("core/","")})`:"",r=(e.content||"").replace(/\s+/g," ").trim(),o=r||"",a=Or(e.blockId),i=a||"",c=a?` "${a.substring(0,40)}${a.length>40?"...":""}"`:"",l=i||'"Target block not found"',d=e.blockId||null;switch(e.action){case"keep":return{title:"Keep"};case"delete":return{title:`Delete${c}`,blockId:d,viewInEditor:!0};case"replace":return{title:`Replace${c}${n}`,blockId:d,viewInEditor:!0};case"change_type":return{title:`Change type${c}${n}`,blockId:d,viewInEditor:!0};case"insert":return{title:`Insert new block${n}`,blockId:d,viewInEditor:!0};case"insert_before":return{title:`Insert before${c}${n}`,blockId:d,viewInEditor:!0};case"insert_after":return{title:`Insert after${c}${n}`,blockId:d,viewInEditor:!0};default:return{title:`Unknown action: ${e.action}`}}},Xs=e=>((e==null?void 0:e.heading)||(e==null?void 0:e.title)||"").toString().replace(/<[^>]+>/g,"").trim().toLowerCase(),Gs=(e,t)=>{if(!e||!t)return;let n=He.current[e]||[];n.includes(t)||(He.current[e]=[...n,t]),kt.current[t]=e},Qr=(e,t)=>{if(!e||!t)return;let n=He.current[e]||[];He.current[e]=n.filter(r=>r!==t),delete kt.current[t]},Yr=async()=>{if(C)try{let e=await fetch(`${wpAgenticWriter.apiUrl}/section-blocks/${C}`,{method:"GET",headers:{"X-WP-Nonce":wpAgenticWriter.nonce}});if(!e.ok)return;let t=await e.json();t&&t.sectionBlocks&&typeof t.sectionBlocks=="object"&&(He.current=t.sectionBlocks,kt.current={},Object.entries(t.sectionBlocks).forEach(([n,r])=>{Array.isArray(r)&&r.forEach(o=>{kt.current[o]=n})}))}catch{}},Vs=async e=>{if(!e||!C)return;let t=He.current[e]||[];try{await fetch(`${wpAgenticWriter.apiUrl}/section-blocks`,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({postId:C,sessionId:z,sectionId:e,blockIds:t})})}catch{}},Gn=e=>{if(!e||!Array.isArray(e.sections))return e;let t=e.sections.map((n,r)=>{let o=(n==null?void 0:n.id)||`section-${r+1}`,a=(n==null?void 0:n.status)||"pending";return{...n,id:o,status:a}});return{...e,sections:t}},Zr=e=>{if(!e||!/(kode|coding|code|script|snippet|skrip)/i.test(e))return null;let r=V("core/block-editor").getBlocks().filter(i=>i.name==="core/code");if(r.length===0)return null;let o=new Set;if(r.forEach(i=>{let c=kt.current[i.clientId];c&&o.add(c)}),o.size===0)return null;let a=[];return o.forEach(i=>{(He.current[i]||[]).forEach(l=>{a.push(l)})}),[...new Set(a)]},eo=e=>{let t=Q.current;if(!t||!Array.isArray(t.sections)||!e)return null;let n=new Set(["dalam","poin","bagian","yang","dan","atau","untuk","dengan","ada","tidak","lebih","ini","itu","seperti","agar","akan","jadi","fokus","tulis","ulang","hapus","tambahkan","pembahasan","pada","berikan","gunakan","jelaskan","buat"]),r=e.toLowerCase().replace(/[^a-z0-9\s]/g," ").split(/\s+/).filter(i=>i.length>3&&!n.has(i));if(r.length===0)return null;let o=null,a=0;return t.sections.forEach(i=>{var d;let c=[i==null?void 0:i.heading,i==null?void 0:i.title,i==null?void 0:i.description,Array.isArray(i==null?void 0:i.content)&&i.content.length>0?(d=i.content[0])==null?void 0:d.content:""].filter(Boolean).join(" ").toLowerCase();if(!c)return;let l=0;r.forEach(g=>{c.includes(g)&&(l+=1)}),l>a&&(a=l,o=i)}),!o||a<2?null:o},Qs=(e,t)=>{e&&u(n=>{var o;let r=[...n];for(let a=r.length-1;a>=0;a--)if(r[a].type==="plan"&&((o=r[a].plan)!=null&&o.sections)){let i=r[a].plan.sections.map(l=>l.id===e?{...l,status:t}:l),c={...r[a].plan,sections:i};r[a]={...r[a],plan:c},Q.current=c;break}return r})},to=(e,t)=>{let n=V("core/block-editor").getBlocks();if(!e||!Array.isArray(e.sections)||!t)return n.length;let r=e.sections,o=r.findIndex(a=>a.id===t);if(o===-1)return n.length;for(let a=o+1;a{var v;return g.name!=="core/heading"?!1:Xs({heading:(v=g.attributes)==null?void 0:v.content})===l});if(d!==-1)return d}return n.length},mn=()=>Ce!=="writing"||Q.current?!1:!(V("core/block-editor").getBlocks().length>0),no=async()=>{let e=J.filter(t=>t.role!=="system");if(e.length<4)return{summary:"",useFullHistory:!0,cost:0};try{let t=await fetch(wpAgenticWriter.apiUrl+"/summarize-context",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({chatHistory:e,postId:C,sessionId:z})});if(!t.ok)throw new Error("Summarization failed");let n=await t.json();return we(n),n.tokens_saved>0&&K.log(`Context optimized: ~${n.tokens_saved} tokens saved (~$${(n.tokens_saved*2e-7).toFixed(4)})`),{summary:n.summary||"",useFullHistory:n.use_full_history||!1,cost:n.cost||0,tokensSaved:n.tokens_saved||0}}catch(t){return K.error("Summarization error:",t),{summary:"",useFullHistory:!0,cost:0}}},so=async e=>{if(!e||e.trim().length===0)return{intent:"continue_chat",cost:0};try{let t=await fetch(wpAgenticWriter.apiUrl+"/detect-intent",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({lastMessage:e,hasPlan:!!Q.current,currentMode:Ce,postId:C,sessionId:z})});if(!t.ok){let r="Intent detection failed";try{let o=await t.json();r=(o==null?void 0:o.message)||r}catch{}throw new Error(r)}let n=await t.json();return we(n),{intent:n.intent||"continue_chat",cost:n.cost||0}}catch(t){return K.error("Intent detection error:",fe(t,"Intent detection failed")),{intent:"continue_chat",cost:0}}},Vo=async()=>{let e=await no();return e.useFullHistory?{type:"full",messages:J.filter(t=>t.role!=="system"),cost:0}:{type:"summary",summary:e.summary,cost:e.cost,tokensSaved:e.tokensSaved}},ro=async()=>{if(confirm("Clear all conversation history? This cannot be undone."))try{u([]),Q.current=null,await fetch(wpAgenticWriter.apiUrl+"/clear-context",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({postId:C})}),u([{role:"system",type:"info",content:"\u2705 Context cleared. Starting fresh conversation."}])}catch(e){K.error("Reset error:",e),u(t=>[...t,{role:"system",type:"error",content:"Failed to clear context. Please try again."}])}},Ct=(e,t={})=>{let{append:n=!1,suggestKeywords:r=Ce==="planning"}=t,o=Gn(e);Q.current=o,u(a=>{let i=[...a];if(!n){for(let c=i.length-1;c>=0;c--)if(i[c].type==="plan")return i[c]={...i[c],plan:o},i}return i.push({role:"assistant",type:"plan",plan:o}),i}),r&&o&&oo(o)},oo=async e=>{if(!(!e||!e.title||!e.sections))try{let t=await fetch(wpAgenticWriter.apiUrl+"/suggest-keywords",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({postId:C,sessionId:z,title:e.title,sections:e.sections})});if(!t.ok)throw new Error("Failed to suggest keywords");let n=await t.json();n.focus_keyword&&ge("seo_focus_keyword",n.focus_keyword),n.secondary_keywords&&Array.isArray(n.secondary_keywords)&&ge("seo_secondary_keywords",n.secondary_keywords.join(", ")),n.cost&&he({...te,session:te.session+n.cost}),we(n),u(r=>[...r,{role:"assistant",content:`\u{1F3AF} **SEO Keywords Suggested:**
+
+**Focus Keyword:** ${n.focus_keyword}
+
+**Secondary Keywords:** ${n.secondary_keywords.join(", ")}
+
+${n.reasoning||""}
+
+You can review and edit these in the Config panel before writing.`}])}catch(t){K.error("Keyword suggestion error:",t)}},ut=React.useCallback(()=>J.filter(e=>(e.role==="user"||e.role==="assistant")&&typeof e.content=="string"&&e.content.trim()).filter(e=>e.type!=="plan").map(e=>({role:e.role,content:e.content.trim().slice(0,2e3)})).slice(-10),[J]),ao=React.useCallback(()=>{for(let e=J.length-1;e>=0;e-=1){let t=J[e];if((t==null?void 0:t.role)==="user"&&typeof t.content=="string"&&t.content.trim())return t.content.trim()}return""},[J]),pn=e=>{if(Ce!=="planning")return!1;let t=String(e||"").toLowerCase();return t.includes("article generation complete")||t.includes("content has been added to your editor")||t.includes("article generated successfully")},Ys=(e=Q.current)=>{let t=Array.isArray(e==null?void 0:e.sections)?e.sections:[],n=t.filter(a=>a.status==="done").length,r=t.filter(a=>a.status==="in_progress").length,o=Math.max(0,t.length-n);return{total:t.length,done:n,inProgress:r,pending:o,label:t.length>0?`${n}/${t.length} written`:"No outline"}},je=(e=Q.current)=>{var t;return(e==null?void 0:e.id)||((t=e==null?void 0:e.meta)==null?void 0:t.id)||(e==null?void 0:e.title)||""},io=e=>{let t=String(e||"").toLowerCase(),n=/\b(?:out?line|plan|structure|kerangka|rencana)(?:\s*[- ]?\s*(?:nya|kan))?\b/i;return/@[a-z0-9-]/i.test(e)||Ks(zs(e))?"targeted_refinement":/\b(meta description|meta title|seo audit|seo score|keyword density|schema|faq)\b/i.test(t)?/\b(meta description|description)\b/i.test(t)?"generate_meta":"seo_audit":/\b(continue|resume|start writing|write article|write it|generate article|lanjut|tulis artikel|buat artikel)\b/i.test(t)?"write":n.test(t)?"outline":/\b(refine|rewrite|improve|polish|fix|ai-ish|aiish|slop|humanize|natural|tone|clarity|rapikan|perbaiki)\b/i.test(t)?"refine":"chat"},co=e=>{let t=io(e),n=Ys(),o=jt().length>0,a=!!(Q.current&&n.total>0);return t==="generate_meta"?{action:"generate_meta",mode:"seo",reason:"SEO meta request"}:t==="seo_audit"?{action:"seo_audit",mode:"seo",reason:"SEO analysis request"}:t==="targeted_refinement"?{action:"targeted_refinement",mode:"refinement",reason:"Block mention detected"}:t==="write"&&a&&n.pending>0?{action:"execute_plan",mode:"writing",reason:"Outline has pending sections"}:(t==="write"||t==="outline")&&!o?{action:"create_outline",mode:"planning",reason:"Fresh post needs outline first"}:t==="outline"?{action:a?"revise_outline":"create_outline",mode:"planning",reason:a?"Existing outline can be revised":"Outline requested"}:t==="refine"&&o?{action:"article_refinement",mode:"refinement",reason:"Content refinement requested"}:{action:"chat",mode:"chat",reason:"Conversation"}},Ft=async(e={})=>{var c,l,d,g,h,v,y,_,B;if(U)return;if(!Q.current){u(b=>[...b,{role:"system",type:"error",content:"No outline found yet. Ask the agent for an outline first, then it can continue into writing."}]),M(!1);return}let t=Q.current;if(V("core/block-editor").getBlocks().some(b=>{var S;return b.name!=="core/paragraph"||((S=b.attributes)==null?void 0:S.content)&&b.attributes.content.trim().length>0})&&!e.skipConfirm){let b=Array.isArray(t==null?void 0:t.sections)?t.sections.filter(x=>x.status!=="done").length:0;if(!window.confirm(`This will write ${b} sections into the editor. Existing content will be preserved below the new content.
+
+Continue?`))return}if(xe("writing"),(Array.isArray(t==null?void 0:t.sections)?t.sections.filter(b=>b.status!=="done").length:null)===0){u(b=>[...oe(b),{role:"system",type:"timeline",status:"complete",message:"All outline items are already written.",timestamp:new Date}]),Fe({status:"completed",current_section_index:Array.isArray(t==null?void 0:t.sections)?t.sections.length:0,sections_written:Array.isArray(t==null?void 0:t.sections)?t.sections.map(b=>b.id||b.heading||"").filter(Boolean):[],plan_id:je(t),resume_token:""}),xe("chat");return}let{retry:a=!1}=e;$n.current={postId:C,sessionId:z,stream:!0,postConfig:I,detectedLanguage:en,chatHistory:J.filter(b=>b.role!=="system")},ue.current=!1,ot(!1);let i=Me("writing","writing");M(!0),Fe({status:"in_progress",current_section_index:0,sections_written:a?Ue.sections_written:[],plan_id:je(t),resume_token:""}),u(b=>[...oe(b),{role:"system",type:"timeline",status:"writing",message:a?"Retrying outline...":"Writing from outline...",timestamp:new Date}]),nn.current={},Qe.current=null;try{let b=await fetch(wpAgenticWriter.apiUrl+"/execute-article",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify($n.current),signal:i.signal});if(!b.ok){let G=await b.json();throw new Error(G.message||"Failed to execute outline")}let S=Ke(b.body.getReader()),x=new TextDecoder,$="",q=setTimeout(()=>{U&&(u(G=>[...G,{role:"system",type:"error",content:"Request timeout. The AI is taking too long to respond. Please try again."}]),Fe({status:"failed",plan_id:je(Q.current),resume_token:Qe.current||""}),M(!1),S.cancel())},12e4);for(;;){if(ue.current||i.signal.aborted){await S.cancel().catch(()=>{}),clearTimeout(q),ot(!0),M(!1);let f=Q.current,p=((c=f==null?void 0:f.sections)==null?void 0:c.filter(N=>N.status==="done").length)||0,m=((l=f==null?void 0:f.sections)==null?void 0:l.length)||0,k=m-p;Fe({status:"paused",current_section_index:p,sections_written:((d=f==null?void 0:f.sections)==null?void 0:d.filter(N=>N.status==="done").map(N=>N.id||N.heading||"").filter(Boolean))||[],plan_id:je(f),resume_token:Qe.current||""}),u(N=>[...oe(N),{role:"system",type:"timeline",status:"stopped",message:`\u23F8\uFE0F Execution stopped (${p}/${m} sections completed)`,timestamp:new Date},{role:"assistant",content:`**Execution Paused**
+
+\u2705 Completed: ${p} section${p!==1?"s":""}
+\u23F3 Pending: ${k} section${k!==1?"s":""}
+
+Your generated content has been preserved in the editor.`,showResumeActions:!0,pendingCount:k}]);break}let{done:G,value:L}=await S.read();if(G)break;$+=x.decode(L,{stream:!0});let w=$.split(`
+`);$=w.pop()||"";for(let f of w)if(f.startsWith("data: "))try{let p=JSON.parse(f.slice(6));if(p.type==="title_update")ie("core/editor").editPost({title:p.title});else if(p.type==="section_start"){Qe.current=p.sectionId||null;let m=to(Q.current,p.sectionId);p.sectionId&&(nn.current[p.sectionId]=m,He.current[p.sectionId]=He.current[p.sectionId]||[]),Qs(p.sectionId,"in_progress"),Fe({status:"in_progress",current_section_index:Number(p.index||0),plan_id:je(Q.current),resume_token:p.sectionId||""})}else if(p.type==="status"){if(p.status==="complete")continue;u(m=>{let k=[...m],N=Y(k);return N!==-1&&(k[N]={...k[N],status:p.status,message:p.message,icon:p.icon}),k})}else if(p.type==="block"){let{insertBlocks:m}=ie("core/block-editor"),k=Vn(p.block);if(k){let N=p.sectionId||Qe.current,Z=N?nn.current[N]:void 0;typeof Z=="number"?(m(k,Z),nn.current[N]=Z+1):m(k),N&&Gs(N,k.clientId)}}else if(p.type==="section_complete"){Qs(p.sectionId,"done"),Vs(p.sectionId);let m=Array.isArray((g=Q.current)==null?void 0:g.sections)?Q.current.sections.filter(k=>k.status==="done").map(k=>k.id||k.heading||"").filter(Boolean):[...new Set([...Ue.sections_written||[],p.sectionId].filter(Boolean))];if(Fe({status:"in_progress",current_section_index:m.length,sections_written:m,plan_id:je(Q.current),resume_token:""}),ue.current){await S.cancel().catch(()=>{}),clearTimeout(q),ot(!0),M(!1),Fe({status:"paused",current_section_index:m.length,sections_written:m,plan_id:je(Q.current),resume_token:p.sectionId||""}),u(k=>[...oe(k),{role:"system",type:"timeline",status:"stopped",message:"\u23F8\uFE0F Execution stopped by user",timestamp:new Date}]);break}}else if(p.type==="assistant_message")u(m=>[...m,{role:"assistant",content:p.message}]);else if(p.type==="complete")clearTimeout(q),p.totalCost&&he({...te,session:te.session+p.totalCost}),we(p),u(m=>{let k=[...m],N=Y(k);return N!==-1&&(k[N]={...k[N],status:"complete",message:"Article generated successfully!",completedAt:new Date}),k}),xe("chat"),Fe({status:"completed",current_section_index:Array.isArray((h=Q.current)==null?void 0:h.sections)?Q.current.sections.length:Ue.current_section_index,sections_written:Array.isArray((v=Q.current)==null?void 0:v.sections)?Q.current.sections.map(m=>m.id||m.heading||"").filter(Boolean):Ue.sections_written,plan_id:je(Q.current),resume_token:""}),M(!1);else if(p.type==="error")throw clearTimeout(q),new Error(p.message||"Failed to execute outline")}catch(p){K.error("Failed to parse streaming data:",f,p)}}clearTimeout(q),u(G=>G.some(w=>w.type==="timeline"&&w.status&&!["complete","inactive","stopped"].includes(w.status))?oe(G):G)}catch(b){if(Se(b)||ue.current){let S=Q.current,x=((y=S==null?void 0:S.sections)==null?void 0:y.filter(G=>G.status==="done").length)||0,$=((_=S==null?void 0:S.sections)==null?void 0:_.length)||0,q=$-x;Fe({status:"paused",current_section_index:x,sections_written:((B=S==null?void 0:S.sections)==null?void 0:B.filter(G=>G.status==="done").map(G=>G.id||G.heading||"").filter(Boolean))||[],plan_id:je(S),resume_token:Qe.current||""}),u(G=>[...oe(G),{role:"system",type:"timeline",status:"stopped",message:`Execution stopped (${x}/${$} sections completed)`,timestamp:new Date},{role:"assistant",content:`**Execution Paused**
+
+Completed: ${x} section${x!==1?"s":""}
+Pending: ${q} section${q!==1?"s":""}
+
+Your generated content has been preserved in the editor.`,showResumeActions:!0,pendingCount:q}]);return}xe(Q.current?"planning":"chat"),Fe({status:"failed",plan_id:je(Q.current),resume_token:Qe.current||""}),u(S=>[...oe(S),{role:"system",type:"error",content:fe(b,"Failed to execute outline"),canRetry:!0,retryType:"execute"}])}finally{M(!1),ke("writing")}},lo=()=>{var e;!U&&!Ve&&!rt||(ue.current=!0,ot(!0),Br(),((e=sn.current)==null?void 0:e.type)==="writing"&&Fe({status:"paused",plan_id:je(Q.current),resume_token:Qe.current||""}),$t.current&&$t.current.cancel().catch(()=>{}),Tt.current&&!Tt.current.signal.aborted&&Tt.current.abort())},Qo=async()=>{if(!(U||!window.confirm("Start a new agent session for this post? The current session will stay available in Sessions.")))try{Ge(!0);let t=await fetch(wpAgenticWriter.apiUrl+"/conversations",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({post_id:C})});if(!t.ok)throw new Error("Failed to create a new conversation");let n=await t.json();n!=null&&n.session_id&&nt(n.session_id),await un(),u([]),Nt(!1),In([]),yt(0),Ne([]),ps(null),Rt(null),ve.current=null}catch(t){if(Se(t)||ue.current){u(n=>{let r=[...n],o=Y(r);return o!==-1&&(r[o]={...r[o],status:"stopped",message:"Refinement stopped by user."}),r}),u(n=>[...n,{role:"assistant",content:"Refinement stopped. Already-applied block changes remain in the editor and can be undone from the top bar."}]);return}u(n=>[...n,{role:"system",type:"error",content:"Error: Failed to start a new conversation."}])}finally{Ge(!1)}},Vn=e=>{if(!e||!e.blockName)return null;let t={...e.attrs||{}};if(e.blockName==="core/code"&&!t.content&&e.innerHTML){let n=e.innerHTML.match(/([\s\S]*?)<\/code>/i);n&&n[1]&&(t.content=n[1].replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&").replace(/"/g,'"'))}if(e.blockName==="core/table"&&e.innerHTML){let n=e.innerHTML.match(/([\s\S]*?)<\/thead>/i),r=e.innerHTML.match(/([\s\S]*?)<\/tbody>/i);(n||r)&&(t.head=[],t.body=[],n&&(n[1].match(/([\s\S]*?)<\/tr>/gi)||[]).forEach(a=>{let i=[];(a.match(/([\s\S]*?)<\/t[hd]>/gi)||[]).forEach(l=>{let d=l.replace(/<\/?t[hd]>/gi,"");i.push({content:d,tag:"th"})}),i.length>0&&t.head.push({cells:i})}),r&&(r[1].match(/([\s\S]*?)<\/tr>/gi)||[]).forEach(a=>{let i=[];(a.match(/| ([\s\S]*?)<\/td>/gi)||[]).forEach(l=>{let d=l.replace(/<\/?td>/gi,"");i.push({content:d,tag:"td"})}),i.length>0&&t.body.push({cells:i})}))}if((e.blockName==="core/buttons"||e.blockName==="core/button")&&e.blockName==="core/button")return s.blocks.createBlock("core/buttons",{},[s.blocks.createBlock("core/button",t)]);if(e.innerBlocks&&e.innerBlocks.length>0){let n=e.innerBlocks.map(r=>Vn(r)).filter(Boolean);return s.blocks.createBlock(e.blockName,t,n)}return s.blocks.createBlock(e.blockName,t)},uo=async(e,t)=>{if(!U){if(!e||e.length===0){u(n=>[...n,{role:"system",type:"error",content:"No blocks found to reformat."}]);return}M(!0),u(n=>[...oe(n),{role:"system",type:"timeline",status:"refining",message:`Reformatting ${e.length} block(s)...`,timestamp:new Date}]);try{let n=await fetch(wpAgenticWriter.apiUrl+"/reformat-blocks",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({blocks:e,postId:C,sessionId:z})});if(!n.ok){let c=await n.json();throw new Error(c.message||"Failed to reformat blocks")}let r=await n.json();we(r);let o=r.results||[],{replaceBlocks:a}=ie("core/block-editor"),i=V("core/editor").getEditedPostAttribute("title")||"";o.forEach(c=>{let l=(c.blocks||[]).map(Vn).filter(Boolean);l.length>0&&a(c.clientId,l)}),u(c=>[...c,{role:"system",type:"timeline",status:"complete",message:`Reformatted ${o.length} block(s).`,timestamp:new Date,completedAt:new Date}]),r.recommended_title&&(u(c=>[...c,{role:"assistant",content:`Suggested title: ${r.recommended_title}`}]),(r.title_updated||!i)&&ie("core/editor").editPost({title:r.recommended_title}))}catch(n){u(r=>[...r,{role:"system",type:"error",content:"Error: "+(n.message||"Failed to reformat blocks")}])}finally{M(!1)}}},go=async e=>{if(U)return;let t=Q.current;if(!t){u(n=>[...n,{role:"system",type:"error",content:"No outline found to revise. Generate an outline first."}]);return}M(!0),u(n=>[...oe(n),{role:"system",type:"timeline",status:"planning",message:"Updating outline...",timestamp:new Date}]);try{let n=await fetch(wpAgenticWriter.apiUrl+"/revise-plan",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({instruction:e,plan:t,postId:C,sessionId:z,postConfig:I})});if(!n.ok){let o=await n.json();throw new Error(o.message||"Failed to revise outline")}let r=await n.json();r.plan&&Ct(r.plan,{append:!0}),r.cost&&he({...te,session:te.session+r.cost}),we(r),u(o=>{let a=[...o],i=Y(a);return i!==-1&&(a[i]={...a[i],status:"complete",message:"Outline updated.",completedAt:new Date}),a})}catch(n){u(r=>[...r,{role:"system",type:"error",content:"Error: "+(n.message||"Failed to revise outline")}])}finally{M(!1)}},fo=e=>{let t=fn(e);if(t.length===0){Rt(null);return}let{replaceBlocks:n,insertBlocks:r,removeBlocks:o,updateBlockAttributes:a}=ie("core/block-editor");tn.length>0&&(o(tn),Bn([])),Kn("Apply Edit Plan");let i=V("core/block-editor").getBlocks(),c=new Map(i.map((g,h)=>[g.clientId,h])),l={},d=new Set(i.map(g=>g.clientId));t.forEach(g=>{if(g.action!=="keep"&&!(g.blockId&&!d.has(g.blockId))){if(g.action==="delete"&&g.blockId){o(g.blockId);return}if(g.action==="change_type"&&g.blockId){let h=[].concat(_t(g));n(g.blockId,h);return}if(g.action==="replace"&&g.blockId){let h=[].concat(_t(g));n(g.blockId,h);return}if(g.action==="insert"||g.action==="insert_after"||g.action==="insert_before")if(g.blockId&&d.has(g.blockId)){let h=c.get(g.blockId),v=l[g.blockId]||{before:0,after:0},y;typeof h=="number"&&(g.action==="insert_before"?(y=h+v.before,v.before+=1):(y=h+v.before+1+v.after,v.after+=1)),l[g.blockId]=v;let _=[].concat(_t(g));r(_,y)}else{let h=[].concat(_t(g));r(h,i.length)}}}),Rt(null),u(g=>[...g,{role:"system",type:"timeline",status:"complete",message:"Changes applied."}])},mo=()=>{let{removeBlocks:e,updateBlockAttributes:t}=ie("core/block-editor"),n=V("core/block-editor").getBlocks();tn.length>0&&(e(tn),Bn([])),(It?fn(It):[]).forEach(o=>{if((o.action==="replace"||o.action==="delete")&&o.blockId){let a=n.find(i=>i.clientId===o.blockId);if(a&&a.attributes.className){let i=a.attributes.className.replace("wpaw-diff-removed","").trim();t(o.blockId,{className:i})}}}),Rt(null),u(o=>[...o,{role:"system",type:"timeline",status:"inactive",message:"Changes cancelled."}])},po=(e,t)=>{if(!e||e.length===0)return"";let n=[];return e.forEach(r=>{let o=t[r.id];o&&n.push(`- ${r.question||r.prompt||"Question"}: ${o}`)}),n.length===0?"":`
+
+Clarification Answers:
+${n.join(`
+`)}`};React.useEffect(()=>{if(Zt&&Te.length>0&&Te[Ae]){let e=Te[Ae];if(e.type==="single_choice"&&e.options&&e.options.length>0&&!de[e.id]){let t={...de};t[e.id]=e.options[0].value,Ne(t)}}},[Ae,Te,Zt]);let Yo=e=>{var r;if(!e||e.length===0)return e;let t=[],n=null;for(let o of e){if(o.name==="core/heading"){let a=(((r=o.attributes)==null?void 0:r.content)||"").trim().toLowerCase();if(a===n){K.log("WP Agentic Writer: Removed duplicate heading:",o.attributes.content);continue}n=a}else n=null;t.push(o)}return t},jt=(e={})=>{let{textOnly:t=!1}=e,n=V("core/block-editor").getBlocks(),r=new Set(["core/paragraph","core/heading","core/list","core/quote","core/pullquote","core/code","core/preformatted","core/table"]);return n.filter(o=>{var c;if(!o.name||!o.name.startsWith("core/")||t&&!r.has(o.name))return!1;let a=((c=o.attributes)==null?void 0:c.content)||"",i=o.innerBlocks&&o.innerBlocks.length>0;return a.trim().length>0||i})},Zs=()=>{let e=V("core/block-editor").getBlocks(),t=[],n=0;return e.forEach(r=>{if(r.name!=="core/list")return;n+=1,(Array.isArray(r.innerBlocks)?r.innerBlocks:[]).forEach((a,i)=>{a.name==="core/list-item"&&t.push({block:a,parentId:r.clientId,listIndex:n,itemIndex:i})})}),t},ho=(e,t)=>Zs().find(r=>r.listIndex===e&&r.itemIndex===t),yo=e=>{let t=V("core/block-editor").getBlockParents;if(!t)return null;let n=t(e);for(let r of n){let o=V("core/block-editor").getBlock(r);if((o==null?void 0:o.name)==="core/list")return r}return null},ko=e=>{let t=e?V("core/block-editor").getBlock(e):null;if(!t)return"";let n=Pe(t);return n?n.trim():""},bo=e=>{let t=V("core/block-editor").getBlocks(),n=t.findIndex(r=>r.clientId===e);if(n===-1)return"";for(let r=n-1;r>=0;r-=1)if(t[r].name==="core/heading")return Pe(t[r])||"";return""},wo=(e,t=2)=>{let n=V("core/block-editor").getBlocks(),r=n.findIndex(a=>a.clientId===e);if(r===-1)return[];let o=[];for(let a=r-1;a>=0&&o.length{let n=Ut(e).filter(o=>o&&o!==t);return[...new Set(n)].map(o=>ko(o)).filter(o=>o)},So=e=>{if(!e||typeof e!="string")return[];let t=[],n=/"([^"]+)"|'([^']+)'/g,r;for(;(r=n.exec(e))!==null;){let o=(r[1]||r[2]||"").trim().toLowerCase();o&&o.length<=40&&t.push(o)}return[...new Set(t)]},Qn=()=>jt({textOnly:!0}),_o=e=>{let t=Qn(),n=So(e);if(!n.length)return t;let r=t.filter(o=>{let a=(Pe(o)||"").toLowerCase();return n.some(i=>a.includes(i))});return r.length>0?r:t},Ht=(e="")=>/\b(ai-ish|aiish|ai-style|ai style|slop|humanize|natural|robotic|generic|fluffy|formulaic|tone)\b/i.test(String(e)),er=e=>{let t=(Pe(e)||"").trim();if(!t)return[];let n=[];return[{label:"formulaic contrast phrase",pattern:/\b(bukan sekadar|not just)\b/i},{label:"template-like conclusion phrase",pattern:/\b(pada akhirnya|in conclusion|to summarize|in summary|kesimpulannya)\b/i},{label:"instructional/meta leakage",pattern:/\b(refined version|key refinements|changes made|rationale|could you please share)\b/i},{label:"dash-heavy sentence style",pattern:/\s[—–-]\s/u},{label:"generic AI phrase",pattern:/\b(delve|furthermore|moreover|crucial|paramount|landscape|testament|unlock|harness|leverage|seamless|robust)\b/i},{label:"generic marketing claim",pattern:/\b(in today's digital world|plays a vital role|it is important to note|when it comes to)\b/i}].forEach(o=>{o.pattern.test(t)&&n.push(o.label)}),e.name==="core/heading"&&/\b(introduction|conclusion|overview|benefits|key takeaways|final thoughts)\b/i.test(t)&&n.push("weak generic heading"),[...new Set(n)]},Yn=(e,t=Qn())=>{if(!Ht(e))return t;let n=t.map(r=>({block:r,findings:er(r)})).filter(r=>r.findings.length>0);return n.length>0?n.map(r=>r.block):[]},Co=(e,t)=>{let n=new Set(e);return t.filter((r,o)=>{if(n.has(r.clientId))return!0;let a=t[o+1],i=t[o-1];return(n.has(a==null?void 0:a.clientId)||n.has(i==null?void 0:i.clientId))&&r.name==="core/heading"})},xo=(e,t=[],n={})=>{let r=n.auditContext||null;if((r==null?void 0:r.source)==="seo_audit"){let h=Number(r.candidateBlockCount||t.length||0),v=ln(r),y=ze(h,"candidate block"),_=Number(r.refineableBlockCount||0)>h?` I am not sending the full article; I narrowed the scope from ${ze(r.refineableBlockCount,"refineable block")} to ${y}.`:"";return`Audit found ${v}. I mapped that audit signal to ${y} in the editor.${_} I will report changed blocks separately after verification.`}let o=/\b(introduction|conclusion|overview|benefits|key takeaways|final thoughts)\b/i,a=0,i=0,c=0;t.forEach(h=>{let y=(Pe({name:h.name,attributes:h.attributes||{},innerBlocks:h.innerBlocks||[]})||"").trim();y&&(h.name==="core/heading"&&(y.length<18||o.test(y))&&(i+=1),h.name==="core/paragraph"&&er(h).length>0&&(a+=1),y.split(/\s+/).length<14&&h.name!=="core/heading"&&(c+=1))});let l=[];a>0&&l.push(`${a} AI-ish paragraph${a===1?"":"s"}`),i>0&&l.push(`${i} weak heading${i===1?"":"s"}`),c>0&&l.push(`${c} thin block${c===1?"":"s"}`);let d=t.length===1?"1 block":`${t.length} blocks`,g=/\b(ai-ish|aiish|slop|humanize|natural)\b/i.test(e)?"tone and AI-slop cleanup":"the requested refinement";return l.length===0?`I inspected ${d}. I did not find obvious slop markers, so I will focus on ${g} while preserving structure.`:`I inspected ${d}. I found ${l.join(", ")}. I will focus the refinement on ${g} and keep the surrounding structure stable.`},Ut=e=>{let t=V("core/block-editor").getBlocks(),n=V("core/block-editor").getSelectedBlockClientId(),r=[],o=Zs();return e.forEach(a=>{let i=gn(a.replace("@","")),c=i.match(/^([a-z0-9-]+)-(\d+)$/i),l=i.match(/^(?:listitem|list-item|li)-(\d+)$/i),d=i.match(/^list-(\d+)\.list-item-(\d+)$/i);switch(i){case"this":n&&r.push(n);break;case"previous":if(n){let g=t.findIndex(h=>h.clientId===n);g>0&&r.push(t[g-1].clientId)}break;case"next":if(n){let g=t.findIndex(h=>h.clientId===n);g{r.push(g.clientId)});break;default:if(d){let g=parseInt(d[1],10),h=parseInt(d[2],10),v=ho(g,h);v&&r.push(v.block.clientId);break}if(l){let g=parseInt(l[1],10),h=g<=0?1:g,v=o[h-1];v&&r.push(v.block.clientId);break}if(c){let g="core/"+c[1],h=parseInt(c[2])-1,v=0;t.forEach(y=>{y.name===g&&(v===h&&r.push(y.clientId),v++)})}break}}),[...new Set(r)]},gt=async(e,t=null,n={})=>{let{skipUserMessage:r=!1,useDiffPlan:o=!0,auditContext:a=null}=n;Bt.current={message:e,blocksOverride:t,options:n},Kn("Block Refinement");let i=/@([a-z0-9-]+(?:-\d+)?|this|previous|next|all)/gi,l=[...e.matchAll(i)].map(w=>"@"+w[1]),d=t||Ut(l),g=l.some(w=>gn(w.replace("@",""))==="all"),h=d;if(g&&!t&&(h=(Ht(e)?Yn(e):_o(e)).map(f=>f.clientId),u(f=>[...f,{role:"system",type:"timeline",status:"inactive",message:`@all scope narrowed to ${h.length} likely block(s) based on the request.`,timestamp:new Date}])),h.length===0){u(w=>[...w,{role:"system",type:"error",content:"No valid blocks found to refine. Try @this, @previous, @next, @all, @paragraph-1, @listitem-3, or @list-3.list-item-0."}]),M(!1);return}if(g&&h.length>=hr&&!await Tr(h.length)){u(f=>[...f,{role:"system",type:"timeline",status:"inactive",message:`Cancelled @all refinement (${h.length} target blocks).`,timestamp:new Date}]),M(!1);return}let v=g?!1:o,y=g||Ht(e)&&h.length>1,_=w=>w?{clientId:w.clientId,name:w.name,attributes:w.attributes||{},innerBlocks:Array.isArray(w.innerBlocks)?w.innerBlocks.map(_).filter(Boolean):[]}:null,b=V("core/block-editor").getBlocks().map(_).filter(Boolean),S=h.map(w=>b.find(f=>f.clientId===w)).filter(Boolean),x=Co(h,b),$=xo(e,S,{auditContext:a}),q=(a==null?void 0:a.source)==="seo_audit",G=q?`${h.length} audit candidate block(s)`:`${h.length} block(s)`;r||u(w=>[...w,{role:"user",content:e}]),u(w=>[...oe(w),{role:"system",type:"timeline",status:"checking",message:q?"Reading editor and mapping audit findings to candidate blocks...":"Reading editor and inspecting target blocks...",timestamp:new Date},{role:"assistant",type:"agent_diagnosis",content:$},{role:"system",type:"timeline",status:"refining",message:q?`Processing ${G}; changed blocks will be verified after streaming...`:`Refining ${G}...`,timestamp:new Date}]),ls(!0),Cn(h);let L=Me("refinement","refinement");M(!0);try{let w=V("core/block-editor").getSelectedBlockClientId(),f=await fetch(wpAgenticWriter.apiUrl+"/refine-from-chat",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({topic:e,context:e,selectedBlockClientId:w,blocksToRefine:S,allBlocks:x,postId:C,sessionId:z,stream:!0,diffPlan:v,selectiveRefine:y,auditContext:q?a:null,postConfig:I,chatHistory:J.filter(ne=>ne.role!=="system")}),signal:L.signal});if(!f.ok){let ne=await f.json();throw new Error(ne.message||"Refinement failed")}ve.current=null;let p=Ke(f.body.getReader()),m=new TextDecoder,k="",N=0,Z=new Set,{replaceBlocks:_e}=ie("core/block-editor"),E=!1,se="";for(;;){if(ue.current||L.signal.aborted)throw await p.cancel().catch(()=>{}),new DOMException("Operation stopped by user","AbortError");let{done:ne,value:re}=await p.read();if(ne)break;k+=m.decode(re,{stream:!0});let H=k.split(`
+`);k=H.pop()||"";for(let le of H){if(le.startsWith("data: "))try{let D=JSON.parse(le.slice(6));if(D.type==="error"){E=!0,se=D.message||"Refinement failed.";break}else if(D.type==="status")u(P=>{let A=[...P],O=Y(A);return O!==-1&&(A[O]={...A[O],message:D.message||A[O].message,timestamp:new Date}),A});else if(D.type==="edit_plan"){Rt(D.plan);let{insertBlocks:P,updateBlockAttributes:A}=ie("core/block-editor"),O=V("core/block-editor").getBlocks(),F=new Set(O.map(T=>T.clientId)),W=[],R=fn(D.plan),ee={};[...R].reverse().forEach(T=>{if(T.action==="replace"&&T.blockId&&F.has(T.blockId)){let j=O.find(X=>X.clientId===T.blockId);if(j){let X=j.attributes.className||"";X.includes("wpaw-diff-removed")||A(T.blockId,{className:(X?X+" ":"")+"wpaw-diff-removed"});let ce=[].concat(_t(T));ce.forEach(Ze=>{let ir=Ze.attributes.className||"";Ze.attributes.className=(ir?ir+" ":"")+"wpaw-diff-added",W.push(Ze.clientId)});let Xe=O.findIndex(Ze=>Ze.clientId===T.blockId);Xe!==-1&&P(ce,Xe+1)}}else if(T.action==="delete"&&T.blockId&&F.has(T.blockId)){let j=O.find(X=>X.clientId===T.blockId);if(j){let X=j.attributes.className||"";X.includes("wpaw-diff-removed")||A(T.blockId,{className:(X?X+" ":"")+"wpaw-diff-removed"})}}else if(T.action==="insert"||T.action==="insert_after"||T.action==="insert_before"){let j=[].concat(_t(T));if(j.forEach(X=>{let ce=X.attributes.className||"";X.attributes.className=(ce?ce+" ":"")+"wpaw-diff-added",W.push(X.clientId)}),T.blockId&&F.has(T.blockId)){let X=O.findIndex(ce=>ce.clientId===T.blockId);if(X!==-1){let ce=ee[T.blockId]||{before:0,after:0},Xe=X;T.action==="insert_before"?(Xe=X+ce.before,ce.before+=1):(Xe=X+ce.before+1+ce.after,ce.after+=1),ee[T.blockId]=ce,P(j,Xe)}}else P(j,O.length)}}),Bn(W),u(T=>[...T,{role:"system",type:"edit_plan",plan:D.plan}])}else if(D.type==="block"){let P=D.block;if(P.blockName&&P.attrs){let A;if(P.innerBlocks&&P.innerBlocks.length>0){let O=P.innerBlocks.map(F=>s.blocks.createBlock(F.blockName,F.attrs));A=s.blocks.createBlock(P.blockName,P.attrs,O)}else A=s.blocks.createBlock(P.blockName,P.attrs);if(A&&A.name){let O=kt.current[P.clientId];_e(P.clientId,A),Cn(F=>F.map(W=>W===P.clientId?A.clientId:W)),O&&(Qr(O,P.clientId),Gs(O,A.clientId),Z.add(O))}}N++}else D.type==="complete"&&(we(D),u(P=>{let A=[...P],O=Y(A);if(O!==-1){let F=Number(D.failed||0)>0?`, ${Number(D.failed)} failed`:"",W=ln(a),R=ze((a==null?void 0:a.candidateBlockCount)||h.length,"candidate block"),ee=ze(N,"changed block");A[O]={...A[O],status:D.aborted?"error":"complete",message:q?D.aborted?`Audit fix stopped early: ${W} -> ${R} inspected -> ${ee}${F}`:`Audit fix complete: ${W} -> ${R} inspected -> ${ee}${F}`:D.aborted?`Refinement stopped early: ${N} updated${F}`:`Refined ${N} block(s) successfully${F}`,timestamp:new Date}}return A}),u(P=>[...P,{role:"assistant",content:D.aborted?q?`Audit fix stopped early after provider errors.
+
+- Audit signal: ${ln(a)}
+- Candidate scope: ${ze((a==null?void 0:a.candidateBlockCount)||h.length,"candidate block")} inspected
+- Editor changes: ${ze(N,"block")} changed${Number(D.failed||0)>0?`
+- Failed attempts: ${Number(D.failed)}`:""}`:`\u26A0\uFE0F I stopped early after provider errors. Updated ${N} block(s)${Number(D.failed||0)>0?`, ${Number(D.failed)} failed`:""}.`:q?`Audit fix complete.
+
+- Audit signal: ${ln(a)}
+- Candidate scope: ${ze((a==null?void 0:a.candidateBlockCount)||h.length,"candidate block")} inspected
+- Editor changes: ${ze(N,"block")} changed${Number(D.failed||0)>0?`
+- Failed attempts: ${Number(D.failed)}`:""}
+
+Verification: changed blocks were written back to the editor and can be undone from the top bar.`:`\u2705 Done! I've refined ${N} block(s) as requested${Number(D.failed||0)>0?`, with ${Number(D.failed)} failed attempts`:""}.
+
+Verification: updated blocks were written back to the editor and can be undone from the top bar.`}]),D.totalCost&&he({...te,session:te.session+D.totalCost}),Z.forEach(P=>{Vs(P)}))}catch(D){K.error("Failed to parse streaming data:",le,D)}if(E)break}if(E)break}if(ue.current||L.signal.aborted)throw new DOMException("Operation stopped by user","AbortError");E&&(u(ne=>[...ne,{role:"system",type:"error",content:`Refinement stopped: ${se}`,canRetry:!0,retryType:"refine"}]),u(ne=>{let re=[...ne],H=Y(re);return H!==-1&&(re[H]={...re[H],status:"error",message:"Refinement stopped (edit plan failed)"}),re}))}catch(w){if(Se(w)||ue.current){u(f=>{let p=[...f],m=Y(p);return m!==-1&&(p[m]={...p[m],status:"stopped",message:"Refinement stopped by user."}),p}),u(f=>[...f,{role:"assistant",content:"Refinement stopped. Already-applied block changes remain in the editor and can be undone from the top bar."}]);return}u(f=>[...f,{role:"system",type:"error",content:"Error: "+w.message,canRetry:!0,retryType:"refine"}]),u(f=>{let p=[...f],m=Y(p);return m!==-1&&(p[m]={...p[m],status:"error",message:"Refinement failed"}),p})}finally{ls(!1),Cn([]),M(!1),ke("refinement")}},Ao=()=>Yt.isOpen?s.element.createElement("div",{className:"wpaw-refine-confirm-overlay",role:"dialog","aria-modal":"true","aria-label":"Confirm large @all refinement"},s.element.createElement("div",{className:"wpaw-refine-confirm-modal"},s.element.createElement("div",{className:"wpaw-refine-confirm-title"},"Confirm @all Refinement"),s.element.createElement("div",{className:"wpaw-refine-confirm-body"},`This will refine ${Yt.blockCount} text block(s) in batches of 5. This may take time and consume API credits.`),s.element.createElement(zt,{label:"Don\u2019t ask again for this session",checked:Yt.dontAskAgain,onChange:e=>{xn(t=>({...t,dontAskAgain:!!e}))}}),s.element.createElement("div",{className:"wpaw-refine-confirm-actions"},s.element.createElement(me,{isSecondary:!0,onClick:()=>Ts(!1)},"Cancel"),s.element.createElement(me,{isPrimary:!0,onClick:()=>{Yt.dontAskAgain&&(ds.current=!0),Ts(!0)}},"Continue")))):null,hn=e=>{let t=V("core/block-editor").getBlocks(),n=V("core/block-editor").getSelectedBlockClientId(),r=[];(!e||"this".includes(e.toLowerCase()))&&r.push({id:"this",label:"@this",sublabel:"Currently selected block",type:"special"}),(!e||"previous".includes(e.toLowerCase()))&&r.push({id:"previous",label:"@previous",sublabel:"Block before current selection",type:"special"}),(!e||"next".includes(e.toLowerCase()))&&r.push({id:"next",label:"@next",sublabel:"Block after current selection",type:"special"}),(!e||"all".includes(e.toLowerCase()))&&r.push({id:"all",label:"@all",sublabel:"All content blocks",type:"special"}),(!e||"title".includes(e.toLowerCase()))&&r.push({id:"title",label:"@title",sublabel:"Refine post title with instruction",type:"special"});let o={},a=e.toLowerCase(),i=0,c=0;return t.forEach(l=>{if(!l.name||!l.name.startsWith("core/"))return;let d=l.name.replace("core/","");o[d]=(o[d]||0)+1;let g=`@${d}-${o[d]}`,h=Pe(l),v=h.toLowerCase();if(!e||g.includes(a)||v.startsWith(a)){let y=h.length>40?h.substring(0,40)+"...":h;r.push({id:g,label:String(g),sublabel:y||String(d),type:"block",clientId:l.clientId})}l.name==="core/list"&&(c+=1,(Array.isArray(l.innerBlocks)?l.innerBlocks:[]).forEach((_,B)=>{if(_.name!=="core/list-item")return;i+=1;let b=`@listitem-${i}`,S=`@list-${c}.list-item-${B}`,x=Pe(_),$=x.toLowerCase();if(!e||b.includes(a)||S.includes(a)||$.startsWith(a)){let q=x.length>40?x.substring(0,40)+"...":x;r.push({id:b,label:String(S),sublabel:q?`List ${c}: ${q}`:`List ${c} item`,type:"list-item",clientId:_.clientId,parentClientId:l.clientId})}}))}),r};React.useEffect(()=>{let e=t=>{var r;let n=(r=t==null?void 0:t.detail)==null?void 0:r.token;n&&(et("chat"),pe(o=>`${o&&!/\s$/.test(o)?o+" ":o}${n}`),setTimeout(()=>{var i;let o=((i=ye.current)==null?void 0:i.textarea)||ye.current;o&&(o.focus(),o.selectionStart=o.selectionEnd=o.value.length);let a=hn("");bt(a),at(a.length>0)},0))};return window.addEventListener("wpaw:insert-mention",e),()=>window.removeEventListener("wpaw:insert-mention",e)},[hn]);let No=e=>{var i;pe(e);let t=((i=ye.current)==null?void 0:i.textarea)||ye.current,n=typeof(t==null?void 0:t.selectionStart)=="number"?t.selectionStart:e.length,r=e.substring(0,n),o=r.match(/@(\w*)$/),a=r.match(/\/([\w\s]*)$/);if(o){let c=o[1];ks(c);let l=hn(c);bt(l),at(l.length>0),on(0),Lt(!1),an([])}else if(a){let c=a[1];xr(c);let l=jr(c);an(l),Lt(l.length>0),Wn(0),at(!1),bt([])}else at(!1),bt([]),Lt(!1),an([])},Io=e=>{if(!Mt&&!Pt){e.keyCode===13&&(e.metaKey||e.ctrlKey)&&sr();return}Mt&&e.keyCode===40?(e.preventDefault(),on(t=>(t+1)%it.length)):Mt&&e.keyCode===38?(e.preventDefault(),on(t=>(t-1+it.length)%it.length)):Mt&&e.keyCode===13?(e.preventDefault(),it[Pn]&&tr(it[Pn])):Pt&&e.keyCode===40?(e.preventDefault(),Wn(t=>(t+1)%ct.length)):Pt&&e.keyCode===38?(e.preventDefault(),Wn(t=>(t-1+ct.length)%ct.length)):Pt&&e.keyCode===13?(e.preventDefault(),ct[Ln]&&nr(ct[Ln])):e.keyCode===27&&(e.preventDefault(),at(!1),Lt(!1))},tr=e=>{var d;let t=tt,n=((d=ye.current)==null?void 0:d.textarea)||ye.current,r=typeof(n==null?void 0:n.selectionStart)=="number"?n.selectionStart:t.length,a=t.substring(0,r).lastIndexOf("@"),i=t.substring(0,a),c=t.substring(r),l=i+e.label+" "+c;pe(l),at(!1),bt([]),setTimeout(()=>{ye.current&&ye.current.focus()},0)},nr=e=>{var d;let t=tt,n=((d=ye.current)==null?void 0:d.textarea)||ye.current,r=typeof(n==null?void 0:n.selectionStart)=="number"?n.selectionStart:t.length,a=t.substring(0,r).lastIndexOf("/"),i=t.substring(0,a),c=t.substring(r),l=i+e.insertText+c;if(pe(l),Lt(!1),an([]),e.insertText.endsWith("@")){let g=hn("");ks(""),bt(g),at(g.length>0),on(0)}setTimeout(()=>{ye.current&&ye.current.focus()},0)},sr=async()=>{var B,b,S,x,$,q,G,L,w,f,p,m,k,N,Z,_e;if(!tt.trim()||U)return;let e=tt.trim();if(On(!1),/^\s*(\/reset|\/clear)\s*$/i.test(e)){pe(""),await ro();return}let t=co(e),n=t.mode||Ce||"chat";if(["chat","planning","writing"].includes(n)&&n!==Ce&&xe(n),t.action==="execute_plan"){pe(""),u(E=>[...E,{role:"user",content:e}]),zn("checking","Checking outline and editor context..."),await Ft({skipConfirm:!0});return}if(t.action==="generate_meta"){pe(""),u(E=>[...E,{role:"user",content:e}]),zn("checking","Reading article and generating meta description..."),await Xn();return}if(t.action==="seo_audit"){pe(""),u(E=>[...E,{role:"user",content:e}]),zn("checking","Reading editor and running SEO audit..."),await Ls();return}let r=Fr(e),o=r?r.message:e,a=zs(o),i=a.length>0,c=Ks(a),l=jt(),d=n==="planning",g=n==="planning"?"Creating outline...":"Generating article...",h=/^\s*(?:\/)?reformat\b/i;if(r){M(!0),u(E=>[...oe(E),{role:"system",type:"timeline",status:"refining",message:"Preparing insertion...",timestamp:new Date}]),await zr(r.mode,o,a,e),M(!1);return}if(h.test(e)){pe(""),u(re=>[...re,{role:"user",content:e}]);let E=i?Ut(a):jt().map(re=>re.clientId),ne=V("core/block-editor").getBlocks().filter(re=>E.includes(re.clientId));await uo(ne,e);return}if(c){pe(""),await Js(e,a);return}if(n==="planning"&&!i&&Q.current){pe(""),u(E=>[...E,{role:"user",content:e}]),await go(e);return}if(n==="chat"&&!i){pe(""),u(se=>[...se,{role:"user",content:e}]);let E=Me("chat","chat response");M(!0),Mn.current={message:e};try{let se=J.filter(P=>P.role==="user"||P.role==="assistant").map(P=>({role:P.role,content:P.content})),ne=await fetch(wpAgenticWriter.apiUrl+"/chat",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({messages:[...se,{role:"user",content:e}],postId:C,sessionId:z,type:"chat",stream:!0,postConfig:I}),signal:E.signal});if(!ne.ok){let P=await ne.json();throw new Error(P.message||"Failed to chat")}let re=Ke(ne.body.getReader()),H=new TextDecoder,le="",D=null;for(ve.current=null;;){if(ue.current||E.signal.aborted)throw await re.cancel().catch(()=>{}),new DOMException("Operation stopped by user","AbortError");let{done:P,value:A}=await re.read();if(P)break;le+=H.decode(A,{stream:!0});let O=le.split(`
+`);le=O.pop()||"";for(let F of O)if(F.startsWith("data: "))try{let W=JSON.parse(F.slice(6));if(W.type==="error"){D=new Error(W.message||"Failed to chat");break}if(W.type==="conversational"||W.type==="conversational_stream"){let R=(W.content||"").trim();if(!R)continue;let ee=ve.current||Dt(R);if(!ee)continue;ve.current=ee,W.type==="conversational"?u(T=>{let j=[...T],X=j.length-1,ce=j[X];return ce&&ce.role==="assistant"&&ce.content===R||j.push({role:"assistant",content:R}),j}):u(T=>{let j=[...T],X=j.length-1;return j[X]&&j[X].role==="assistant"?j[X]={...j[X],content:R}:j.push({role:"assistant",content:R}),j})}else W.type==="complete"&&(W.totalCost&&he({...te,session:te.session+W.totalCost}),we(W),u(R=>{let ee=R.filter(T=>T.role==="assistant").pop();if(ee&&ee.content){let T=Jn(ee.content);T.length>0&&Ms(T)}return R}))}catch(W){K.error("Failed to parse streaming data:",F,W)}if(D)throw D}try{let P=await so(e);P.cost>0&&he(A=>({...A,session:A.session+P.cost})),P.intent&&P.intent!=="continue_chat"&&u(A=>{let O=[...A],F=O.length-1;return O[F]&&O[F].role==="assistant"&&(O[F]={...O[F],detectedIntent:P.intent}),O})}catch(P){K.error("Intent detection failed:",fe(P,"Intent detection failed"))}}catch(se){if(Se(se))u(ne=>[...oe(ne),{role:"system",type:"timeline",status:"stopped",message:"Chat response stopped.",timestamp:new Date}]);else{let ne=fe(se,"Failed to chat");u(re=>[...re,{role:"system",type:"error",content:ne,canRetry:!0,retryType:"chat"}])}}M(!1),ke("chat");return}if(!i&&l.length>0&&t.action==="article_refinement"){let E=Zr(e),se=E?null:eo(e),ne=se?He.current[se.id]||[]:[];pe(""),u(H=>[...H,{role:"user",content:e}]),ne.length>0&&u(H=>[...H,{role:"assistant",content:`Targeting section: ${se.heading||se.title||"Selected section"} (${ne.length} block(s)).`}]),M(!0),u(H=>[...oe(H),{role:"system",type:"timeline",status:"checking",message:se?`Analyzing request (targeting: ${se.heading||se.title||"section"})...`:"Analyzing request...",timestamp:new Date}]);let re=Ht(e)?Yn(e,l).map(H=>H.clientId):l.map(H=>H.clientId);if(Ht(e)&&re.length===0&&!E&&ne.length===0){u(H=>[...oe(H),{role:"assistant",content:"I inspected the article and did not find blocks matching the AI-ish/slop detector, so I did not send the whole article to refinement."}]),M(!1);return}await gt(e,E&&E.length>0?E:ne.length>0?ne:re,{skipUserMessage:!0});return}if(!i){pe(""),u(H=>[...H,{role:"user",content:e}]);let E=n==="planning"?"planning":"generation",se=Me(E,n==="planning"?"outline generation":"article generation");M(!0),u(H=>[...oe(H),{role:"system",type:"timeline",status:"checking",message:"Analyzing request...",timestamp:new Date}]);let ne=en;try{let H=await fetch(wpAgenticWriter.apiUrl+"/check-clarity",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({topic:e,answers:[],postId:C,sessionId:z,mode:"generation",postConfig:I,chatHistory:ut()}),signal:se.signal});if(H.ok){let D=(await H.json()).result;if(D.detected_language&&(ne=D.detected_language,ms(D.detected_language)),!D.is_clear&&D.questions&&D.questions.length>0){In(D.questions),Nt(!0),yt(0),Ne([]),M(!1),u(P=>{let A=[...P],O=Y(A);return O!==-1&&(A[O]={...A[O],status:"waiting",message:"Waiting for clarification..."}),A}),ke(E);return}}}catch(H){if(Se(H)){u(le=>[...oe(le),{role:"system",type:"timeline",status:"stopped",message:"Generation stopped.",timestamp:new Date}]),M(!1),ke(E);return}K.warn("Clarity check failed, proceeding with generation:",H)}u(H=>{let le=[...H],D=Y(le);return D!==-1&&(le[D]={...le[D],status:"starting",message:g}),le});let re=null;try{let H=await fetch(wpAgenticWriter.apiUrl+"/generate-plan",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({topic:e,context:"",postId:C,sessionId:z,answers:[],autoExecute:n!=="planning",stream:!0,articleLength:I.article_length,detectedLanguage:ne,postConfig:I,chatHistory:ut()}),signal:se.signal});if(!H.ok){let P=await H.json();u(A=>[...A,{role:"system",type:"error",content:fe(P,"Failed to generate article"),canRetry:!0,retryType:"generation"}]),M(!1);return}ve.current=null;let le=Ke(H.body.getReader()),D=new TextDecoder;for(re=setTimeout(()=>{U&&(K.error("Generation timeout - no response received"),u(P=>[...P,{role:"system",type:"error",content:fe("cURL error 28: Operation timed out after 120000 milliseconds","Failed to generate article"),canRetry:!0,retryType:"generation"}]),M(!1),le.cancel())},12e4);;){if(ue.current||se.signal.aborted)throw await le.cancel().catch(()=>{}),new DOMException("Operation stopped by user","AbortError");let{done:P,value:A}=await le.read();if(P)break;let F=D.decode(A,{stream:!0}).split(`
+`);for(let W of F){if(W.startsWith("data: "))try{let R=JSON.parse(W.slice(6));if(R.type==="plan")he({...te,session:te.session+R.cost}),d&&R.plan&&Ct(R.plan,{suggestKeywords:n==="planning"});else if(R.type==="title_update")ie("core/editor").editPost({title:R.title});else if(R.type==="status"){if(R.status==="complete")continue;u(ee=>{let T=[...ee],j=Y(T);return j!==-1&&(T[j]={...T[j],status:R.status,message:R.message,icon:R.icon}),T})}else if(R.type==="conversational"||R.type==="conversational_stream"){let ee=(R.content||"").replace(/~~~ARTICLE~+/g,"").replace(/~~~ARTICLE~~~[\r\n]*/g,"").trim();if(!ee||pn(ee))continue;let T=ve.current||Dt(ee);if(!T)continue;ve.current=T,T==="timeline"?cn(ee):R.type==="conversational"?u(j=>[...j,{role:"assistant",content:ee}]):u(j=>{let X=[...j],ce=X.length-1;return X[ce]&&X[ce].role==="assistant"?X[ce]={...X[ce],content:ee}:X.push({role:"assistant",content:ee}),X})}else if(R.type==="block"){let{insertBlocks:ee}=ie("core/block-editor"),T;if(R.block.blockName==="core/paragraph"){let j=((b=(B=R.block.innerHTML)==null?void 0:B.match(/ (.*?)<\/p>/))==null?void 0:b[1])||"";T=s.blocks.createBlock("core/paragraph",{content:j})}else if(R.block.blockName==="core/heading"){let j=((S=R.block.attrs)==null?void 0:S.level)||2,X=(($=(x=R.block.innerHTML)==null?void 0:x.match(/(.*?)<\/h[1-6]>/))==null?void 0:$[1])||"";T=s.blocks.createBlock("core/heading",{level:j,content:X})}else if(R.block.blockName==="core/list"){let j=(R.block.innerBlocks||[]).map(X=>{var Xe,Ze;let ce=((Ze=(Xe=X.innerHTML)==null?void 0:Xe.match(/(.*?)<\/li>/))==null?void 0:Ze[1])||"";return s.blocks.createBlock("core/list-item",{content:ce})});T=s.blocks.createBlock("core/list",{...R.block.attrs||{},ordered:((q=R.block.attrs)==null?void 0:q.ordered)||!1},j)}else if(R.block.blockName==="core/quote"){let j=((L=(G=R.block.innerHTML)==null?void 0:G.match(/(.*?)<\/p>/))==null?void 0:L[1])||"";T=s.blocks.createBlock("core/quote",{value:j})}else R.block.blockName==="core/image"&&(T=s.blocks.createBlock("core/image",R.block.attrs||{}));T&&ee(T)}else R.type==="complete"?(we(R),clearTimeout(re),he({...te,session:te.session+R.totalCost}),u(ee=>{let T=[...ee],j=Y(T);return j!==-1&&(T[j]={...T[j],status:"complete",message:n==="planning"?"Outline ready.":"Article generated successfully!"}),T}),M(!1)):R.type==="error"&&(clearTimeout(re),u(ee=>[...ee,{role:"system",type:"error",content:fe(R.message||"An error occurred during article generation","Failed to generate article"),canRetry:!0,retryType:"generation"}]),M(!1))}catch(R){K.error("Failed to parse streaming data:",W,R)}if(streamError)throw streamError}}clearTimeout(re)}catch(H){re&&clearTimeout(re),Se(H)?u(le=>[...oe(le),{role:"system",type:"timeline",status:"stopped",message:"Generation stopped.",timestamp:new Date}]):(K.error("Article generation error:",H),u(le=>[...le,{role:"system",type:"error",content:fe(H,"Failed to generate article"),canRetry:!0,retryType:"generation"}])),M(!1)}finally{ke(E)}return}let v=[];if(i&&(v=Ut(a)),i&&v.length===0){u(E=>[...E,{role:"system",type:"error",content:"No valid blocks found to refine. Select a block and use @this, or target an existing block like @paragraph-1."}]),M(!1);return}if(v.length>0){pe(""),await gt(e);return}if(l.length>0){if(e.includes("@")){u(E=>[...E,{role:"system",type:"error",content:"No valid blocks found to refine. Try @this, @previous, @next, @all, or @paragraph-1."}]),M(!1);return}pe(""),await gt(e,l.map(E=>E.clientId));return}pe(""),u(E=>[...E,{role:"user",content:e}]);let y=n==="planning"?"planning":"generation",_=Me(y,n==="planning"?"outline generation":"article generation");M(!0),u(E=>[...oe(E),{role:"system",type:"timeline",status:"starting",message:"Initializing...",timestamp:new Date}]);try{let E=await fetch(wpAgenticWriter.apiUrl+"/generate-plan",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({topic:e,context:"",postId:C,sessionId:z,answers:[],autoExecute:n!=="planning",stream:!0,articleLength:I.article_length,postConfig:I,chatHistory:ut()}),signal:_.signal});if(!E.ok){let re=await E.json();u(H=>[...H,{role:"system",type:"error",content:fe(re,"Failed to generate article"),canRetry:!0,retryType:"generation"}]),M(!1);return}let se=Ke(E.body.getReader()),ne=new TextDecoder;for(;;){if(ue.current||_.signal.aborted)throw await se.cancel().catch(()=>{}),new DOMException("Operation stopped by user","AbortError");let{done:re,value:H}=await se.read();if(re)break;let D=ne.decode(H,{stream:!0}).split(`
+`);for(let P of D)if(P.startsWith("data: "))try{let A=JSON.parse(P.slice(6));if(A.type==="plan")he({...te,session:te.session+A.cost}),n==="planning"&&A.plan&&Ct(A.plan);else if(A.type==="title_update")ie("core/editor").editPost({title:A.title});else if(A.type==="status"){if(A.status==="complete")continue;u(O=>{let F=[...O],W=Y(F);return W!==-1&&(F[W]={...F[W],status:A.status,message:A.message,icon:A.icon}),F})}else if(A.type==="conversational"||A.type==="conversational_stream"){let O=(A.content||"").replace(/~~~ARTICLE~+/g,"").replace(/~~~ARTICLE~~~[\r\n]*/g,"").trim();if(!O||pn(O))continue;let F=ve.current||Dt(O);if(!F)continue;ve.current=F,F==="timeline"?cn(O):A.type==="conversational"?u(W=>[...W,{role:"assistant",content:O}]):u(W=>{let R=[...W],ee=R.length-1;return R[ee]&&R[ee].role==="assistant"?R[ee]={...R[ee],content:O}:R.push({role:"assistant",content:O}),R})}else if(A.type==="block"){let{insertBlocks:O}=ie("core/block-editor"),F;if(A.block.blockName==="core/paragraph"){let W=((f=(w=A.block.innerHTML)==null?void 0:w.match(/ (.*?)<\/p>/))==null?void 0:f[1])||"";F=s.blocks.createBlock("core/paragraph",{content:W})}else if(A.block.blockName==="core/heading"){let W=((p=A.block.attrs)==null?void 0:p.level)||2,R=((k=(m=A.block.innerHTML)==null?void 0:m.match(/(.*?)<\/h[1-6]>/))==null?void 0:k[1])||"";F=s.blocks.createBlock("core/heading",{level:W,content:R})}else if(A.block.blockName==="core/list"){let W=(A.block.innerBlocks||[]).map(R=>{var T,j;let ee=((j=(T=R.innerHTML)==null?void 0:T.match(/(.*?)<\/li>/))==null?void 0:j[1])||"";return s.blocks.createBlock("core/list-item",{content:ee})});F=s.blocks.createBlock("core/list",{...A.block.attrs||{},ordered:((N=A.block.attrs)==null?void 0:N.ordered)||!1},W)}else if(A.block.blockName==="core/quote"){let W=((_e=(Z=A.block.innerHTML)==null?void 0:Z.match(/(.*?)<\/p>/))==null?void 0:_e[1])||"";F=s.blocks.createBlock("core/quote",{value:W})}else if(A.block.blockName==="core/image")F=s.blocks.createBlock("core/image",A.block.attrs||{});else{let W=s.blocks.parse(A.block.innerHTML);F=W&&W.length>0?W[0]:null}F&&O(F)}else if(A.type==="complete")we(A),he({...te,session:te.session+A.totalCost}),u(O=>{let F=[...O],W=Y(F);return W!==-1&&(F[W]={...F[W],status:"complete",message:n==="planning"?"Outline ready.":"Article generation complete!"}),F}),n!=="planning"&&setTimeout(()=>{let F=V("core/block-editor").getBlocks().filter(W=>W.name==="core/image"&&W.attributes["data-agent-image-id"]);F.length>0&&window.dispatchEvent(new CustomEvent("wpaw:open-image-review-modal",{detail:{postId:C,sessionId:z,imageCount:F.length}}))},500);else if(A.type==="error")throw new Error(A.message)}catch(A){K.error("Failed to parse streaming data:",P,A)}}setTimeout(()=>{M(!1)},1500)}catch(E){Se(E)?u(se=>[...oe(se),{role:"system",type:"timeline",status:"stopped",message:"Generation stopped.",timestamp:new Date}]):u(se=>[...se,{role:"system",type:"error",content:"Error: "+E.message}]),M(!1)}finally{ke(y)}},rr=async()=>{var a,i,c,l,d,g,h,v;if(U)return;let e=Er(de);if(de.config_language){let y=de.config_language;y==="__custom__"&&de.config_language_custom&&(y=de.config_language_custom.toLowerCase().trim()),y&&y!=="__skipped__"&&ge("language",y)}if(de.config_all)try{let y=JSON.parse(de.config_all);y.web_search!==void 0&&ge("web_search",y.web_search),y.seo!==void 0&&ge("seo_enabled",y.seo),y.focus_keyword&&(ge("focus_keyword",y.focus_keyword),ge("seo_focus_keyword",y.focus_keyword)),y.secondary_keywords&&ge("seo_secondary_keywords",y.secondary_keywords)}catch(y){K.error("Failed to parse config answers:",y)}if(kr==="refinement"&&Rn){Nt(!1);let y=po(Te,de),_=`${Rn.message}${y}`,B=Rn.blocks||[];ps(null),br("generation"),await gt(_,B,{skipUserMessage:!0});return}let t=Ce||"chat",n=t==="planning"?"planning":"generation",r=Me(n,t==="planning"?"outline generation":"article generation");M(!0),Nt(!1),u(y=>[...oe(y),{role:"system",type:"timeline",status:"starting",message:t==="planning"?"Creating outline...":"Generating article...",timestamp:new Date}]);let o=null;try{let y=ao()||J.map(S=>typeof S.content=="string"?S.content:"").filter(Boolean).join(`
+`),_=await fetch(wpAgenticWriter.apiUrl+"/generate-plan",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({topic:y,context:"",postId:C,sessionId:z,clarificationAnswers:de,autoExecute:t!=="planning",stream:!0,articleLength:e.article_length,detectedLanguage:en,postConfig:e,chatHistory:ut()}),signal:r.signal});if(!_.ok){let S=await _.json();u(x=>[...x,{role:"system",type:"error",content:fe(S,"Failed to generate plan"),canRetry:!0,retryType:"generation"}]),M(!1);return}ve.current=null;let B=Ke(_.body.getReader()),b=new TextDecoder;for(o=setTimeout(()=>{U&&(K.error("Generation timeout - no response received"),u(S=>[...S,{role:"system",type:"error",content:fe("cURL error 28: Operation timed out after 120000 milliseconds","Failed to generate plan"),canRetry:!0,retryType:"generation"}]),M(!1),B.cancel())},12e4);;){if(ue.current||r.signal.aborted)throw await B.cancel().catch(()=>{}),new DOMException("Operation stopped by user","AbortError");let{done:S,value:x}=await B.read();if(S)break;let q=b.decode(x,{stream:!0}).split(`
+`);for(let G of q)if(G.startsWith("data: "))try{let L=JSON.parse(G.slice(6));if(L.type==="plan")he({...te,session:te.session+L.cost}),t==="planning"&&L.plan&&Ct(L.plan);else if(L.type==="title_update")ie("core/editor").editPost({title:L.title});else if(L.type==="status"){if(L.status==="complete")continue;u(w=>{let f=[...w],p=Y(f);return p!==-1&&(f[p]={...f[p],status:L.status,message:L.message,icon:L.icon}),f})}else if(L.type==="conversational"||L.type==="conversational_stream"){let w=(L.content||"").replace(/~~~ARTICLE~+/g,"").replace(/~~~ARTICLE~~~[\r\n]*/g,"").trim();if(!w||pn(w))continue;let f=ve.current||Dt(w);if(!f)continue;ve.current=f,f==="timeline"?cn(w):L.type==="conversational"?u(p=>[...p,{role:"assistant",content:w}]):u(p=>{let m=[...p],k=m.length-1;return m[k]&&m[k].role==="assistant"?m[k]={...m[k],content:w}:m.push({role:"assistant",content:w}),m})}else if(L.type==="block"){let{insertBlocks:w}=ie("core/block-editor"),f;if(L.block.blockName==="core/paragraph"){let p=((i=(a=L.block.innerHTML)==null?void 0:a.match(/ (.*?)<\/p>/))==null?void 0:i[1])||"";f=s.blocks.createBlock("core/paragraph",{content:p})}else if(L.block.blockName==="core/heading"){let p=((c=L.block.attrs)==null?void 0:c.level)||2,m=((d=(l=L.block.innerHTML)==null?void 0:l.match(/(.*?)<\/h[1-6]>/))==null?void 0:d[1])||"";f=s.blocks.createBlock("core/heading",{level:p,content:m})}else if(L.block.blockName==="core/list"){let p=(L.block.innerBlocks||[]).map(m=>{var N,Z;let k=((Z=(N=m.innerHTML)==null?void 0:N.match(/(.*?)<\/li>/))==null?void 0:Z[1])||"";return s.blocks.createBlock("core/list-item",{content:k})});f=s.blocks.createBlock("core/list",{...L.block.attrs||{},ordered:((g=L.block.attrs)==null?void 0:g.ordered)||!1},p)}else if(L.block.blockName==="core/quote"){let p=((v=(h=L.block.innerHTML)==null?void 0:h.match(/(.*?)<\/p>/))==null?void 0:v[1])||"";f=s.blocks.createBlock("core/quote",{value:p})}else L.block.blockName==="core/image"&&(f=s.blocks.createBlock("core/image",L.block.attrs||{}));f&&w(f)}else L.type==="complete"?(we(L),clearTimeout(o),he({...te,session:te.session+L.totalCost}),u(w=>{let f=[...w],p=Y(f);return p!==-1&&(f[p]={...f[p],status:"complete",message:t==="planning"?"Outline ready.":"Article generated successfully!"}),f}),M(!1)):L.type==="error"&&(clearTimeout(o),u(w=>[...w,{role:"system",type:"error",content:fe(L.message||"An error occurred during article generation","Failed to generate plan"),canRetry:!0,retryType:"generation"}]),M(!1))}catch(L){K.error("Failed to parse streaming data:",G,L)}clearTimeout(o)}}catch(y){o&&clearTimeout(o),Se(y)?u(_=>[...oe(_),{role:"system",type:"timeline",status:"stopped",message:"Generation stopped.",timestamp:new Date}]):(K.error("Article generation error:",y),u(_=>[..._,{role:"system",type:"error",content:fe(y,"Failed to generate article"),canRetry:!0,retryType:"generation"}])),M(!1)}finally{ke(n)}},Ro=()=>{if(!Zt||Te.length===0)return null;let e=Te[Ae],t=de[e.id]||"",n=()=>{let c=`${e.id}_custom`,l=de[c]||"",d=t==="__custom__";return s.element.createElement("div",{className:"wpaw-answer-options"},e.options.map((g,h)=>{let v=t===g.value;return s.element.createElement("label",{key:h},s.element.createElement("input",{type:"radio",name:e.id,checked:v,onChange:()=>{let y={...de};y[e.id]=g.value,Ne(y)}}),s.element.createElement("span",null,g.value))}),s.element.createElement("div",{className:"wpaw-custom-answer-wrapper",key:"custom"},s.element.createElement("label",null,s.element.createElement("input",{type:"radio",name:e.id,checked:d,onChange:()=>{let g={...de};g[e.id]="__custom__",Ne(g)}}),s.element.createElement("span",null,"Other (specify):")),d&&s.element.createElement("textarea",{className:"wpaw-custom-text-input",placeholder:"Type your answer here...",value:l,rows:3,onChange:g=>{let h={...de};h[c]=g.target.value,Ne(h)},autoFocus:!0,style:{resize:"vertical"}})))},r=()=>{let c=t?t.split(", "):[];return s.element.createElement("div",{className:"wpaw-answer-options"},e.options.map((l,d)=>{let g=c.includes(l.value);return s.element.createElement("label",{key:d},s.element.createElement("input",{type:"checkbox",checked:g,onChange:()=>{let h={...de},v=g?c.filter(y=>y!==l.value):[...c,l.value];h[e.id]=v.join(", "),Ne(h)}}),s.element.createElement("span",null,l.value))}))},o=()=>s.element.createElement("div",{className:"wpaw-answer-options"},s.element.createElement(es,{placeholder:e.placeholder||"Type your answer here...",value:t,onChange:c=>{let l={...de};l[e.id]=c,Ne(l)},rows:4,maxLength:e.max_length||500})),a=()=>{let c={};if(t)try{c=JSON.parse(t)}catch{c={}}let l=e.fields||[];if(l.forEach(d=>{c[d.id]===void 0&&d.default!==void 0&&(c[d.id]=d.default)}),!t&&Object.keys(c).length>0){let d={...de};d[e.id]=JSON.stringify(c),Ne(d)}return s.element.createElement("div",{className:"wpaw-config-form"},l.map((d,g)=>{let h=c[d.id]!==void 0?c[d.id]:d.default;return d.conditional&&!c[d.conditional]?null:s.element.createElement("div",{key:g,className:"wpaw-config-field"},d.type==="toggle"?s.element.createElement(React.Fragment,null,s.element.createElement("label",{className:"wpaw-config-label"},s.element.createElement("span",{className:"wpaw-config-label-text"},d.label),d.description&&s.element.createElement("span",{className:"wpaw-config-description"},d.description)),s.element.createElement("label",{className:"wpaw-config-toggle"},s.element.createElement("input",{type:"checkbox",checked:h||!1,onChange:y=>{let _={...c};_[d.id]=y.target.checked;let B={...de};B[e.id]=JSON.stringify(_),Ne(B)}}),s.element.createElement("span",{className:"wpaw-toggle-slider"}))):s.element.createElement(React.Fragment,null,s.element.createElement("label",{className:"wpaw-config-label"},s.element.createElement("span",{className:"wpaw-config-label-text"},d.label),d.description&&s.element.createElement("span",{className:"wpaw-config-description"},d.description)),s.element.createElement("input",{type:"text",className:"wpaw-config-text-input",placeholder:d.placeholder||"",value:h||"",maxLength:d.max_length||200,onChange:y=>{let _={...c};_[d.id]=y.target.value;let B={...de};B[e.id]=JSON.stringify(_),Ne(B)}})))}))},i;switch(e.type){case"single_choice":i=n();break;case"multiple_choice":i=r();break;case"open_text":i=o();break;case"config_form":i=a();break;default:i=n()}return s.element.createElement("div",{className:"wpaw-clarification-quiz dark-theme"},s.element.createElement("div",{className:"wpaw-quiz-header"},s.element.createElement("h3",null," Clarification Questions"),s.element.createElement("div",{className:"wpaw-progress-bar"},s.element.createElement("div",{className:"wpaw-progress-fill",style:{width:(Ae+1)/Te.length*100+"%"}})),s.element.createElement("span",null,`${Ae+1} of ${Te.length}`)),s.element.createElement("div",{className:"wpaw-question-card"},s.element.createElement("h4",null,e.question),i,s.element.createElement("div",{className:"wpaw-quiz-actions"},Ae>0&&s.element.createElement(me,{isSecondary:!0,onClick:()=>yt(Ae-1),disabled:U},"Previous"),s.element.createElement(me,{isSecondary:!0,onClick:()=>{let c={...de};c[e.id]="__skipped__",Ne(c),Ae===Te.length-1?rr():yt(Ae+1)},disabled:U},"Skip"),s.element.createElement(me,{isPrimary:!0,onClick:()=>{Ae===Te.length-1?rr():yt(Ae+1)},disabled:U||!t.trim()&&t!=="__custom__"},Ae===Te.length-1?"Finish":"Next"))))},Zo=async()=>{if(!(U||mt))try{Ge(!0);let e=await fetch(wpAgenticWriter.apiUrl+"/conversations",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({post_id:C||0})});if(!e.ok)throw new Error("Failed to create a new conversation");let t=await e.json();z&&(dn(),Hs(z)),Ie.current&&(clearTimeout(Ie.current),Ie.current=null),De.current=!0,t!=null&&t.session_id&&nt(t.session_id),wt.current=JSON.stringify([]),u([]),Q.current=null,xe("chat"),Ye(!1),vs([]),lt(""),is(null),As({restored:!1,summary:"",memories:[],preferences:[],systemMessage:""});let n=await un();t!=null&&t.session_id&&(ns(r=>r.some(o=>(o==null?void 0:o.session_id)===t.session_id)?r:[t,...r]),Wt(t.session_id).then(r=>{r&&Ot(t.session_id)})),setTimeout(()=>{De.current=!1,ye.current&&ye.current.focus()},50)}catch{u(t=>[...t,{role:"system",type:"error",content:"Error: Failed to start a new conversation."}])}finally{Ge(!1)}},Bo=async e=>{var t,n;if(!(!e||mt)&&window.confirm("Delete this session permanently?"))try{if(Ge(!0),!(await fetch(`${wpAgenticWriter.apiUrl}/conversations/${e}`,{method:"DELETE",headers:{"X-WP-Nonce":wpAgenticWriter.nonce}})).ok)throw new Error("Failed to delete session");let o=await un();if(z===e){let a=((t=o[0])==null?void 0:t.session_id)||"";nt(a),u(Array.isArray((n=o[0])==null?void 0:n.messages)?o[0].messages:[])}}catch{u(o=>[...o,{role:"system",type:"error",content:"Error: Failed to delete session."}])}finally{Ge(!1)}},or=(e,t)=>{if(e!=null&&e.title&&e.title.trim())return e.title.trim();let n=Array.isArray(e==null?void 0:e.messages)?e.messages.find(o=>(o==null?void 0:o.role)==="user"&&typeof(o==null?void 0:o.content)=="string"&&o.content.trim()):null;if(n!=null&&n.content)return n.content.trim().slice(0,56);let r=(e==null?void 0:e.updated_at)||(e==null?void 0:e.last_activity)||"";if(r){let o=new Date(r);if(!Number.isNaN(o.getTime()))return`Session ${t+1} - ${o.toLocaleDateString()}`}return`Session ${t+1}`},To=e=>{let t=String((e==null?void 0:e.status)||"active").toLowerCase();return t==="completed"?"Continuable":t==="archived"?"Archived":"Active"},ea=e=>{let t=Number((e==null?void 0:e.id)||0),n=String((e==null?void 0:e.session_id)||"-"),r=Number((e==null?void 0:e.post_id)||0),o=String((e==null?void 0:e.status)||"active"),a=String((e==null?void 0:e.post_status)||"").toLowerCase();return`id: ${t||"-"} | sid: ${n} | post_id: ${r} | post: ${r===0?"unassigned":a||"unknown"} | session: ${o}`},$o=()=>{let e=ft.length>0?ft[0]:null;return s.element.createElement("div",{className:"wpaw-welcome-screen"},s.element.createElement("div",{className:"wpaw-welcome-content"},s.element.createElement("span",{className:"wpaw-welcome-icon",dangerouslySetInnerHTML:{__html:''}}),s.element.createElement("h2",{className:"wpaw-welcome-title"},"Agentic Writer"),s.element.createElement("p",{className:"wpaw-welcome-subtitle"},"What are we writing today?"),e&&s.element.createElement("button",{className:"wpaw-welcome-pill",style:{width:"100%",marginBottom:"12px"},disabled:mt,onClick:()=>Us(e.session_id||"")},`\u21A9 Continue: ${or(e,0)}`),ft.length>1&&s.element.createElement("details",{style:{marginBottom:"12px",width:"100%"}},s.element.createElement("summary",{style:{fontSize:"12px",color:"#8b95a5",cursor:"pointer",marginBottom:"8px"}},`${ft.length-1} more session${ft.length>2?"s":""}`),s.element.createElement("div",{className:"wpaw-session-list"},ft.slice(1).map((t,n)=>{var r;return s.element.createElement("div",{key:t.session_id||n,className:"wpaw-welcome-pill",style:{width:"100%",marginBottom:"6px",display:"flex",alignItems:"center",justifyContent:"space-between",gap:"8px"}},s.element.createElement("button",{type:"button",disabled:mt,className:"wpaw-session-open-btn",style:{flex:1,background:"transparent",border:"none",color:"inherit",textAlign:"left",cursor:mt?"wait":"pointer"},onClick:()=>Us(t.session_id||"")},s.element.createElement("div",null,or(t,n+1)),s.element.createElement("div",{style:{opacity:.7,fontSize:"11px"}},`${Number((r=t==null?void 0:t.message_count)!=null?r:Array.isArray(t==null?void 0:t.messages)?t.messages.length:0)} msgs \xB7 ${To(t)}`)),s.element.createElement("button",{type:"button",title:"Delete session",disabled:mt,style:{background:"transparent",border:"1px solid rgba(255,255,255,0.25)",color:"inherit",borderRadius:"6px",padding:"2px 6px",cursor:"pointer"},onClick:()=>Bo(t.session_id)},"\xD7"))}))),s.element.createElement("input",{type:"text",className:"wpaw-welcome-input",placeholder:"Focus keyword (optional)",value:Dn,onChange:t=>Nr(t.target.value),onKeyDown:t=>{t.key==="Enter"&&Ps()}}),s.element.createElement("div",{className:"wpaw-welcome-pills"},s.element.createElement("button",{className:"wpaw-welcome-pill"+(Fn==="chat"?" active":""),onClick:()=>_s("chat")},"Explore First"),s.element.createElement("button",{className:"wpaw-welcome-pill"+(Fn==="planning"?" active":""),onClick:()=>_s("planning")},"Start Outline")),s.element.createElement(me,{isPrimary:!0,onClick:Ps,className:"wpaw-welcome-start-btn"},"Start Writing")))},Eo=()=>s.element.createElement("div",{className:"wpaw-writing-empty-state"},s.element.createElement("div",{className:"wpaw-empty-state-content"},s.element.createElement("span",{className:"wpaw-empty-state-icon",dangerouslySetInnerHTML:{__html:''}}),s.element.createElement("h3",null,"Create an Outline First"),s.element.createElement("p",null,"Before writing, the agent needs an outline to structure the article and keep costs predictable. Ask for the article topic and the agent will create one first."),s.element.createElement(me,{isPrimary:!0,onClick:()=>xe("planning"),className:"wpaw-empty-state-button"},s.element.createElement("div",{style:{display:"inline-flex",alignItems:"center",gap:"8px"}},s.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24"},s.element.createElement("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1",d:"M16 5H3m13 7H3m8 7H3m12-1l2 2l4-4"})),"Create Outline")),s.element.createElement("p",{className:"wpaw-empty-state-hint",style:{marginTop:"16px",fontSize:"13px",color:"#a7aaad"}},"Tip: tell the agent what you want to publish, then approve or adjust the outline before writing."))),ta=()=>{let e=Ee&&Ee.length>0;return bs?s.element.createElement("div",{className:"wpaw-focus-keyword-bar wpaw-expanded"},s.element.createElement("div",{className:"wpaw-fk-header"},s.element.createElement("span",null,"\u{1F3AF} FOCUS KEYWORD"),s.element.createElement("button",{className:"wpaw-fk-collapse",onClick:()=>On(!1),title:"Collapse"},"\u2193")),s.element.createElement("div",{className:"wpaw-fk-main-input"},s.element.createElement("input",{type:"text",className:"wpaw-fk-custom-input",placeholder:e?"Edit focus keyword...":"Enter focus keyword...",value:Ee||"",onChange:t=>{let n=t.target.value;lt(n)},onBlur:t=>{t.target.value!==I.focus_keyword&&Je(t.target.value)},onKeyDown:t=>{t.key==="Enter"&&t.target.value.trim()&&(Je(t.target.value.trim()),t.target.blur())}})),ws.length>0&&s.element.createElement("div",{className:"wpaw-fk-suggestions"},s.element.createElement("div",{className:"wpaw-fk-suggestions-label"},"\u{1F4DD} AI Suggestions:"),ws.map((t,n)=>s.element.createElement("div",{key:n,className:"wpaw-fk-suggestion-item"+(t===Ee?" selected":""),onClick:()=>Je(t)},s.element.createElement("span",{className:"wpaw-fk-radio"},t===Ee?"\u25CF":"\u25CB"),s.element.createElement("span",{className:"wpaw-fk-suggestion-text"},t),s.element.createElement("span",{className:"wpaw-fk-suggestion-source"},`(#${n+1})`)))),s.element.createElement("div",{className:"wpaw-fk-stats"},s.element.createElement("span",null,`\u{1F4B0} $${(te.session||0).toFixed(4)}`),be&&s.element.createElement("span",{className:"wpaw-provider-info",title:be.warnings.length>0?be.warnings.join("; "):"AI provider used"},be.fallbackUsed?" \u26A0\uFE0F "+(be.provider||"fallback"):" \u{1F4E1} "+(be.provider||"AI")),s.element.createElement("span",{className:"wpaw-fk-divider"},"\u2502"),s.element.createElement("span",null,`\u{1F4CA} ~${J.filter(t=>t.role!=="system").length*500} tokens`))):s.element.createElement("div",{className:"wpaw-focus-keyword-bar wpaw-compact"},s.element.createElement("div",{className:"wpaw-fk-left"},s.element.createElement("span",{className:"wpaw-fk-icon"},"\u{1F3AF}"),s.element.createElement("input",{type:"text",className:"wpaw-fk-input",placeholder:"Enter focus keyword...",value:Ee||"",onChange:t=>{let n=t.target.value;lt(n),We.current&&clearTimeout(We.current),We.current=setTimeout(()=>{Je(n)},500)},onBlur:t=>{t.target.value!==I.focus_keyword&&Je(t.target.value)},disabled:U})),s.element.createElement("span",{className:"wpaw-fk-cost"},`$${(te.session||0).toFixed(4)}`,be&&s.element.createElement("span",{className:"wpaw-provider-badge",title:be.warnings.length>0?be.warnings.join("; "):"AI provider"},be.fallbackUsed?"\u26A0":"\u{1F4E1}")),s.element.createElement("button",{className:"wpaw-fk-expand",onClick:()=>On(!0),title:"Expand"},s.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},s.element.createElement("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",d:"m7 15l5 5l5-5M7 9l5-5l5 5"}))))},Mo=()=>{let e=Ys(),t=J.filter(c=>c.role==="user"||c.role==="assistant").length,n=be!=null&&be.provider?`${be.provider}${be.model?` / ${be.model}`:""}`:"Provider not used yet",r=$e.status&&$e.status!=="idle"?$e.status:Ue.status||"idle",o=$e.status&&$e.status!=="idle"?`${$e.status==="stopping"?"Stopping":"Running"} ${$e.label||$e.type}`:vr?"Loading...":String(Ue.status||"idle").replace(/_/g," "),a=!U&&Q.current&&["in_progress","paused","failed"].includes(Ue.status),i=Et.selectedBlockPreview?`: ${Et.selectedBlockPreview}`:"";return s.element.createElement("div",{className:`wpaw-agent-workspace-card${rn?" is-collapsed":""}`},s.element.createElement("div",{className:"wpaw-agent-workspace-header"},s.element.createElement("div",{className:"wpaw-agent-workspace-heading"},s.element.createElement("div",{className:"wpaw-agent-workspace-kicker"},"Agent Workspace"),s.element.createElement("div",{className:"wpaw-agent-workspace-title"},Et.title||"Untitled draft")),s.element.createElement("div",{className:"wpaw-agent-workspace-actions"},s.element.createElement("span",{className:`wpaw-agent-workspace-status status-${r}`},o))),!rn&&s.element.createElement("div",{className:"wpaw-agent-context-grid"},s.element.createElement("div",{className:"wpaw-agent-context-item"},s.element.createElement("span",null,"Post blocks"),s.element.createElement("strong",null,String(Et.blockCount||0))),s.element.createElement("div",{className:"wpaw-agent-context-item"},s.element.createElement("span",null,"Outline"),s.element.createElement("strong",null,e.label)),s.element.createElement("div",{className:"wpaw-agent-context-item"},s.element.createElement("span",null,"Selected"),s.element.createElement("strong",null,`${Et.selectedBlockLabel}${i}`)),s.element.createElement("div",{className:"wpaw-agent-context-item"},s.element.createElement("span",null,"Focus keyword"),s.element.createElement("input",{type:"text",className:"wpaw-agent-keyword-input",placeholder:"Optional",value:Ee||"",onChange:c=>{let l=c.target.value;lt(l),We.current&&clearTimeout(We.current),We.current=setTimeout(()=>{Je(l)},500)},onBlur:c=>{c.target.value!==I.focus_keyword&&Je(c.target.value)},disabled:U})),s.element.createElement("div",{className:"wpaw-agent-context-item"},s.element.createElement("span",null,"Conversation"),s.element.createElement("strong",null,`${t} message${t===1?"":"s"}`)),s.element.createElement("div",{className:"wpaw-agent-context-item"},s.element.createElement("span",null,"Provider"),s.element.createElement("strong",null,n))),!rn&&a&&s.element.createElement("div",{className:"wpaw-agent-resume-card"},s.element.createElement("div",null,s.element.createElement("strong",null,Ue.status==="failed"?"Writing can be retried":"Writing can resume"),s.element.createElement("span",null,`Last saved section: ${Ue.current_section_index||0}`)),s.element.createElement(me,{isPrimary:!0,isSmall:!0,onClick:()=>Ft({retry:!0,skipConfirm:!0})},Ue.status==="failed"?"Retry":"Resume")))},Po=e=>{if(!e||e==="continue_chat")return null;let n={create_outline:{icon:"\u{1F4DD}",title:"Ready to create an outline?",description:"I'll generate a structured outline based on our conversation.",button:"Create Outline Now",onClick:async()=>{xe("planning");let r=Ee||I.focus_keyword||I.seo_focus_keyword,o=J.find(l=>l.role==="user"),a=r||(o?o.content.substring(0,100):"");pe(""),M(!0),u(l=>[...oe(l),{role:"system",type:"timeline",status:"checking",message:"Analyzing request...",timestamp:new Date}]);let i=en,c=Me("planning","outline generation");try{K.log("[WPAW] Calling clarity check with topic:",a);let l=await fetch(wpAgenticWriter.apiUrl+"/check-clarity",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({topic:a||"article outline",answers:[],postId:C,sessionId:z,mode:"generation",postConfig:I,chatHistory:ut()}),signal:c.signal});if(K.log("[WPAW] Clarity response status:",l.status),!l.ok){let h=await l.text();throw K.error("[WPAW] Clarity check failed:",h),new Error("Clarity check failed: "+h)}let d=await l.json();we(d);let g=d.result;if(K.log("[WPAW] Clarity result:",g),g.detected_language&&(i=g.detected_language,ms(g.detected_language)),g.questions&&g.questions.length>0){K.log("[WPAW] Showing quiz with",g.questions.length,"questions"),In(g.questions),Nt(!0),yt(0),Ne([]),M(!1),u(h=>{let v=[...h],y=Y(v);return y!==-1&&(v[y]={...v[y],status:"waiting",message:"Waiting for clarification..."}),v}),ke("planning");return}else K.warn("[WPAW] No questions returned from clarity check!")}catch(l){K.error("[WPAW] Clarity check error:",l),Se(l)||ue.current||c.signal.aborted?u(d=>[...oe(d),{role:"system",type:"timeline",status:"stopped",message:"Outline generation stopped by user.",timestamp:new Date}]):u(d=>[...d,{role:"system",type:"error",content:"Clarity check failed. Please try again.",canRetry:!0}]),M(!1),ke("planning");return}u(l=>{let d=[...l],g=Y(d);return g!==-1&&(d[g]={...d[g],status:"starting",message:"Creating outline..."}),d});try{let l=await fetch(wpAgenticWriter.apiUrl+"/generate-plan",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpAgenticWriter.nonce},body:JSON.stringify({topic:a||"article outline",context:"",postId:C,sessionId:z,answers:[],autoExecute:!1,stream:!0,articleLength:I.article_length,detectedLanguage:i,postConfig:I,chatHistory:ut()}),signal:c.signal});if(!l.ok){let h=await l.json();u(v=>[...v,{role:"system",type:"error",content:fe(h,"Failed to generate outline"),canRetry:!0,retryType:"generation"}]),M(!1),ke("planning");return}ve.current=null;let d=Ke(l.body.getReader()),g=new TextDecoder;for(;;){if(ue.current||c.signal.aborted)throw new DOMException("Outline generation stopped","AbortError");let{done:h,value:v}=await d.read();if(h)break;let _=g.decode(v,{stream:!0}).split(`
+`);for(let B of _)if(B.startsWith("data: "))try{let b=JSON.parse(B.slice(6));if(b.type==="plan")he(S=>({...S,session:S.session+(b.cost||0)})),b.plan&&Ct(b.plan,{suggestKeywords:!0});else if(b.type==="status"){if(b.status==="complete")continue;u(S=>{let x=[...S],$=Y(x);return $!==-1&&(x[$]={...x[$],status:b.status,message:b.message,icon:b.icon}),x})}}catch(b){K.error("Failed to parse streaming data:",b)}}if(ue.current||c.signal.aborted)throw new DOMException("Outline generation stopped","AbortError");M(!1),ke("planning")}catch(l){Se(l)||ue.current||c.signal.aborted?u(d=>[...oe(d),{role:"system",type:"timeline",status:"stopped",message:"Outline generation stopped by user.",timestamp:new Date}]):u(d=>[...d,{role:"system",type:"error",content:fe(l,"Failed to generate outline"),canRetry:!0,retryType:"generation"}]),M(!1),ke("planning")}}}}[e];return n?s.element.createElement("div",{className:"wpaw-contextual-action"},s.element.createElement("div",{className:"wpaw-action-icon"},n.icon),s.element.createElement("div",{className:"wpaw-action-content"},s.element.createElement("h4",null,n.title),s.element.createElement("p",null,n.description),s.element.createElement(me,{isPrimary:!0,onClick:n.onClick},n.button))):null},Lo=()=>{let e=l=>l==null?"":typeof l=="string"||typeof l=="number"?String(l):JSON.stringify(l),t=l=>String(l).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'"),n=l=>{let d=t(l);return d=d.replace(/\[([^\]]+)\]\(([^)]+)\)/g,(g,h,v)=>`${h}`),d=d.replace(/`([^`]+)`/g,(g,h)=>`${t(h)}`),d=d.replace(/\*\*([^*]+)\*\*/g,"$1"),d=d.replace(/__([^_]+)__/g,"$1"),d=d.replace(/\*([^*]+)\*/g,"$1"),d=d.replace(/_([^_]+)_/g,"$1"),d},r=l=>{let d=e(l);if(!d)return"";if(window.markdownit&&window.DOMPurify){if(!En.current){let f=window.markdownit({html:!1,linkify:!0,breaks:!1});window.markdownitTaskLists&&f.use(window.markdownitTaskLists,{enabled:!0,label:!0,labelAfter:!0});let p=f.renderer.rules.link_open||function(m,k,N,Z,_e){return _e.renderToken(m,k,N)};f.renderer.rules.link_open=function(m,k,N,Z,_e){let E=m[k],se=E.attrIndex("target");se<0?E.attrPush(["target","_blank"]):E.attrs[se][1]="_blank";let ne=E.attrIndex("rel");return ne<0?E.attrPush(["rel","noopener noreferrer"]):E.attrs[ne][1]="noopener noreferrer",p(m,k,N,Z,_e)},En.current=f}let w=En.current.render(d);return window.DOMPurify.sanitize(w,{USE_PROFILES:{html:!0},ADD_TAGS:["input","label"],ADD_ATTR:["type","checked","disabled","class"]})}let g=[],v=d.replace(/```(\w+)?\n([\s\S]*?)```/g,(w,f,p)=>{let m=f?` class="language-${t(f)}"`:"",k=g.length;return g.push(` ${t(p)} `),`@@CODEBLOCK${k}@@`}).split(/\r?\n/),y="",_=[],B=null,b=!1,S=!1,x=()=>{_.length&&(y+=`${n(_.join(" "))} `,_=[])},$=()=>{if(B){let w=B.items.map(f=>{let p=f.details&&f.details.length>0?f.details.map(k=>`${n(k)} `).join(""):"",m=f.children&&f.children.length>0?`${f.children.map(k=>`- ${n(k)}
`).join("")} `:"";return`${n(f.content)}${p}${m}`}).join("");y+=`<${B.type}>${w}`,B=null}},q=(w,f)=>{w.items.push({content:f,children:[],details:[]}),S=!0},G=(w,f,p)=>{let m=w.items[w.items.length-1];m&&(p||m.details.length===0?m.details.push(f):m.details[m.details.length-1]+=` ${f}`,S=!1)},L=w=>/^\d+\.\s+/.test(w)?"ol":/^[-*+]\s+/.test(w)?"ul":null;for(let w=0;w${n(p[2])}`,S=!1;continue}let m=f.match(/^[-*+]\s+(.*)$/),k=f.match(/^\d+\.\s+(.*)$/);if(m||k){x(),b=!1;let N=k?"ol":"ul",Z=(k?k[1]:m[1])||"";if(k&&(Z=Z.replace(/^\d+\.\s+/,"")),!k&&B&&B.type==="ol"&&B.items.length>0){B.items[B.items.length-1].children.push(Z);continue}(!B||B.type!==N)&&($(),B={type:N,items:[]}),q(B,Z);continue}if(B&&B.type==="ol"&&(S||b)){G(B,f,b),b=!1;continue}B&&$(),_.push(f),S=!1}return $(),x(),g.forEach((w,f)=>{y=y.replace(`@@CODEBLOCK${f}@@`,w)}),y},o=(l,d)=>d?s.element.createElement(gr,null,r(l)):e(l),a=Y(J),i=[],c=null;return J.forEach((l,d)=>{if(l.role==="user"){i.push({type:"user",message:l,key:`user-${d}`}),c=null;return}c||(c={type:"ai",items:[],key:`ai-${d}`},i.push(c)),c.items.push({message:l,index:d})}),i.map((l,d)=>{if(l.type==="user")return s.element.createElement("div",{key:l.key,className:"wpaw-message wpaw-message-user"},s.element.createElement("div",{className:"wpaw-message-content"},o(l.message.content,!1)));let g=d===i.length-1,h="Streaming...";for(let v=l.items.length-1;v>=0;v--){let y=l.items[v].message;if(y.type==="timeline"&&y.status){y.status==="checking"?h="Analyzing...":y.status==="planning"||y.status==="plan_complete"?h="Planning...":y.status==="writing"||y.status==="writing_section"?h="Writing...":y.status==="refining"?h="Refining...":h="Streaming...";break}}return s.element.createElement("div",{key:l.key,className:"wpaw-ai-response"},l.items.map((v,y)=>{var S;let _=v.message,B=v.index,b=y===l.items.length-1;if(_.type==="timeline"){let x=_.status==="complete"?"complete":_.status==="inactive"?"inactive":"active",$=U&&_.status==="refining",q=_.status==="complete"&&_.timestamp&&_.completedAt?((new Date(_.completedAt)-new Date(_.timestamp))/1e3).toFixed(1)+"s":null;return s.element.createElement("div",{key:`timeline-${B}`,className:"wpaw-ai-item wpaw-timeline-entry "+x+(B===a?" is-current":"")},s.element.createElement("div",{className:"wpaw-timeline-dot","aria-hidden":"true"}),s.element.createElement("div",{className:"wpaw-timeline-content"},s.element.createElement("div",{className:"wpaw-timeline-message"},e(_.message)),_.status==="complete"&&s.element.createElement("div",{className:"wpaw-timeline-complete-row",style:{display:"flex",justifyContent:"space-between",alignItems:"center"}},s.element.createElement("div",{className:"wpaw-timeline-complete"},"\u2713 Complete",q&&s.element.createElement("span",{className:"wpaw-timeline-elapsed"},` (${q})`)),qe.length>0&&g&&b&&(_.message.toLowerCase().includes("refine")||_.message.toLowerCase().includes("generated"))&&s.element.createElement("button",{className:"wpaw-inline-undo-btn",onClick:$s,disabled:U,title:`Undo: ${((S=qe[qe.length-1])==null?void 0:S.label)||"Last AI operation"}`,style:{background:"transparent",border:"none",color:"var(--aw-primary)",cursor:U?"not-allowed":"pointer",fontSize:"11px",fontFamily:"inherit",fontWeight:"500",display:"flex",alignItems:"center",gap:"4px",padding:"2px 6px",borderRadius:"4px"}},s.element.createElement("span",{dangerouslySetInnerHTML:{__html:''}}),"Undo")),$&&s.element.createElement("div",{className:"wpaw-processing-indicator"},s.element.createElement("span",{className:"wpaw-dots-loader"}),s.element.createElement("span",null,"Processing updates\u2026")),!$&&U&&g&&b&&s.element.createElement("div",{className:"wpaw-typing-indicator","aria-label":"Agent is typing"},h,s.element.createElement("span",{className:"wpaw-typing-dots"},s.element.createElement("span",null),s.element.createElement("span",null),s.element.createElement("span",null)))))}if(_.type==="plan"){let x=Gn(_.plan),$=Array.isArray(x==null?void 0:x.sections)?x.sections:[],q=m=>{if(m.description)return m.description;if(Array.isArray(m.content)&&m.content.length>0){let k=m.content.find(N=>N&&N.content);return k?k.content:""}return""},G=$.filter(m=>m.status!=="done").length,L=G?`Write ${G} Pending`:"Write Article",w=[],f=I.language==="auto"?"Auto-detect":I.language.charAt(0).toUpperCase()+I.language.slice(1);w.push(`\u{1F30D} Language: ${f}`);let p={short:"Short (~800 words)",medium:"Medium (~1500 words)",long:"Long (~2500 words)"};if(w.push(`\u{1F4CF} Length: ${p[I.article_length]||"Medium"}`),I.audience&&w.push(`\u{1F465} Audience: ${I.audience}`),I.web_search&&w.push("\u{1F50D} Web Search: Enabled"),I.seo_enabled){let m=[];I.seo_focus_keyword&&m.push(`Focus: "${I.seo_focus_keyword}"`),I.seo_secondary_keywords&&m.push(`Secondary: "${I.seo_secondary_keywords}"`),w.push(`\u{1F4CA} SEO: Enabled${m.length?" ("+m.join(", ")+")":""}`)}return s.element.createElement("div",{key:`plan-${B}`,className:"wpaw-ai-item wpaw-plan-card"},s.element.createElement("div",{className:"wpaw-plan-title"},(x==null?void 0:x.title)||"Proposed Outline"),s.element.createElement("div",{className:"wpaw-plan-config-summary"},w.map((m,k)=>s.element.createElement("div",{key:k,className:"wpaw-config-summary-item"},m))),$.length>0&&s.element.createElement("ol",{className:"wpaw-plan-sections"},$.map((m,k)=>s.element.createElement("li",{key:`plan-section-${k}`,className:`wpaw-plan-section ${m.status||"pending"}`},s.element.createElement("div",{className:"wpaw-plan-section-row"},s.element.createElement("input",{className:"wpaw-plan-section-check",type:"checkbox",checked:m.status==="done",readOnly:!0,disabled:!0}),s.element.createElement("div",{className:"wpaw-plan-section-body"},s.element.createElement("div",{className:"wpaw-plan-section-title"},m.title||m.heading||`Section ${k+1}`),q(m)&&s.element.createElement("div",{className:"wpaw-plan-section-desc"},q(m))),s.element.createElement("div",{className:"wpaw-plan-section-status"},m.status==="done"?"Done":m.status==="in_progress"?"Writing":"Pending"))))),!$.length&&(x==null?void 0:x.summary)&&s.element.createElement("div",{className:"wpaw-plan-section-desc"},x.summary),s.element.createElement("div",{className:"wpaw-plan-actions"},s.element.createElement(me,{isPrimary:!0,onClick:Ft,disabled:U},L)))}if(_.type==="edit_plan"){let x=_.plan||It,$=!!It&&x===It,q=fn(x),G=V("core/block-editor").getBlocks(),L=new Set(G.map(k=>k.clientId)),w=q.filter(k=>!(k.action==="keep"||k.blockId&&!L.has(k.blockId))),f=w.length,p=(x==null?void 0:x.summary)||`Proposed changes: ${f}`,m=w.map((k,N)=>Vr(k,N));return s.element.createElement("div",{key:`plan-${B}`,className:"wpaw-ai-item wpaw-edit-plan"},s.element.createElement("div",{className:"wpaw-edit-plan-title"},"Proposed Changes"),s.element.createElement("div",{className:"wpaw-edit-plan-summary"},p),m.length>0&&s.element.createElement("div",{className:"wpaw-edit-plan-preview-label"},"Apply preview"),m.length>0&&s.element.createElement("ol",{className:"wpaw-edit-plan-list"},m.map((k,N)=>s.element.createElement("li",{key:`plan-action-${N}`,className:"wpaw-edit-plan-item"},s.element.createElement("div",{className:"wpaw-edit-plan-item-title",style:{marginBottom:"6px"}},k.title),k.viewInEditor&&s.element.createElement("button",{type:"button",className:"wpaw-edit-plan-item-target",disabled:!$,title:"Scroll to changes in editor",onClick:()=>{if(!$||!k.blockId)return;ie("core/block-editor").selectBlock(k.blockId);let Z=document.querySelector(`[data-block="${k.blockId}"]`);Z&&Z.scrollIntoView({behavior:"smooth",block:"center"})}},"View in Editor \u{1F441}\uFE0F")))),s.element.createElement("div",{className:"wpaw-edit-plan-actions"},s.element.createElement(me,{isPrimary:!0,onClick:()=>fo(x),disabled:!x||!$},`Apply (${f})`),s.element.createElement(me,{isSecondary:!0,onClick:mo,disabled:!$},"Cancel")))}if(_.type==="error"){let x=()=>{if(_.retryType==="execute"){Jr();return}if(_.retryType==="refine"){Xr();return}if(_.retryType==="chat"){Gr();return}Kr()},$=_.content,q=$&&typeof $=="object"&&$.title;return s.element.createElement("div",{key:`error-${B}`,className:"wpaw-ai-item wpaw-message wpaw-message-error"},q?s.element.createElement("div",null,s.element.createElement("div",{className:"wpaw-error-title"},"\u26A0 ",$.title),$.detail&&s.element.createElement("div",{className:"wpaw-error-detail"},$.detail),$.actionUrl&&s.element.createElement("a",{href:$.actionUrl,target:"_blank",rel:"noopener",style:{display:"inline-block",marginTop:"8px",fontSize:"12px",color:"#fca5a5",textDecoration:"underline"}},$.actionLabel||"Open Settings")):s.element.createElement("div",{className:"wpaw-message-content"},o($,!0)),_.canRetry&&s.element.createElement(me,{isSecondary:!0,onClick:x},"\u21BB Retry"))}return s.element.createElement("div",{key:`response-${B}`,className:"wpaw-ai-item wpaw-response"},s.element.createElement("div",{className:"wpaw-response-content"},o(_.content,!0)),U&&g&&b&&s.element.createElement("div",{className:"wpaw-typing-indicator","aria-label":"Agent is typing"},h,s.element.createElement("span",{className:"wpaw-typing-dots"},s.element.createElement("span",null),s.element.createElement("span",null),s.element.createElement("span",null))),_.detectedIntent&&Po(_.detectedIntent),_.showResumeActions&&s.element.createElement("div",{className:"wpaw-resume-actions"},s.element.createElement(me,{isPrimary:!0,onClick:()=>{ot(!1),Ft()},style:{marginRight:"8px"}},`Resume Writing (${_.pendingCount} pending)`),s.element.createElement(me,{isSecondary:!0,onClick:()=>{ot(!1),xe("planning")}},"Review Outline")))}))})},Wo=()=>{var t,n,r;let e=U||Xt||vn;return s.element.createElement("div",{className:"wpaw-tab-content wpaw-config-tab dark-theme"},s.element.createElement("div",{className:"wpaw-tab-header"},s.element.createElement("h3",null,"CONFIGURATION")),s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement("label",null,"AGENT WORKSPACE"),s.element.createElement("p",{className:"description"},"The command box now routes chat, outline, writing, refinement, and SEO requests automatically from the current editor context.")),s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement("label",null,"ARTICLE LENGTH"),s.element.createElement("select",{value:I.article_length,onChange:o=>ge("article_length",o.target.value),disabled:e,className:"wpaw-select"},s.element.createElement("option",{value:"short"},"Short (500-800 words)"),s.element.createElement("option",{value:"medium"},"Medium (800-1500 words)"),s.element.createElement("option",{value:"long"},"Long (1500-2500 words)"))),s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement("label",null,"Language"),s.element.createElement("select",{value:I.language,onChange:o=>ge("language",o.target.value),disabled:e,className:"wpaw-select"},(()=>{let o=ae.preferred_languages||["auto","English","Indonesian"],a=ae.custom_languages||[];return[...o,...a].map(c=>{let l=c.toLowerCase();return s.element.createElement("option",{key:l,value:l},c==="auto"?"Auto-detect":c)})})()),s.element.createElement("p",{className:"description"},"Overrides the detected language when writing or refining.")),s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement(yn,{label:"Tone",value:I.tone,onChange:o=>ge("tone",o),disabled:e,placeholder:"e.g., Friendly, persuasive, professional"}),s.element.createElement("p",{className:"description"},"Use this to consistently guide the writing tone.")),s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement("label",null,"Experience Level"),s.element.createElement("select",{value:I.experience_level,onChange:o=>ge("experience_level",o.target.value),disabled:e,className:"wpaw-select"},s.element.createElement("option",{value:"general"},"General audience"),s.element.createElement("option",{value:"beginner"},"Beginner"),s.element.createElement("option",{value:"intermediate"},"Intermediate"),s.element.createElement("option",{value:"advanced"},"Advanced"))),s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement(zt,{label:"Include image suggestions",checked:!!I.include_images,onChange:o=>ge("include_images",o),disabled:e}),s.element.createElement("p",{className:"description"},"When enabled, the agent will add image placeholders.")),s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement(zt,{label:"Enable web search for outlines",checked:!!I.web_search,onChange:o=>ge("web_search",o),disabled:e}),s.element.createElement("p",{className:"description"},"Uses web search when planning outlines.")),s.element.createElement("div",{className:"wpaw-config-divider"},s.element.createElement("span",null,"\u{1F50D} SEO OPTIMIZATION")),s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement(zt,{label:"Enable SEO optimization",checked:!!I.seo_enabled,onChange:o=>ge("seo_enabled",o),disabled:e}),s.element.createElement("p",{className:"description"},"Include SEO guidelines in AI prompts for keyword-optimized content.")),I.seo_enabled&&s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement(yn,{label:"Focus Keyword",value:I.seo_focus_keyword,onChange:o=>ge("seo_focus_keyword",o),disabled:e,placeholder:"e.g., wordpress seo plugin"}),s.element.createElement("p",{className:"description"},"Primary keyword to optimize content for. Will be included in title, headings, and body.")),I.seo_enabled&&s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement(yn,{label:"Secondary Keywords",value:I.seo_secondary_keywords,onChange:o=>ge("seo_secondary_keywords",o),disabled:e,placeholder:"e.g., content optimization, search ranking"}),s.element.createElement("p",{className:"description"},"Comma-separated related keywords to sprinkle throughout content.")),I.seo_enabled&&s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement(es,{label:"Meta Description",value:I.seo_meta_description,onChange:o=>ge("seo_meta_description",o),disabled:e,placeholder:"Enter meta description (120-160 chars recommended)",rows:3}),s.element.createElement("div",{className:"wpaw-meta-info"},s.element.createElement("span",{className:(((t=I.seo_meta_description)==null?void 0:t.length)||0)>=120&&(((n=I.seo_meta_description)==null?void 0:n.length)||0)<=160?"good":"warning"},`${((r=I.seo_meta_description)==null?void 0:r.length)||0}/160 chars`),s.element.createElement(me,{isSecondary:!0,isSmall:!0,onClick:()=>Xn(),disabled:e||rt},rt?s.element.createElement("span",{style:{display:"flex",alignItems:"center",gap:"5px"}},s.element.createElement("span",{className:"wpaw-spinning-icon",dangerouslySetInnerHTML:{__html:''}})," Generating..."):s.element.createElement("span",{style:{display:"flex",alignItems:"center",gap:"5px"}},s.element.createElement("span",{className:"wpaw-svg-wrapper",dangerouslySetInnerHTML:{__html:''}})," Generate")))),I.seo_enabled&&s.element.createElement("div",{className:"wpaw-config-section wpaw-seo-audit"},s.element.createElement("div",{className:"wpaw-seo-audit-header"},s.element.createElement("label",null,"SEO Audit"),s.element.createElement(me,{isSecondary:!0,isSmall:!0,onClick:()=>Ls(),disabled:e||Ve},Ve?s.element.createElement("span",{style:{display:"flex",alignItems:"center",gap:"5px"}},s.element.createElement("span",{className:"wpaw-spinning-icon",style:{display:"inline-flex",lineHeight:"0"},dangerouslySetInnerHTML:{__html:''}})," Analyzing..."):s.element.createElement("span",{style:{display:"flex",alignItems:"center",gap:"5px"}},s.element.createElement("span",{className:"wpaw-svg-wrapper",style:{display:"inline-flex",lineHeight:"0"},dangerouslySetInnerHTML:{__html:''}})," Run Audit"))),Be&&s.element.createElement("div",{className:"wpaw-seo-audit-results"},s.element.createElement("div",{className:"wpaw-seo-score "+(Be.score>=70?"good":Be.score>=40?"warning":"poor")},s.element.createElement("span",{className:"score-value"},Be.score),s.element.createElement("span",{className:"score-label"},"/100")),s.element.createElement("div",{className:"wpaw-seo-stats"},s.element.createElement("div",{className:"wpaw-seo-stat"},s.element.createElement("span",{className:"stat-label"},"Words"),s.element.createElement("span",{className:"stat-value"},Be.word_count||0)),s.element.createElement("div",{className:"wpaw-seo-stat"},s.element.createElement("span",{className:"stat-label"},"Keyword Density"),s.element.createElement("span",{className:"stat-value"},`${(Be.keyword_density||0).toFixed(1)}%`))),Be.checks&&s.element.createElement("div",{className:"wpaw-seo-checks"},Be.checks.map((o,a)=>{let i=o.status==="good"||o.status==="ok",c=fs===Ws(o);return s.element.createElement("div",{key:a,className:"wpaw-seo-check "+(i?"passed":"failed")},s.element.createElement("span",{className:"check-icon"},i?"\u2713":"\u2717"),s.element.createElement("span",{className:"check-label"},o.message),!i&&s.element.createElement(me,{isSmall:!0,isSecondary:!0,className:"wpaw-seo-fix-button"+(c?" is-fixing":""),onClick:()=>Wr(o),disabled:U||Ve||rt||!!fs},c?"Fixing...":"Fix"))}))),!Be&&s.element.createElement("p",{className:"description"},'Click "Run Audit" to analyze your content for SEO optimization.')),(vn||Sn)&&s.element.createElement("div",{className:"wpaw-config-section"},vn&&s.element.createElement("p",{className:"description"},"Saving post configuration..."),Sn&&s.element.createElement("p",{className:"description"},Sn)),s.element.createElement("div",{className:"wpaw-config-section"},s.element.createElement("p",{className:"description"},"Configure global settings like API keys, models, and clarification quiz options in ",s.element.createElement("a",{href:ae.settings_url||"/wp-admin/options-general.php?page=wp-agentic-writer",target:"_blank"},"Settings \u2192 WP Agentic Writer"))))},Oo=()=>{var r,o;let e=U||Ve||rt;if($e.status==="stopping")return"stopping";if(!e)return"idle";let n=J.filter(a=>a.type==="timeline").pop();return $e.type==="refinement"?"refining":$e.type==="seo_audit"?"checking":(r=n==null?void 0:n.message)!=null&&r.toLowerCase().includes("writing")||(o=n==null?void 0:n.message)!=null&&o.toLowerCase().includes("generating")?"writing":"thinking"},Do=()=>{var n;let e=Oo(),t={idle:"Ready",thinking:"Thinking...",checking:"Checking...",refining:"Refining...",writing:"Writing...",stopping:"Stopping...",complete:"Done",error:"Error"};return s.element.createElement("div",{className:"wpaw-status-bar",role:"status","aria-live":"polite"},s.element.createElement("div",{className:"wpaw-status-indicator"},s.element.createElement("span",{className:"wpaw-status-dot "+e}),s.element.createElement("span",{className:"wpaw-status-label"},t[e])),vt.restored&&s.element.createElement("div",{className:"wpaw-memanto-badge",title:"Restored from memory: "+(vt.summary||"prior session context")},"\u{1F9E0} Restored"),s.element.createElement("div",{className:"wpaw-status-actions"},qe.length>0&&s.element.createElement("button",{className:"wpaw-status-icon-btn wpaw-undo-btn has-undo",title:`Undo: ${((n=qe[qe.length-1])==null?void 0:n.label)||"Last AI operation"}`,onClick:$s,disabled:U,dangerouslySetInnerHTML:{__html:''}}),s.element.createElement("button",{className:"wpaw-status-icon-btn"+(Le==="chat"&&dt?" is-active":""),dangerouslySetInnerHTML:{__html:''},title:"Sessions",onClick:()=>{et("chat"),Ye(!0)},disabled:U}),J.length>0&&s.element.createElement("button",{className:"wpaw-status-icon-btn"+(Le==="chat"&&!dt?" is-active":""),dangerouslySetInnerHTML:{__html:''},title:"Chat",onClick:()=>{et("chat"),Ye(!1)},disabled:U}),J.length>0&&s.element.createElement("button",{className:"wpaw-status-icon-btn wpaw-workspace-toggle-btn",dangerouslySetInnerHTML:{__html:''},title:rn?"Show Agent Workspace":"Hide Agent Workspace",onClick:Cr}),s.element.createElement("button",{className:"wpaw-status-icon-btn"+(Le==="config"?" is-active":""),dangerouslySetInnerHTML:{__html:''},title:"Configuration",onClick:()=>et(Le==="config"?"chat":"config"),disabled:U}),s.element.createElement("button",{className:"wpaw-status-icon-btn"+(Le==="cost"?" is-active":""),dangerouslySetInnerHTML:{__html:''},title:"Cost Tracking",onClick:()=>et(Le==="cost"?"chat":"cost"),disabled:U})))},Fo=()=>{let e=U||Ve||rt,t=$e.status==="stopping";return s.element.createElement("div",{className:"wpaw-tab-content wpaw-chat-tab dark-theme"},s.element.createElement("div",{className:`wpaw-chat-container ${Zt?"is-dimmed":""}`},xt&&s.element.createElement("div",{className:"wpaw-editor-lock-banner"},"Writing in progress \u2014 please wait until the article finishes."),Oe&&s.element.createElement("div",{className:"wpaw-refinement-lock-banner"},`Refining in progress \u2014 editing is temporarily locked. You can still scroll and review changes live (${At.length} target block(s)).`),Kt.lockedByOther&&s.element.createElement("div",{className:"wpaw-session-lock-banner"},s.element.createElement("span",null,"\u26A0\uFE0F This session is active in another tab. Changes here won\u2019t be saved."),s.element.createElement(me,{isSmall:!0,isSecondary:!0,className:"wpaw-session-lock-takeover",onClick:Dr},"Take Over")),wpAgenticWriter.health&&!wpAgenticWriter.health.ok&&wpAgenticWriter.health.issues.map((n,r)=>s.element.createElement("div",{key:`health-${r}`,className:"wpaw-health-notice"},"\u26A0\uFE0F ",n.message,n.actionUrl&&s.element.createElement("a",{href:n.actionUrl,target:"_blank",rel:"noopener",style:{marginLeft:"8px"}},n.actionLabel||"Fix"))),dt&&!xt&&$o(),!dt&&mn()&&Eo(),!dt&&!mn()&&Mo(),!dt&&!mn()&&s.element.createElement("div",{className:"wpaw-messages wpaw-activity-log"},s.element.createElement("div",{className:"wpaw-messages-inner",ref:Un},Lo(),s.element.createElement("div",{ref:Hn}))),!dt&&!mn()&&s.element.createElement("div",{className:"wpaw-command-area",style:{position:"relative"}},Ro(),s.element.createElement("div",{className:`wpaw-input-hint ${tt||U?"is-hidden":""}`},"Type ",s.element.createElement("kbd",null,"/")," for commands or ",s.element.createElement("kbd",null,"@")," to mention a block"),s.element.createElement("div",{className:"wpaw-command-input-wrapper"+(bs?" expanded":"")},s.element.createElement("span",{className:"wpaw-command-prefix"},">"),s.element.createElement("textarea",{ref:ye,className:"wpaw-input",value:tt,disabled:Kt.lockedByOther,onChange:n=>{let r=n.target.value;No(r);let o=ye.current;o&&(o.style.height="auto",o.style.height=Math.min(o.scrollHeight,250)+"px",o.style.overflowY=o.scrollHeight>250?"auto":"hidden")},onKeyDown:Io,rows:2,style:{minHeight:"60px",maxHeight:"250px",resize:"none",width:"100%",boxSizing:"border-box",padding:"10px 12px",fontFamily:"inherit",fontSize:"13px",lineHeight:"1.4",border:"1px solid var(--aw-outline-subtle)",borderRadius:"6px",background:"transparent",color:"inherit"},placeholder:"Ask the agent to write, continue, inspect, refine, or use @ to target blocks..."})),Mt&&it.length>0&&s.element.createElement("div",{className:"wpaw-mention-autocomplete",style:{position:"absolute",bottom:"100%",left:0,right:0,maxHeight:"200px",overflowY:"auto",background:"#1e1e1e",border:"1px solid #3c3c3c",zIndex:1e3}},it.map((n,r)=>{let o=r===Pn;return s.element.createElement("div",{key:n.id,className:"wpaw-mention-option"+(o?" selected":""),onClick:()=>tr(n),style:{padding:"8px 12px",cursor:"pointer",background:o?"#2c2c2c":"transparent",borderBottom:"1px solid #3c3c3c"}},s.element.createElement("strong",{style:{display:"block",color:"#fff",fontSize:"13px"}},n.label),s.element.createElement("span",{style:{display:"block",color:"#a7aaad",fontSize:"12px",marginTop:"2px"}},n.sublabel))})),Pt&&ct.length>0&&s.element.createElement("div",{className:"wpaw-mention-autocomplete",style:{position:"absolute",bottom:"100%",left:0,right:0,maxHeight:"200px",overflowY:"auto",background:"#1e1e1e",border:"1px solid #3c3c3c",zIndex:1e3}},ct.map((n,r)=>{let o=r===Ln;return s.element.createElement("div",{key:n.id,className:"wpaw-mention-option"+(o?" selected":""),onClick:()=>nr(n),style:{padding:"8px 12px",cursor:"pointer",background:o?"#2c2c2c":"transparent",borderBottom:"1px solid #3c3c3c"}},s.element.createElement("strong",{style:{display:"block",color:"#fff",fontSize:"13px"}},n.label),s.element.createElement("span",{style:{display:"block",color:"#a7aaad",fontSize:"12px",marginTop:"2px"}},n.sublabel))})),s.element.createElement("div",{className:"wpaw-command-actions"},s.element.createElement("div",{className:"wpaw-command-actions-group"},(()=>{let r=(ae.task_providers||{})[Ce]||"openrouter",o=r==="local_backend"||r==="codex",a=!!ae.brave_search_api_key,i=o&&!a,c=i?"Web Search unavailable \u2014 Brave API Key required for "+r.replace("_"," ")+". Configure in Settings > General.":o?"Web search via Brave Search API (free tier: 2,000 req/mo)":"Web search via OpenRouter (~$0.02/search)";return s.element.createElement("label",{className:"wpaw-web-search-toggle"+(i?" wpaw-search-blocked":""),title:c,onClick:i?l=>{l.preventDefault(),alert("Web Search for "+r.replace("_"," ")+` requires a Brave Search API Key.
+
+Get a free key (2,000 requests/month) and configure it in:
+WP Agentic Writer Settings \u2192 General \u2192 Brave Search API Key`)}:void 0},s.element.createElement("input",{type:"checkbox",checked:i?!1:I.web_search||!1,onChange:i?()=>{}:l=>{ge("web_search",l.target.checked)},disabled:U||i}),s.element.createElement("span",{className:"wpaw-web-search-icon",dangerouslySetInnerHTML:{__html:''}}),s.element.createElement("span",{className:"wpaw-web-search-label"},i?"Search \u2715":"Search"))})()),s.element.createElement("div",{className:"wpaw-command-actions-group"},e&&s.element.createElement("button",{className:"wpaw-command-circle-btn wpaw-stop-circle-btn"+(t?" is-stopping":""),type:"button",onClick:lo,disabled:t,title:t?"Stopping...":"Stop current operation",dangerouslySetInnerHTML:{__html:t?'':''}}),!e&&s.element.createElement("button",{className:"wpaw-command-circle-btn wpaw-send-circle-btn",type:"button",onClick:sr,disabled:!tt.trim()||Kt.lockedByOther,title:"Send message",dangerouslySetInnerHTML:{__html:''}}))),s.element.createElement("div",{className:"wpaw-keyboard-hints","aria-hidden":"true"},s.element.createElement("span",{className:"wpaw-kbd"},s.element.createElement("kbd",null,/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"\u2318":"Ctrl"),"+",s.element.createElement("kbd",null,"\u21B5")," Send"),s.element.createElement("span",{className:"wpaw-kbd"},s.element.createElement("kbd",null,"@")," Blocks"),s.element.createElement("span",{className:"wpaw-kbd"},s.element.createElement("kbd",null,"/")," Commands")),Ao())))},[Zn,jo]=s.element.useState([]),ar=async()=>{var e,t,n,r;if(C)try{let a=await(await fetch(`${wpAgenticWriter.apiUrl}/cost-tracking/${C}`,{headers:{"X-WP-Nonce":wpAgenticWriter.nonce}})).json();a&&typeof a.session=="number"&&he({session:a.session,today:((t=(e=a.today)==null?void 0:e.total)==null?void 0:t.cost)||0,monthlyUsed:((n=a.monthly)==null?void 0:n.used)||0}),(r=a==null?void 0:a.monthly)!=null&&r.budget&&as(a.monthly.budget),a!=null&&a.history&&jo(a.history)}catch(o){K.error("Failed to refresh cost data:",o)}};React.useEffect(()=>{Le==="cost"&&ar()},[Le,C]);let Ho=()=>{let e=Vt>0?te.monthlyUsed/Vt*100:0,t=e>90?"danger":e>70?"warning":"ok",n=Math.max(0,Vt-te.monthlyUsed),r=Zn.reduce((a,i)=>{let c=i.action||"unknown",l=parseFloat(i.cost||0),d=parseInt(i.input_tokens||0)+parseInt(i.output_tokens||0);return a[c]||(a[c]={action:c,cost:0,tokens:0,count:0}),a[c].cost+=l,a[c].tokens+=d,a[c].count+=1,a},{}),o=Object.values(r).sort((a,i)=>i.cost-a.cost);return s.element.createElement("div",{className:"wpaw-tab-content wpaw-cost-tab dark-theme"},s.element.createElement("div",{className:"wpaw-tab-header"},s.element.createElement("h3",null,"OPENROUTER COST"),s.element.createElement("button",{className:"wpaw-refresh-btn",dangerouslySetInnerHTML:{__html:''},onClick:ar,title:"Refresh cost data"})),s.element.createElement("div",{className:"wpaw-cost-card"},s.element.createElement("div",{className:"wpaw-cost-stat"},s.element.createElement("label",null,"This Post"),s.element.createElement("div",{className:"wpaw-cost-value"},"$",te.session.toFixed(4))),s.element.createElement("div",{className:"wpaw-cost-stat"},s.element.createElement("label",null,"Month Used"),s.element.createElement("div",{className:"wpaw-cost-value"},"$",te.monthlyUsed.toFixed(4))),s.element.createElement("div",{className:"wpaw-cost-stat wpaw-cost-remaining"},s.element.createElement("label",null,"Remaining"),s.element.createElement("div",{className:"wpaw-cost-value "+t},"$",n.toFixed(2)))),s.element.createElement("div",{className:"wpaw-budget-section"},s.element.createElement("div",{className:"wpaw-budget-label"},s.element.createElement("span",null,"Budget: $",Vt.toFixed(2)),s.element.createElement("span",null,e.toFixed(1),"%")),s.element.createElement("div",{className:"wpaw-budget-bar"},s.element.createElement("div",{className:"wpaw-budget-fill "+t,style:{width:Math.min(e,100)+"%"}}))),e>80&&s.element.createElement("div",{className:"wpaw-budget-warning "+t},e>=100?"\u26A0\uFE0F Budget exceeded!":"\u26A0\uFE0F Approaching budget limit"),Zn.length>0&&s.element.createElement("div",{className:"wpaw-cost-history"},s.element.createElement("h4",null,"Cost By Action"),s.element.createElement("div",{className:"wpaw-cost-table-wrapper",style:{marginBottom:"24px"}},s.element.createElement("table",{className:"wpaw-cost-table"},s.element.createElement("thead",null,s.element.createElement("tr",null,s.element.createElement("th",null,"Action"),s.element.createElement("th",null,"Calls"),s.element.createElement("th",null,"Tokens"),s.element.createElement("th",null,"Cost(US$)"))),s.element.createElement("tbody",null,o.map((a,i)=>s.element.createElement("tr",{key:i},s.element.createElement("td",null,a.action),s.element.createElement("td",null,a.count),s.element.createElement("td",null,a.tokens.toLocaleString()),s.element.createElement("td",null,"$"+a.cost.toFixed(4))))))),s.element.createElement("h4",null,"OpenRouter Cost History"),s.element.createElement("div",{className:"wpaw-cost-table-wrapper"},s.element.createElement("table",{className:"wpaw-cost-table"},s.element.createElement("thead",null,s.element.createElement("tr",null,s.element.createElement("th",null,"Time"),s.element.createElement("th",null,"Action"),s.element.createElement("th",null,"Model"),s.element.createElement("th",null,"Tokens"),s.element.createElement("th",null,"Cost(US$)"))),s.element.createElement("tbody",null,Zn.map((a,i)=>{let c=parseInt(a.input_tokens||0)+parseInt(a.output_tokens||0),l=new Date(a.created_at).toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit"}),d=a.model?a.model.split("/").pop().substring(0,20):"N/A";return s.element.createElement("tr",{key:i},s.element.createElement("td",null,l),s.element.createElement("td",null,a.action),s.element.createElement("td",{title:a.model},d),s.element.createElement("td",null,c.toLocaleString()),s.element.createElement("td",null,"$"+parseFloat(a.cost).toFixed(4)))}))))),s.element.createElement("div",{className:"wpaw-cost-footer"},s.element.createElement("a",{href:ae.settings_url||"/wp-admin/options-general.php?page=wp-agentic-writer",target:"_blank",className:"wpaw-cost-settings-link"},s.element.createElement("span",{dangerouslySetInnerHTML:{__html:' Manage Budget Settings'}}))))};return s.element.createElement(s.element.Fragment,null,s.element.createElement(lr,{target:"wp-agentic-writer",icon:ts},"WP Agentic Writer"),s.element.createElement(dr,{name:"wp-agentic-writer",title:s.element.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},s.element.createElement("img",{src:wpAgenticWriter.pluginUrl+"/assets/img/icon.svg",alt:"WP Agentic Writer",style:{width:"24px",height:"24px"}}),s.element.createElement("span",null,"WP Agentic Writer"))},s.element.createElement(ur,null,s.element.createElement("div",{className:"wpaw-tab-content-wrapper"},Do(),Le==="chat"&&Fo(),Le==="config"&&Wo(),Le==="cost"&&Ho()))))},mr=C=>({postId:C("core/editor").getCurrentPostId()}),pr=s.data.withSelect(mr)(fr);cr("wp-agentic-writer",{icon:ts,render:pr})})(window.wp);})();
diff --git a/assets/js/settings-v2-stitch.js b/assets/js/settings-v2-stitch.js
new file mode 100644
index 0000000..04a3dc4
--- /dev/null
+++ b/assets/js/settings-v2-stitch.js
@@ -0,0 +1,599 @@
+(function ($) {
+ "use strict";
+
+ const qs = (selector, root = document) => root.querySelector(selector);
+ const qsa = (selector, root = document) =>
+ Array.from(root.querySelectorAll(selector));
+ const config = window.wpawSettingsV2 || {};
+
+ function showToast(message, type = "success") {
+ const toast = qs("#wpaw2-toast");
+ const body = qs("#wpaw2-toast-message");
+ if (!toast || !body) return;
+ body.textContent = message;
+ toast.className = "toast show toast-" + type;
+ clearTimeout(toast._timer);
+ toast._timer = setTimeout(() => {
+ toast.classList.remove("show");
+ }, 2600);
+ }
+
+ function bindToastHover() {
+ const toast = qs("#wpaw2-toast");
+ if (!toast) return;
+ toast.addEventListener("mouseenter", () => {
+ clearTimeout(toast._timer);
+ });
+ toast.addEventListener("mouseleave", () => {
+ toast._timer = setTimeout(() => {
+ toast.classList.remove("show");
+ }, 1200);
+ });
+ }
+
+ function activateTab(target) {
+ qsa("[data-aw2-tab]").forEach((button) => {
+ const active = button.dataset.aw2Tab === target;
+ button.setAttribute("aria-selected", active ? "true" : "false");
+ });
+ qsa(".tab-panel").forEach((panel) => {
+ panel.classList.toggle("active", panel.id === target);
+ });
+ const crumb = qs("#wpaw2-crumb-tab");
+ const activeButton = qs(`[data-aw2-tab="${target}"]`);
+ if (crumb && activeButton)
+ crumb.textContent =
+ activeButton.dataset.label || activeButton.textContent.trim();
+ }
+
+ function bindTabs() {
+ qsa("[data-aw2-tab]").forEach((button) => {
+ button.addEventListener("click", () =>
+ activateTab(button.dataset.aw2Tab),
+ );
+ });
+
+ qsa("[data-aw2-subtab-target]").forEach((button) => {
+ button.addEventListener("click", (e) => {
+ const target = e.currentTarget.dataset.aw2SubtabTarget;
+ const nav = e.currentTarget.closest(".subtab-nav");
+ const panelContainer = nav.parentElement;
+
+ nav.querySelectorAll("[data-aw2-subtab-target]").forEach((btn) => {
+ btn.setAttribute(
+ "aria-selected",
+ btn === e.currentTarget ? "true" : "false",
+ );
+ });
+
+ panelContainer.querySelectorAll(".subtab-panel").forEach((panel) => {
+ if (panel.id === target) {
+ panel.classList.add("active");
+ } else {
+ panel.classList.remove("active");
+ }
+ });
+ });
+ });
+ }
+
+ function bindPasswordToggles() {
+ qsa("[data-aw2-toggle-password]").forEach((button) => {
+ button.addEventListener("click", () => {
+ const input = qs(button.dataset.aw2TogglePassword);
+ if (!input) return;
+ const isPassword = input.type === "password";
+ input.type = isPassword ? "text" : "password";
+ button.textContent = isPassword ? "Hide" : "Show";
+ });
+ });
+ }
+
+ function bindCopyButtons() {
+ qsa("[data-aw2-copy]").forEach((button) => {
+ button.addEventListener("click", async () => {
+ const source = qs(button.dataset.aw2Copy);
+ if (!source) return;
+ try {
+ await navigator.clipboard.writeText(source.textContent.trim());
+ showToast("Copied command");
+ } catch (error) {
+ showToast("Copy failed", "error");
+ }
+ });
+ });
+ }
+
+ function getModelsForType(type) {
+ const bucket =
+ config.models?.[type] ||
+ config.models?.execution ||
+ config.models?.planning ||
+ {};
+ const all = Array.isArray(bucket.all) ? bucket.all : [];
+ const recommended = Array.isArray(bucket.recommended)
+ ? bucket.recommended
+ : [];
+ const merged = [...all];
+ recommended.forEach((model) => {
+ if (!merged.find((item) => item.id === model.id)) merged.push(model);
+ });
+ return merged;
+ }
+
+ function modelTypeFromSelect(select) {
+ const match = select.name.match(/\[(.+?)_model\]/);
+ return match ? match[1] : "writing";
+ }
+
+ function formatModelData(models) {
+ return models.map((model) => ({
+ id: model.id,
+ text: model.name || model.id,
+ pricing: model.pricing || {},
+ is_free: Boolean(model.is_free),
+ is_custom: Boolean(model.is_custom),
+ }));
+ }
+
+ function formatModelOption(model) {
+ if (!model.id) return model.text;
+ const $row = $('');
+ const $name = $('').text(model.text);
+ $row.append($name);
+
+ if (model.is_custom) {
+ $row.append('Custom');
+ } else if (model.is_free) {
+ $row.append('Free');
+ } else {
+ const prompt = parseFloat(model.pricing?.prompt) || 0;
+ const image = parseFloat(model.pricing?.image) || 0;
+ const price = image > 0 ? image : prompt;
+ if (price > 0)
+ $row.append(
+ $('').text(
+ `$${(price * 1000000).toFixed(2)}/1M`,
+ ),
+ );
+ }
+
+ return $row;
+ }
+
+ function initSelect2() {
+ if (!$.fn.select2) return;
+
+ const $languageSelect = $("#preferred_languages");
+ if ($languageSelect.length) {
+ if ($languageSelect.data("select2")) {
+ $languageSelect.select2("destroy");
+ }
+ $languageSelect.select2({
+ width: "100%",
+ placeholder: "Select preferred languages...",
+ dropdownCssClass: "wpaw2-select2-dropdown",
+ });
+ }
+
+ qsa(".wpaw2-model-select").forEach((select) => {
+ const type = modelTypeFromSelect(select);
+ const models = getModelsForType(type);
+ const currentValue = select.value || config.currentModels?.[type] || "";
+ const $select = $(select);
+
+ if ($select.data("select2")) {
+ $select.select2("destroy");
+ }
+
+ $select.empty().select2({
+ width: "100%",
+ data: formatModelData(models),
+ placeholder: config.i18n?.searchPlaceholder || "Search models...",
+ allowClear: true,
+ dropdownCssClass: "wpaw2-select2-dropdown",
+ templateResult: formatModelOption,
+ templateSelection: (model) => model.text || model.id,
+ language: {
+ noResults: () => config.i18n?.noResults || "No models found",
+ },
+ });
+
+ if (currentValue) {
+ const model = models.find((item) => item.id === currentValue);
+ const option = new Option(
+ model?.name || currentValue,
+ currentValue,
+ true,
+ true,
+ );
+ $select.append(option).trigger("change");
+ }
+ });
+ }
+
+ function setSelectValue(select, value) {
+ if (!select || !value) return;
+ let option = Array.from(select.options).find(
+ (item) => item.value === value,
+ );
+ if (!option) {
+ option = new Option(value, value, true, true);
+ select.add(option);
+ }
+ select.value = value;
+ if ($.fn.select2 && $(select).data("select2")) $(select).trigger("change");
+ else select.dispatchEvent(new Event("change", { bubbles: true }));
+ }
+
+ function bindPresetCards() {
+ const presets = config.presets || {};
+ qsa("[data-aw2-preset]").forEach((card) => {
+ card.addEventListener("click", () => {
+ const preset = presets[card.dataset.aw2Preset];
+ if (!preset) return;
+ Object.entries(preset).forEach(([key, value]) => {
+ setSelectValue(
+ qs(`[name="wp_agentic_writer_settings[${key}_model]"]`),
+ value,
+ );
+ });
+ qsa("[data-aw2-preset]").forEach((item) =>
+ item.classList.remove("active"),
+ );
+ card.classList.add("active");
+ updateEstimate();
+ showToast("Preset applied");
+ });
+ });
+ }
+
+ function updateEstimate() {
+ const writing =
+ qs('[name="wp_agentic_writer_settings[writing_model]"]')?.value || "";
+ const image =
+ qs('[name="wp_agentic_writer_settings[image_model]"]')?.value || "";
+ let estimate = 0.14;
+ const text = `${writing} ${image}`.toLowerCase();
+ if (text.includes("mistral") || text.includes("flash")) estimate = 0.06;
+ if (
+ text.includes("gpt-4.1") ||
+ text.includes("opus") ||
+ text.includes("premium")
+ )
+ estimate = 0.31;
+ const output = qs("#wpaw2-cost-estimate");
+ if (output) output.textContent = `~$${estimate.toFixed(2)}`;
+ }
+
+ function bindEstimateInputs() {
+ qsa(".wpaw2-model-select").forEach((select) =>
+ select.addEventListener("change", updateEstimate),
+ );
+ updateEstimate();
+ }
+
+ function bindTogglePanels() {
+ qsa("[data-aw2-toggle-panel]").forEach((input) => {
+ const panel = qs(input.dataset.aw2TogglePanel);
+ if (!panel) return;
+ const sync = () => {
+ panel.hidden = !input.checked;
+ };
+ input.addEventListener("change", sync);
+ sync();
+ });
+ }
+
+ function bindCustomModels() {
+ const list = qs("#wpaw2-custom-models");
+ const add = qs("#wpaw2-add-custom-model");
+ if (!list || !add) return;
+ add.addEventListener("click", () => {
+ const row = document.createElement("div");
+ row.className = "custom-row";
+ row.innerHTML =
+ '';
+ list.appendChild(row);
+ });
+ list.addEventListener("click", (event) => {
+ if (event.target.matches("[data-remove]"))
+ event.target.closest(".custom-row")?.remove();
+ });
+ }
+
+ function ajaxPost(action, data) {
+ return $.ajax({
+ url: config.ajaxUrl,
+ type: "POST",
+ data: {
+ action,
+ nonce: config.nonce,
+ ...data,
+ },
+ });
+ }
+
+ function bindAjaxButton(selector, action, getData, loadingText, onSuccess) {
+ const button = qs(selector);
+ if (!button) return;
+ const original = button.textContent;
+ button.addEventListener("click", () => {
+ button.disabled = true;
+ button.textContent = loadingText || "Testing...";
+ ajaxPost(action, getData ? getData() : {})
+ .done((response) => {
+ if (response?.success && typeof onSuccess === "function") {
+ onSuccess(response);
+ }
+ let message =
+ response?.data?.message ||
+ (response?.success ? "Connection successful" : "Connection failed");
+ if (response?.data?.models_count) {
+ message += ` (${response.data.models_count} models)`;
+ }
+ showToast(message, response?.success ? "success" : "error");
+ })
+ .fail((xhr) => {
+ showToast(
+ xhr.responseJSON?.data?.message || "Request failed",
+ "error",
+ );
+ })
+ .always(() => {
+ button.disabled = false;
+ button.textContent = original;
+ });
+ });
+ }
+
+ function loadCostLog() {
+ const tbody = qs("#wpaw-cost-log-tbody");
+ if (!tbody) return;
+
+ tbody.innerHTML = '| Loading cost data... | ';
+ ajaxPost("wpaw_get_cost_log_data", { page: 1, per_page: 25 })
+ .done((response) => {
+ if (!response?.success) {
+ tbody.innerHTML =
+ '| Unable to load cost data. | ';
+ return;
+ }
+
+ const records = response.data?.records || [];
+ if (!records.length) {
+ tbody.innerHTML =
+ '| Cost data will appear after OpenRouter generations. | ';
+ return;
+ }
+
+ tbody.innerHTML = records.map(renderCostLogRecord).join("");
+ bindCostLogToggles(tbody);
+ })
+ .fail(() => {
+ tbody.innerHTML =
+ '| Unable to load cost data. | ';
+ });
+ }
+
+ function renderCostLogRecord(record) {
+ const postId = String(record.post_id ?? "0");
+ const rowId = `wpaw-cost-child-${postId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+ const title = escapeHtml(record.post_title || "System/Other");
+ const titleHtml = record.post_link
+ ? `${title}`
+ : title;
+ const totalCost = escapeHtml(record.total_cost || "0.0000");
+ const callCount = Number(record.call_count || 0);
+ const actionRows = buildActionSummaries(record.details || []);
+ const hasActions = actionRows.length > 0;
+ const actionSummary = hasActions
+ ? `${actionRows.length} actions / ${callCount} calls`
+ : `${callCount} calls`;
+ const toggle = hasActions
+ ? ``
+ : '';
+
+ return `
+
+ | ${toggle}${titleHtml} |
+ ${escapeHtml(actionSummary)} |
+ $${totalCost} |
+
+
+ |
+ ${renderActionSummaryTable(actionRows)}
+ |
+ `;
+ }
+
+ function buildActionSummaries(details) {
+ const grouped = new Map();
+ details.forEach((detail) => {
+ const action = detail.action || "unknown";
+ const current = grouped.get(action) || {
+ action,
+ calls: 0,
+ cost: 0,
+ inputTokens: 0,
+ outputTokens: 0,
+ models: new Set(),
+ };
+ current.calls += 1;
+ current.cost += Number.parseFloat(detail.cost || 0) || 0;
+ current.inputTokens += Number(detail.input_tokens || 0);
+ current.outputTokens += Number(detail.output_tokens || 0);
+ if (detail.model) current.models.add(detail.model);
+ grouped.set(action, current);
+ });
+
+ return Array.from(grouped.values()).sort((a, b) => b.cost - a.cost);
+ }
+
+ function renderActionSummaryTable(actionRows) {
+ if (!actionRows.length) {
+ return 'No action details available for this post. ';
+ }
+
+ const rows = actionRows
+ .map((item) => {
+ const modelList = Array.from(item.models);
+ const models = modelList.length
+ ? modelList
+ .map((m) => `${escapeHtml(m)}`)
+ .join("")
+ : "—";
+ const hasTokens = item.inputTokens > 0 || item.outputTokens > 0;
+ const inLabel = hasTokens ? escapeHtml(String(item.inputTokens)) : "—";
+ const outLabel = hasTokens
+ ? escapeHtml(String(item.outputTokens))
+ : "—";
+ return `
+ | ${escapeHtml(formatActionLabel(item.action))} |
+ ${escapeHtml(String(item.calls))} |
+ ${models} |
+ ${inLabel} |
+ ${outLabel} |
+ $${escapeHtml(item.cost.toFixed(4))} |
+ `;
+ })
+ .join("");
+
+ return `
+ | Action | Calls | Models | Input | Output | Cost |
|---|
+ ${rows}
+ `;
+ }
+
+ function bindCostLogToggles(root) {
+ // Accordion mode: expanding one row collapses all others.
+ qsa("[data-cost-child]", root).forEach((button) => {
+ button.addEventListener("click", () => {
+ const child = qs(button.dataset.costChild);
+ if (!child) return;
+ const wasExpanded = button.getAttribute("aria-expanded") === "true";
+
+ // Collapse every open row first.
+ qsa("[data-cost-child][aria-expanded='true']", root).forEach((btn) => {
+ btn.setAttribute("aria-expanded", "false");
+ btn.textContent = "▸";
+ const sibling = qs(btn.dataset.costChild);
+ if (sibling) sibling.hidden = true;
+ });
+
+ // If the clicked row was not already open, expand it.
+ if (!wasExpanded) {
+ button.setAttribute("aria-expanded", "true");
+ button.textContent = "▾";
+ child.hidden = false;
+ }
+ });
+ });
+ }
+
+ function formatActionLabel(action) {
+ const normalized = String(action || "unknown").toLowerCase();
+ const labels = {
+ image_generation: "Generate Image",
+ generate_image: "Generate Image",
+ block_refinement: "Block Refinement",
+ chat: "Chat",
+ };
+ if (labels[normalized]) return labels[normalized];
+
+ return normalized
+ .replace(/[_-]+/g, " ")
+ .replace(/\b\w/g, (letter) => letter.toUpperCase());
+ }
+
+ function escapeHtml(value) {
+ const div = document.createElement("div");
+ div.textContent = String(value ?? "");
+ return div.innerHTML;
+ }
+
+ function escapeAttr(value) {
+ return escapeHtml(value).replace(/"/g, """);
+ }
+
+ function bindAjaxCheckers() {
+ bindAjaxButton("#wpaw-test-api-key", "wpaw_test_api_connection", () => ({
+ api_key: qs("#openrouter_api_key")?.value || "",
+ }));
+ bindAjaxButton(
+ "#wpaw-test-local-backend",
+ "wpaw_test_local_backend",
+ () => {
+ // Find the first non-empty per-task model code for the test
+ const modelInputs = qsa(".wpaw-ce-model");
+ let model = "";
+ for (const input of modelInputs) {
+ if (input.value.trim()) {
+ model = input.value.trim();
+ break;
+ }
+ }
+ // Also sync the hidden legacy field
+ const legacy = qs("#local_backend_model");
+ if (legacy) legacy.value = model;
+ return {
+ url: qs("#local_backend_url")?.value || "",
+ key: qs("#local_backend_key")?.value || "",
+ model: model,
+ };
+ },
+ );
+ bindAjaxButton("#wpaw-test-memanto", "wpaw_test_memanto", () => ({
+ url: qs("#memanto_url")?.value || "",
+ key: qs("#memanto_moorcheh_key")?.value || "",
+ }));
+ bindAjaxButton(
+ "#wpaw-refresh-models",
+ "wpaw_refresh_models",
+ () => ({
+ api_key: qs("#openrouter_api_key")?.value || "",
+ }),
+ config.i18n?.refreshing || "Refreshing...",
+ (response) => {
+ if (response?.data?.models) {
+ config.models = response.data.models;
+ initSelect2();
+ updateEstimate();
+ }
+ },
+ );
+ }
+
+ function bindSaveShortcut() {
+ document.addEventListener("keydown", (event) => {
+ if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+ event.preventDefault();
+ qs("#wpaw2-settings-form")?.requestSubmit();
+ }
+ });
+ }
+
+ function init() {
+ bindTabs();
+ bindPasswordToggles();
+ bindCopyButtons();
+ initSelect2();
+ bindPresetCards();
+ bindEstimateInputs();
+ bindTogglePanels();
+ bindCustomModels();
+ bindAjaxCheckers();
+ loadCostLog();
+ bindSaveShortcut();
+ bindToastHover();
+ qs("#wpaw2-toast-close")?.addEventListener("click", () =>
+ qs("#wpaw2-toast")?.classList.remove("show"),
+ );
+ }
+
+ if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", init);
+ } else {
+ init();
+ }
+})(jQuery);
diff --git a/assets/js/settings-v2.js b/assets/js/settings-v2.js
deleted file mode 100644
index ed13281..0000000
--- a/assets/js/settings-v2.js
+++ /dev/null
@@ -1,1222 +0,0 @@
-/**
- * WP Agentic Writer Settings V2
- * Bootstrap-based settings page JavaScript
- */
-
-(function ($) {
- 'use strict';
-
- // Debug logging utility
- const isDebug = typeof wpAgenticWriter !== 'undefined' && wpAgenticWriter.debug;
- const wpawLog = {
- log: (...args) => { if (isDebug) console.log('[WPAW]', ...args); },
- error: (...args) => console.error('[WPAW]', ...args),
- info: (...args) => { if (isDebug) console.info('[WPAW]', ...args); },
- warn: (...args) => { if (isDebug) console.warn('[WPAW]', ...args); },
- };
-
- // Global state
- const state = {
- models: {},
- currentPage: 1,
- perPage: 25,
- childPerPage: 20,
- filters: {
- post: '',
- model: '',
- type: '',
- dateFrom: '',
- dateTo: ''
- }
- };
-
- // Preset configurations (sourced from PHP for single-source-of-truth).
- // These presets represent intentional product decisions for different budget tiers.
- // Model IDs may differ from registry defaults to balance cost/quality per tier.
- const presets = wpawSettingsV2?.presets || {};
-
- // Debug function to check models
- window.wpawDebugModels = function () {
- wpawLog.log('=== WPAW Models Debug ===');
- wpawLog.log('Total model categories:', Object.keys(state.models).length);
-
- Object.keys(state.models).forEach(category => {
- const models = state.models[category]?.all || [];
- wpawLog.log(`\n${category.toUpperCase()}: ${models.length} models`);
-
- // Check for specific models
- const checkIds = ['deepseek/deepseek-chat-v3-0324', 'anthropic/claude-3.5-sonnet'];
- checkIds.forEach(id => {
- const found = models.find(m => m.id === id);
- if (found) {
- wpawLog.log(` ✓ FOUND: ${id} => ${found.name}`);
- } else {
- wpawLog.log(` ✗ NOT FOUND: ${id}`);
- }
- });
-
- // Show models with raw is_free and pricing data
- if (category === 'image') {
- wpawLog.log(` ALL image models (raw data from PHP):`);
- models.forEach(m => {
- wpawLog.log(` - ${m.id} | is_free=${m.is_free} | pricing=`, m.pricing);
- });
- } else {
- // Show first 10 models with is_free status
- wpawLog.log(` First 10 models (raw data from PHP):`);
- models.slice(0, 10).forEach(m => {
- wpawLog.log(` - ${m.id} | is_free=${m.is_free} | pricing=`, m.pricing);
- });
- }
- });
-
- // AJAX debug call
- wpawLog.log('\n=== Fetching from server ===');
- $.ajax({
- url: wpawSettingsV2.ajaxUrl,
- type: 'POST',
- data: {
- action: 'wpaw_debug_models',
- nonce: wpawSettingsV2.nonce
- },
- success: function (response) {
- if (response.success) {
- wpawLog.log('Server response:', response.data);
- wpawLog.log('Total models from API:', response.data.total_models);
- wpawLog.log('Found models:', response.data.found_models);
- wpawLog.log('Missing models:', response.data.missing_models);
- wpawLog.log('Sample models:', response.data.sample_models);
- } else {
- wpawLog.error('Error:', response.data.message);
- }
- },
- error: function (xhr, status, error) {
- wpawLog.error('AJAX error:', error);
- }
- });
- };
-
- // Initialize when document is ready
- $(document).ready(function () {
- initSelect2();
- initApiKeyToggle();
- initCustomLanguages();
- initCostLog();
- initPresets();
- initRefreshModels();
- initFormSave();
- initCustomModels();
- updateCostEstimate();
-
- // Update cost when provider routing changes
- $('select[name^="wp_agentic_writer_settings[task_providers]"]').on('change', function () {
- updateCostEstimate();
- });
-
- // Log debug info
- wpawLog.log('WPAW Settings V2 loaded. Run wpawDebugModels() to debug model issues.');
- });
-
- /**
- * Initialize Select2 for model dropdowns
- */
- function initSelect2() {
- if (typeof wpawSettingsV2 === 'undefined') return;
-
- state.models = wpawSettingsV2.models || {};
-
- $('.wpaw-select2-model').each(function () {
- const $select = $(this);
- const modelType = $select.data('model-type') || 'execution';
- const models = getModelsForType(modelType);
- const currentValue = wpawSettingsV2.currentModels[modelType] || $select.val();
-
- // Clear any pre-existing options
- $select.empty();
-
- $select.select2({
- theme: 'bootstrap-5',
- width: '100%',
- placeholder: wpawSettingsV2.i18n.searchPlaceholder || 'Search models...',
- allowClear: true,
- data: formatModelsForSelect2(models),
- templateResult: formatModelOption,
- templateSelection: formatModelSelection,
- language: {
- noResults: function () {
- return wpawSettingsV2.i18n.noResults || 'No models found';
- }
- }
- });
-
- // Set current value after Select2 is initialized
- if (currentValue) {
- const modelData = models.find(m => m.id === currentValue);
- if (modelData) {
- // Create a new option with the proper formatted name
- const newOption = new Option(modelData.name || currentValue, currentValue, true, true);
- $select.append(newOption).trigger('change');
- } else {
- wpawLog.warn('Model not found in list:', currentValue);
- }
- }
-
- // Update cost estimate on change
- $select.on('change', function () {
- updateCostEstimate();
- });
- });
- }
-
- /**
- * Get models for a specific type
- */
- function getModelsForType(type) {
- if (type === 'clarity' || type === 'refinement' || type === 'chat') {
- return state.models.execution?.all || state.models.planning?.all || [];
- }
-
- // Merge 'all' and 'recommended' arrays for complete model list
- const allModels = state.models[type]?.all || [];
- const recommended = state.models[type]?.recommended || [];
-
- // Combine and deduplicate by id
- const combined = [...allModels];
- recommended.forEach(model => {
- if (!combined.find(m => m.id === model.id)) {
- combined.push(model);
- }
- });
-
- return combined;
- }
-
- /**
- * Format models for Select2
- */
- function formatModelsForSelect2(models) {
- if (!Array.isArray(models)) return [];
-
- return models.map(model => ({
- id: model.id,
- text: model.name || model.id,
- is_free: model.is_free || false,
- is_custom: model.is_custom || false,
- pricing: model.pricing || {}
- }));
- }
-
- /**
- * Format model option in dropdown - trust OpenRouter's is_free and pricing
- */
- function formatModelOption(model) {
- if (!model.id) return model.text;
-
- const $container = $('');
- const $name = $('').text(model.text);
- $container.append($name);
-
- // Custom models get "Custom" badge
- if (model.is_custom) {
- const $badge = $('Custom');
- $container.append($badge);
- } else if (model.is_free) {
- const $badge = $('FREE');
- $container.append($badge);
- } else {
- // Show price: prompt for text models, image for image models
- const promptPrice = parseFloat(model.pricing?.prompt) || 0;
- const imagePrice = parseFloat(model.pricing?.image) || 0;
- const price = imagePrice > 0 ? imagePrice : promptPrice;
-
- if (price > 0) {
- const cost = (price * 1000000).toFixed(2);
- const $cost = $('').text(`$${cost}/1M`);
- $container.append($cost);
- }
- }
-
- return $container;
- }
-
- /**
- * Format selected model - just show name
- */
- function formatModelSelection(model) {
- if (!model.id) return model.text;
- return model.text;
- }
-
- /**
- * Initialize preset cards
- */
- function initPresets() {
- $('.preset-card').on('click keypress', function (e) {
- if (e.type === 'keypress' && e.which !== 13) return;
-
- const preset = $(this).data('preset');
- if (!preset || !presets[preset]) return;
-
- applyPreset(preset);
-
- // Update UI
- $('.preset-card').removeClass('border-primary');
- $(this).addClass('border-primary');
-
- showToast('Preset applied: ' + preset.charAt(0).toUpperCase() + preset.slice(1), 'success');
- });
- }
-
- /**
- * Apply a preset configuration
- */
- function applyPreset(presetName) {
- const config = presets[presetName];
- if (!config) return;
-
- const fieldMap = {
- chat: '#chat_model',
- clarity: '#clarity_model',
- planning: '#planning_model',
- writing: '#writing_model',
- refinement: '#refinement_model',
- image: '#image_model'
- };
-
- Object.keys(config).forEach(type => {
- const $select = $(fieldMap[type]);
- if (!$select.length) return;
-
- const targetId = config[type];
-
- // Add option if not exists
- if (!$select.find(`option[value="${targetId}"]`).length) {
- const displayName = targetId.split('/').pop().replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
- $select.append(new Option(displayName, targetId, false, false));
- }
-
- $select.val(targetId).trigger('change');
- });
-
- updateCostEstimate();
- }
-
- /**
- * Initialize API key visibility toggle
- */
- function initApiKeyToggle() {
- $('#wpaw-toggle-api-key').on('click', function () {
- const $input = $('#openrouter_api_key');
- const type = $input.attr('type');
- $input.attr('type', type === 'password' ? 'text' : 'password');
- $(this).find('.bi')
- .toggleClass('bi-eye', type === 'text')
- .toggleClass('bi-eye-slash', type === 'password');
- });
-
- $('#wpaw-test-api-key').on('click', function () {
- const apiKey = $('#openrouter_api_key').val();
- if (!apiKey) {
- showToast('Please enter an API key first', 'warning');
- return;
- }
-
- const $btn = $(this);
- const originalText = $btn.html();
- $btn.prop('disabled', true).html('Testing...');
-
- $.ajax({
- url: wpawSettingsV2.ajaxUrl,
- type: 'POST',
- data: {
- action: 'wpaw_test_api_connection',
- nonce: wpawSettingsV2.nonce
- },
- success: function (response) {
- if (response.success) {
- showToast(response.data.message + ' (' + response.data.models_count + ' models available)', 'success');
- } else {
- showToast(response.data.message || 'API test failed', 'danger');
- }
- },
- error: function () {
- showToast('Failed to test API connection', 'danger');
- },
- complete: function () {
- $btn.prop('disabled', false).html(originalText);
- }
- });
- });
- }
-
- /**
- * Initialize custom languages management
- */
- function initCustomLanguages() {
- $('#wpaw-add-custom-language').on('click', function () {
- const html = `
-
-
-
-
- `;
- $('#wpaw-custom-languages-list').append(html);
- });
-
- $(document).on('click', '.wpaw-remove-language', function () {
- $(this).closest('.wpaw-custom-language-item').remove();
- });
- }
-
- /**
- * Initialize cost log functionality
- */
- function initCostLog() {
- wpawLog.log('Initializing cost log...');
-
- // Load on tab show
- $('#cost-log-tab').on('shown.bs.tab', function () {
- wpawLog.log('Cost log tab shown, loading data...');
- loadCostLogData();
- });
-
- // Auto-load if cost-log tab is active on page load
- if ($('#cost-log-tab').hasClass('active')) {
- wpawLog.log('Cost log tab is active on load, loading data...');
- loadCostLogData();
- }
-
- // Filter controls
- $('#wpaw-apply-filters').on('click', function () {
- state.filters = {
- post: $('#wpaw-filter-post').val(),
- model: $('#wpaw-filter-model').val(),
- type: $('#wpaw-filter-type').val(),
- dateFrom: $('#wpaw-filter-date-from').val(),
- dateTo: $('#wpaw-filter-date-to').val()
- };
- state.currentPage = 1;
- loadCostLogData();
- });
-
- $('#wpaw-clear-filters').on('click', function () {
- $('#wpaw-filter-post').val('');
- $('#wpaw-filter-model').val('');
- $('#wpaw-filter-type').val('');
- $('#wpaw-filter-date-from').val('');
- $('#wpaw-filter-date-to').val('');
- state.filters = { post: '', model: '', type: '', dateFrom: '', dateTo: '' };
- state.currentPage = 1;
- loadCostLogData();
- });
-
- $('#wpaw-per-page').on('change', function () {
- state.perPage = parseInt($(this).val()) || 25;
- state.currentPage = 1;
- loadCostLogData();
- });
-
- // Export CSV
- $('#wpaw-export-csv').on('click', exportCostLogCSV);
-
- // Pagination clicks
- $(document).on('click', '#wpaw-pagination .page-link', function (e) {
- e.preventDefault();
- const page = $(this).data('page');
- if (page && page !== state.currentPage) {
- state.currentPage = page;
- loadCostLogData();
- }
- });
- }
-
- /**
- * Load cost log data via AJAX
- */
- function loadCostLogData() {
- wpawLog.log('loadCostLogData called');
- wpawLog.log('wpawSettingsV2:', wpawSettingsV2);
- wpawLog.log('State:', state);
-
- const $tbody = $('#wpaw-cost-log-tbody');
- wpawLog.log('Table tbody found:', $tbody.length);
-
- $tbody.html(`
-
- |
-
- Loading...
-
- |
-
- `);
-
- const ajaxData = {
- action: 'wpaw_get_cost_log_data',
- nonce: wpawSettingsV2.nonce,
- page: state.currentPage,
- per_page: state.perPage,
- filter_post: state.filters.post,
- filter_model: state.filters.model,
- filter_type: state.filters.type,
- filter_date_from: state.filters.dateFrom,
- filter_date_to: state.filters.dateTo
- };
-
- wpawLog.log('AJAX request data:', ajaxData);
-
- $.ajax({
- url: wpawSettingsV2.ajaxUrl,
- type: 'POST',
- data: ajaxData,
- success: function (response) {
- wpawLog.log('Cost log response:', response);
- if (response.success) {
- renderCostLogTable(response.data);
- updateCostLogStats(response.data.stats);
- renderActionSummary(response.data.stats);
- updateFilterOptions(response.data.filters);
- renderPagination(response.data);
- } else {
- const errorMsg = response.data?.message || 'Error loading data';
- wpawLog.error('Cost log error:', errorMsg);
- $tbody.html('| ' + escapeHtml(errorMsg) + ' | ');
- }
- },
- error: function (xhr, status, error) {
- wpawLog.error('Cost log AJAX error:', status, error);
- wpawLog.error('XHR:', xhr);
- wpawLog.error('Response text:', xhr.responseText);
- $tbody.html('| Failed to load cost log. Check browser console for details. | ');
- }
- });
- }
-
- /**
- * Render cost log table (grouped by post)
- */
- function renderCostLogTable(data) {
- const $tbody = $('#wpaw-cost-log-tbody');
- const records = data.records || [];
-
- if (records.length === 0) {
- $tbody.html('| No cost records found. | ');
- return;
- }
-
- let html = '';
- records.forEach((group, index) => {
- const collapseId = `collapse-post-${group.post_id}-${index}`;
- const detailsTotal = Number(group.details_total || (group.details || []).length || 0);
- const detailsInitialEnd = Math.min(state.childPerPage, detailsTotal);
- const postCell = group.post_link
- ? `${escapeHtml(group.post_title)}`
- : `${escapeHtml(group.post_title)}`;
-
- // Main row (clickable to expand)
- html += `
-
- |
-
- ${postCell}
- |
-
- ${group.call_count} ${group.call_count === 1 ? 'call' : 'calls'}
- |
- $${group.total_cost} |
-
- `;
-
- // Collapsible details row
- const detailsHint = detailsTotal > 0
- ? `Showing 1-${detailsInitialEnd} of ${detailsTotal} calls `
- : '';
- html += `
-
-
- ${detailsHint}
-
-
-
-
- |
- |
- |
- |
- |
- |
-
-
-
- `;
-
- // Detail rows
- group.details.forEach(detail => {
- html += `
-
- | ${escapeHtml(detail.created_at)} |
- ${escapeHtml(detail.model)} |
- ${escapeHtml(detail.action)} |
- ${detail.input_tokens} |
- ${detail.output_tokens} |
- $${detail.cost} |
-
- `;
- });
-
- html += `
-
-
- |
-
- `;
- });
-
- $tbody.html(html);
-
- // Add collapse event listeners to rotate icon
- $('.wpaw-group-row').on('click', function () {
- const $icon = $(this).find('.wpaw-collapse-icon');
- setTimeout(() => {
- const target = $(this).data('bs-target');
- const isExpanded = $(target).hasClass('show');
- $icon.toggleClass('dashicons-arrow-right-alt2', !isExpanded);
- $icon.toggleClass('dashicons-arrow-down-alt2', isExpanded);
- if (isExpanded) {
- renderChildPage($(target), 1);
- }
- }, 10);
- });
-
- $(document).off('click.wpawChildPager').on('click.wpawChildPager', '.wpaw-child-prev, .wpaw-child-next', function () {
- const $btn = $(this);
- const $row = $btn.closest('.wpaw-collapse-row');
- const currentPage = Number($row.find('.wpaw-child-page').text() || 1);
- const totalPages = Number($row.find('.wpaw-child-pages').text() || 1);
- const nextPage = $btn.hasClass('wpaw-child-prev')
- ? Math.max(1, currentPage - 1)
- : Math.min(totalPages, currentPage + 1);
- renderChildPage($row, nextPage);
- });
-
- // Ensure initial expanded state also starts at page 1 (20 rows),
- // not full unpaginated detail rows.
- $('.wpaw-collapse-row').each(function () {
- renderChildPage($(this), 1);
- });
-
- // Update records info
- const start = (data.current_page - 1) * data.per_page + 1;
- const end = Math.min(data.current_page * data.per_page, data.total_items);
- $('#wpaw-records-info').text(`Showing ${start}-${end} of ${data.total_items} posts`);
- }
-
- function renderChildPage($row, page) {
- const perPage = state.childPerPage || 20;
- const $rows = $row.find('.wpaw-details-body tr');
- const totalRows = $rows.length;
- const totalPages = Math.max(1, Math.ceil(totalRows / perPage));
- const safePage = Math.max(1, Math.min(totalPages, page));
- const startIdx = (safePage - 1) * perPage;
- const endIdx = Math.min(totalRows, startIdx + perPage);
-
- $rows.hide();
- $rows.slice(startIdx, endIdx).show();
-
- $row.find('.wpaw-child-page').text(safePage);
- $row.find('.wpaw-child-pages').text(totalPages);
- $row.find('.wpaw-child-range-start').text(totalRows === 0 ? 0 : startIdx + 1);
- $row.find('.wpaw-child-range-end').text(endIdx);
- $row.find('.wpaw-child-prev').prop('disabled', safePage <= 1);
- $row.find('.wpaw-child-next').prop('disabled', safePage >= totalPages);
- }
-
- /**
- * Update cost log stats
- */
- function updateCostLogStats(stats) {
- if (!stats) return;
- $('#wpaw-stat-all-time').text('$' + stats.all_time);
- $('#wpaw-stat-monthly').text('$' + stats.monthly);
- $('#wpaw-stat-today').text('$' + stats.today);
- $('#wpaw-stat-avg').text('$' + stats.avg_per_post);
- }
-
- function renderActionSummary(stats) {
- const $tbody = $('#wpaw-action-summary-tbody');
- if (!$tbody.length) return;
-
- const rows = Array.isArray(stats?.action_summary) ? stats.action_summary : [];
- if (rows.length === 0) {
- $tbody.html('| No action cost records yet. | ');
- return;
- }
-
- const formatAction = (action) => String(action || '')
- .replace(/_/g, ' ')
- .replace(/\b\w/g, c => c.toUpperCase());
-
- let html = '';
- rows.forEach((row) => {
- html += `
-
- | ${escapeHtml(formatAction(row.action))} |
- ${Number(row.calls || 0)} |
- $${escapeHtml(String(row.total || '0.0000'))} |
- $${escapeHtml(String(row.average || '0.0000'))} |
-
- `;
- });
- $tbody.html(html);
- }
-
- /**
- * Update filter dropdown options
- */
- function updateFilterOptions(filters) {
- if (!filters) return;
-
- // Models
- const $modelSelect = $('#wpaw-filter-model');
- const currentModel = $modelSelect.val();
- $modelSelect.find('option:not(:first)').remove();
- (filters.models || []).forEach(model => {
- $modelSelect.append(new Option(model, model, false, model === currentModel));
- });
-
- // Types
- const $typeSelect = $('#wpaw-filter-type');
- const currentType = $typeSelect.val();
- $typeSelect.find('option:not(:first)').remove();
- (filters.types || []).forEach(type => {
- const label = type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
- $typeSelect.append(new Option(label, type, false, type === currentType));
- });
- }
-
- /**
- * Render pagination
- */
- function renderPagination(data) {
- const $pagination = $('#wpaw-pagination');
- const totalPages = data.total_pages || 1;
- const currentPage = data.current_page || 1;
-
- if (totalPages <= 1) {
- $pagination.html('');
- return;
- }
-
- let html = '';
-
- // Previous
- html += `
- «
- `;
-
- // Page numbers
- const maxVisible = 5;
- let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
- let endPage = Math.min(totalPages, startPage + maxVisible - 1);
-
- if (endPage - startPage < maxVisible - 1) {
- startPage = Math.max(1, endPage - maxVisible + 1);
- }
-
- if (startPage > 1) {
- html += `1`;
- if (startPage > 2) {
- html += `...`;
- }
- }
-
- for (let i = startPage; i <= endPage; i++) {
- html += `
- ${i}
- `;
- }
-
- if (endPage < totalPages) {
- if (endPage < totalPages - 1) {
- html += `...`;
- }
- html += `${totalPages}`;
- }
-
- // Next
- html += `
- »
- `;
-
- $pagination.html(html);
- }
-
- /**
- * Export cost log to CSV
- */
- function exportCostLogCSV() {
- const table = $('#wpaw-cost-log-table');
- const rows = [];
-
- // Headers
- const headers = [];
- table.find('thead th').each(function () {
- headers.push($(this).text().trim());
- });
- rows.push(headers.join(','));
-
- // Data rows
- table.find('tbody tr').each(function () {
- const row = [];
- $(this).find('td').each(function () {
- let text = $(this).text().trim().replace(/"/g, '""');
- row.push('"' + text + '"');
- });
- if (row.length > 0) {
- rows.push(row.join(','));
- }
- });
-
- // Download
- const csvContent = rows.join('\n');
- const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
- const url = URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = 'wp-agentic-writer-costs-' + new Date().toISOString().split('T')[0] + '.csv';
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- URL.revokeObjectURL(url);
-
- showToast('CSV exported successfully', 'success');
- }
-
- /**
- * Initialize refresh models button
- */
- function initRefreshModels() {
- $('#wpaw-refresh-models').on('click', function () {
- const $btn = $(this);
- const $spinner = $('#wpaw-models-spinner');
- const $message = $('#wpaw-models-message');
-
- $btn.prop('disabled', true);
- $spinner.removeClass('d-none');
-
- $.ajax({
- url: wpawSettingsV2.ajaxUrl,
- type: 'POST',
- data: {
- action: 'wpaw_refresh_models',
- nonce: wpawSettingsV2.nonce
- },
- success: function (response) {
- if (response.success) {
- // Update both state and wpawSettingsV2 with new models
- state.models = response.data.models;
- wpawSettingsV2.models = response.data.models;
-
- // Destroy all Select2 instances
- $('.wpaw-select2-model').each(function () {
- $(this).select2('destroy');
- });
-
- // Reinitialize Select2 with new models
- initSelect2();
-
- showToast(response.data.message || 'Models refreshed!', 'success');
- } else {
- showToast(response.data?.message || 'Failed to refresh models', 'danger');
- }
- },
- error: function () {
- showToast('Failed to refresh models', 'danger');
- },
- complete: function () {
- $btn.prop('disabled', false);
- $spinner.addClass('d-none');
- }
- });
- });
- }
-
- /**
- * Initialize form save handling
- */
- function initFormSave() {
- $('#wpaw-reset-settings').on('click', function () {
- if (confirm(wpawSettingsV2.i18n.confirmReset || 'Are you sure you want to reset all settings to defaults?')) {
- // Apply balanced preset as default
- applyPreset('balanced');
- showToast('Settings reset to defaults. Click Save to apply.', 'info');
- }
- });
- }
-
- /**
- * Update cost estimate based on selected models
- */
- function updateCostEstimate() {
- // Simple estimate calculation
- // Planning: ~2K tokens, Writing: ~4K tokens, 1 image
- const planningModel = $('#planning_model').val();
- const writingModel = $('#writing_model').val();
-
- // Get advanced provider routing
- const writingProvider = $('select[name="wp_agentic_writer_settings[task_providers][writing]"]').val();
-
- let estimate = 0.10; // Default balanced estimate
-
- if (writingProvider && writingProvider !== 'openrouter') {
- estimate = 0.00; // Local and Codex are free
- } else if (writingModel) {
- if (writingModel.includes('local') || writingModel === 'claude-local' || writingModel === 'llama-local') {
- estimate = 0.00;
- } else if (writingModel.includes('mistral') || writingModel.includes('gemini')) {
- estimate = 0.06;
- } else if (writingModel.includes('gpt-4.1') || writingModel.includes('opus')) {
- estimate = 0.31;
- } else if (writingModel.includes('claude') || writingModel.includes('sonnet')) {
- estimate = 0.14;
- }
- }
-
- $('#wpaw-cost-estimate').text(estimate === 0 ? '$0.00 (Free)' : '~$' + estimate.toFixed(2));
- }
-
- /**
- * Show toast notification
- */
- function showToast(message, type) {
- const $toast = $('#wpaw-toast');
- const $body = $('#wpaw-toast-message');
-
- $body.text(message);
- $toast.removeClass('bg-success bg-danger bg-warning bg-info text-white');
-
- if (type === 'success') {
- $toast.addClass('bg-success text-white');
- } else if (type === 'danger' || type === 'error') {
- $toast.addClass('bg-danger text-white');
- } else if (type === 'warning') {
- $toast.addClass('bg-warning');
- } else {
- $toast.addClass('bg-info text-white');
- }
-
- const toast = new bootstrap.Toast($toast[0], { delay: 3000 });
- toast.show();
- }
-
- /**
- * Escape HTML entities
- */
- function escapeHtml(text) {
- if (!text) return '';
- const div = document.createElement('div');
- div.textContent = text;
- return div.innerHTML;
- }
-
- /**
- * Initialize custom models repeater with auto-save
- */
- function initCustomModels() {
- let customModelIndex = $('#wpaw-custom-models-list .custom-model-row').length;
-
- // Add new custom model row
- $('#wpaw-add-custom-model').on('click', function () {
- const template = $('#wpaw-custom-model-template').html();
- const newRow = template.replace(/__INDEX__/g, customModelIndex);
- $('#wpaw-custom-models-list').append(newRow);
- customModelIndex++;
-
- // Focus the new model ID input
- $('#wpaw-custom-models-list .custom-model-row:last input:first').focus();
- });
-
- // Auto-save on blur from model ID input
- $('#wpaw-custom-models-list').on('blur', '.wpaw-custom-model-id', function () {
- const $row = $(this).closest('.custom-model-row');
- const modelId = $row.find('.wpaw-custom-model-id').val().trim();
-
- if (modelId) {
- saveCustomModel($row);
- }
- });
-
- // Auto-save on blur from model name input
- $('#wpaw-custom-models-list').on('blur', '.wpaw-custom-model-name', function () {
- const $row = $(this).closest('.custom-model-row');
- const modelId = $row.find('.wpaw-custom-model-id').val().trim();
-
- if (modelId) {
- saveCustomModel($row);
- }
- });
-
- // Auto-save on type change
- $('#wpaw-custom-models-list').on('change', '.wpaw-custom-model-type', function () {
- const $row = $(this).closest('.custom-model-row');
- const modelId = $row.find('.wpaw-custom-model-id').val().trim();
-
- if (modelId) {
- saveCustomModel($row);
- }
- });
-
- // Delete custom model
- $('#wpaw-custom-models-list').on('click', '.wpaw-remove-custom-model', function () {
- const $row = $(this).closest('.custom-model-row');
- const modelId = $row.find('.wpaw-custom-model-id').val().trim();
-
- if (modelId) {
- deleteCustomModel(modelId, $row);
- } else {
- $row.remove();
- }
- });
- }
-
- /**
- * Save custom model via AJAX
- */
- function saveCustomModel($row) {
- const modelId = $row.find('.wpaw-custom-model-id').val().trim();
- const modelName = $row.find('.wpaw-custom-model-name').val().trim();
- const modelType = $row.find('.wpaw-custom-model-type').val();
-
- if (!modelId) return;
-
- // Show saving indicator
- $row.css('opacity', '0.6');
-
- $.ajax({
- url: wpawSettingsV2.ajaxUrl,
- type: 'POST',
- data: {
- action: 'wpaw_save_custom_model',
- nonce: wpawSettingsV2.nonce,
- model_id: modelId,
- model_name: modelName,
- model_type: modelType
- },
- success: function (response) {
- if (response.success) {
- // Mark row as saved
- $row.attr('data-saved', 'true');
-
- // Update models and refresh Select2
- state.models = response.data.models;
- wpawSettingsV2.models = response.data.models;
- refreshAllSelect2();
-
- // Show toast only on first save
- if (!$row.data('first-save-done')) {
- showToast('Model saved!', 'success');
- $row.data('first-save-done', true);
- }
- } else {
- showToast(response.data?.message || 'Failed to save', 'danger');
- }
- },
- error: function () {
- showToast('Failed to save model', 'danger');
- },
- complete: function () {
- $row.css('opacity', '1');
- }
- });
- }
-
- /**
- * Delete custom model via AJAX
- */
- function deleteCustomModel(modelId, $row) {
- $row.css('opacity', '0.6');
-
- $.ajax({
- url: wpawSettingsV2.ajaxUrl,
- type: 'POST',
- data: {
- action: 'wpaw_delete_custom_model',
- nonce: wpawSettingsV2.nonce,
- model_id: modelId
- },
- success: function (response) {
- if (response.success) {
- $row.remove();
- state.models = response.data.models;
- wpawSettingsV2.models = response.data.models;
- refreshAllSelect2();
- showToast('Model deleted!', 'success');
- } else {
- showToast(response.data?.message || 'Failed to delete', 'danger');
- $row.css('opacity', '1');
- }
- },
- error: function () {
- showToast('Failed to delete model', 'danger');
- $row.css('opacity', '1');
- }
- });
- }
-
- /**
- * Refresh all Select2 dropdowns with current model data
- */
- function refreshAllSelect2() {
- $('.wpaw-select2-model').each(function () {
- const $select = $(this);
- const currentValue = $select.val();
-
- // Destroy and reinitialize
- if ($select.hasClass('select2-hidden-accessible')) {
- $select.select2('destroy');
- }
- });
-
- // Reinitialize all
- initSelect2();
- }
-
- /**
- * Workflow Pipeline Status Display
- * Updates the 5-step workflow visualization based on backend status
- */
- function initWorkflowDisplay() {
- // Status mapping from backend to step index
- // Backend statuses: starting, planning, plan_complete, writing, writing_section, refinement, checking, complete
- const statusToStep = {
- 'starting': 1, // Context
- 'planning': 2, // Planning
- 'plan_complete': 2, // Planning (done)
- 'writing': 3, // Writing
- 'writing_section': 3, // Writing
- 'refinement': 4, // Refinement
- 'refining': 4, // Refinement
- 'checking': 4, // Refinement
- 'complete': 5, // Done
- 'done': 5, // Done
- };
-
- // Status messages mapping
- const statusMessages = {
- 'starting': 'Loading context and analyzing post...',
- 'planning': 'Creating article outline...',
- 'plan_complete': 'Outline ready, starting to write...',
- 'writing': 'Generating article content...',
- 'writing_section': 'Writing section content...',
- 'refinement': 'Polishing and optimizing content...',
- 'refining': 'Applying refinements...',
- 'checking': 'Checking quality and consistency...',
- 'complete': 'Article finished successfully!',
- 'done': 'All done!',
- };
-
- /**
- * Update workflow display based on status
- * @param {string} status - Backend status string
- * @param {string} message - Optional custom message
- */
- window.updateWorkflowStatus = function(status, message) {
- const stepIndex = statusToStep[status] || 0;
- const $workflow = $('#wpaw-workflow-display');
-
- if (!$workflow.length) return;
-
- const $steps = $workflow.find('.wpaw-step');
- const $connectors = $workflow.find('.wpaw-step-connector');
- const $statusText = $('#wpaw-workflow-status');
- const $messageEl = $('#wpaw-workflow-message');
-
- // Reset all steps
- $steps.removeClass('active completed pending error');
- $connectors.removeClass('active completed');
-
- // Update steps based on current status
- $steps.each(function(index) {
- const $step = $(this);
- const stepNum = index + 1;
-
- if (stepNum < stepIndex) {
- // Completed steps
- $step.addClass('completed');
- if ($connectors[index]) {
- $($connectors[index]).addClass('completed');
- }
- } else if (stepNum === stepIndex) {
- // Active step
- $step.addClass('active');
- if ($connectors[index]) {
- $($connectors[index]).addClass('active');
- }
- } else {
- // Pending steps
- $step.addClass('pending');
- }
- });
-
- // Update status text
- const statusText = stepIndex > 0 ? `Step ${stepIndex} of 5` : 'Idle';
- $statusText.text(statusText);
-
- // Show message if provided
- if (message || statusMessages[status]) {
- const displayMessage = message || statusMessages[status];
- $messageEl.text(displayMessage).show();
-
- // Add appropriate class
- $messageEl.removeClass('success error');
- if (status === 'complete' || status === 'done') {
- $messageEl.addClass('success');
- } else if (status === 'error') {
- $messageEl.addClass('error');
- }
- } else {
- $messageEl.hide();
- }
- };
-
- // Demo function for testing - cycles through all steps
- window.demoWorkflow = function() {
- const statuses = ['starting', 'planning', 'plan_complete', 'writing', 'refinement', 'complete'];
- let index = 0;
-
- const interval = setInterval(() => {
- updateWorkflowStatus(statuses[index]);
- index++;
-
- if (index >= statuses.length) {
- clearInterval(interval);
- setTimeout(() => {
- // Reset to idle
- $('#wpaw-workflow-status').text('Idle');
- $('#wpaw-workflow-message').hide();
- $('.wpaw-step').removeClass('active completed').addClass('pending');
- $('.wpaw-step-connector').removeClass('active completed');
- }, 2000);
- }
- }, 1000);
- };
-
- // Initialize with idle state
- updateWorkflowStatus('idle');
- }
-
- // Initialize workflow display on page load
- $(document).ready(function() {
- initWorkflowDisplay();
- });
-
-})(jQuery);
diff --git a/assets/js/settings.js b/assets/js/settings.js
deleted file mode 100644
index d608bb8..0000000
--- a/assets/js/settings.js
+++ /dev/null
@@ -1,293 +0,0 @@
-/**
- * WP Agentic Writer - Settings Page Scripts
- *
- * @package WP_Agentic_Writer
- */
-
-jQuery( document ).ready( function( $ ) {
- 'use strict';
-
- // ===========================
- // TAB NAVIGATION
- // ===========================
- $( '.wpaw-settings-nav-btn' ).on( 'click', function() {
- const tab = $( this ).data( 'tab' );
-
- // Update nav buttons
- $( '.wpaw-settings-nav-btn' ).removeClass( 'active' );
- $( this ).addClass( 'active' );
-
- // Update tab content
- $( '.wpaw-tab-content' ).removeClass( 'active' );
- $( `.wpaw-tab-content[data-tab="${tab}"]` ).addClass( 'active' );
- } );
-
- // ===========================
- // SELECT2 INITIALIZATION
- // ===========================
- function initSelect2() {
- if ( ! $.fn.select2 ) {
- return;
- }
-
- // Initialize Select2 for model dropdowns
- $( '.wpaw-select2-model' ).each( function() {
- const $select = $( this );
-
- // Destroy existing Select2 if present
- if ( $select.hasClass( 'select2-hidden-accessible' ) ) {
- $select.select2( 'destroy' );
- }
-
- $select.select2( {
- placeholder: 'Search for a model...',
- allowClear: false,
- width: '100%',
- templateResult: formatModelOption,
- templateSelection: formatModelSelection,
- } );
- } );
-
- // Initialize Select2 for Context Categories (multiple with tags)
- const $contextCategories = $( '#required_context_categories' );
- if ( $contextCategories.length && ! $contextCategories.hasClass( 'select2-hidden-accessible' ) ) {
- $contextCategories.select2( {
- placeholder: 'Select categories...',
- allowClear: true,
- width: '100%',
- tags: false,
- closeOnSelect: false,
- } );
- }
- }
-
- function formatModelOption( model ) {
- if ( ! model.id ) {
- return model.text;
- }
- const isFree = model.text && model.text.includes( '(Free)' );
- const $option = $( '' + model.text + '' );
- if ( isFree ) {
- $option.css( 'color', '#28a745' );
- }
- return $option;
- }
-
- function formatModelSelection( model ) {
- return model.text || model.id;
- }
-
- // Store model pricing data from API (populated by updateModelDropdowns)
- let modelPricing = {};
-
- // Estimate cost per article using dynamic pricing from API (6 models)
- // Estimates: chat 200 tokens, clarity 300, planning 500, writing 3K, refinement 1K, 1 image
- function estimateArticleCost() {
- const chatModel = $( '#chat_model' ).val();
- const clarityModel = $( '#clarity_model' ).val();
- const planningModel = $( '#planning_model' ).val();
- const writingModel = $( '#writing_model' ).val();
- const refinementModel = $( '#refinement_model' ).val();
- const imageModel = $( '#image_model' ).val();
-
- let totalCost = 0;
-
- // Helper to calculate cost for a model
- const calcCost = ( modelId, inputTokens, outputTokens ) => {
- const pricing = modelPricing[modelId];
- if ( pricing ) {
- return ( pricing.prompt * inputTokens ) + ( pricing.completion * outputTokens );
- }
- return 0;
- };
-
- // Chat cost (minimal - 100 in, 100 out)
- totalCost += calcCost( chatModel, 100, 100 );
-
- // Clarity cost (300 in, 300 out)
- totalCost += calcCost( clarityModel, 300, 300 );
-
- // Planning cost (500 in, 500 out)
- totalCost += calcCost( planningModel, 500, 500 );
-
- // Writing cost (1.5K in, 1.5K out - main article generation)
- totalCost += calcCost( writingModel, 1500, 1500 );
-
- // Refinement cost (500 in, 500 out)
- totalCost += calcCost( refinementModel, 500, 500 );
-
- // Image cost (1 image)
- const imagePricing = modelPricing[imageModel];
- if ( imagePricing && imagePricing.image > 0 ) {
- totalCost += imagePricing.image;
- }
-
- return totalCost;
- }
-
- // Update cost estimation display
- function updateCostEstimate() {
- const cost = estimateArticleCost();
- const $display = $( '#wpaw-cost-estimate' );
-
- if ( $display.length ) {
- if ( cost > 0 ) {
- $display.text( '~$' + cost.toFixed(4) + ' per article' );
- } else {
- $display.text( 'Free or pricing unavailable' );
- }
- }
- }
-
- // Listen for model changes (6 models)
- $( '#chat_model, #clarity_model, #planning_model, #writing_model, #refinement_model, #image_model' ).on( 'change', function() {
- updateCostEstimate();
- } );
-
- // Initialize on page load
- updateCostEstimate();
- initSelect2();
-
- // Refresh models button.
- $( '#wpaw-refresh-models' ).on( 'click', function() {
- const $button = $( this );
- const $spinner = $( '#wpaw-models-spinner' );
-
- $button.prop( 'disabled', true );
- $spinner.show();
-
- $.ajax( {
- url: wpawSettings.ajaxUrl,
- type: 'POST',
- data: {
- action: 'wpaw_refresh_models',
- nonce: wpawSettings.nonce,
- },
- success: function( response ) {
- if ( response.success ) {
- // Update model dropdowns.
- updateModelDropdowns( response.data.models );
-
- // Show success message.
- $( '#wpaw-models-message' )
- .removeClass( 'notice-error' )
- .addClass( 'notice-success' )
- .text( response.data.message )
- .show();
- } else {
- showError( response.data.message || 'Unknown error' );
- }
- },
- error: function() {
- showError( 'Failed to refresh models. Please try again.' );
- },
- complete: function() {
- $button.prop( 'disabled', false );
- $spinner.hide();
-
- // Auto-hide message after 3 seconds.
- setTimeout( function() {
- $( '#wpaw-models-message' ).fadeOut();
- }, 3000 );
- }
- } );
- } );
-
- // Initialize model dropdowns on page load.
- if ( wpawSettings.models ) {
- updateModelDropdowns( wpawSettings.models );
- }
-
- /**
- * Update model dropdowns with fetched models.
- * Shows all models in a flat list (no optgroups).
- */
- function updateModelDropdowns( models ) {
- /**
- * Populate a select dropdown with models and store pricing.
- * @param {jQuery} $select - The select element
- * @param {Array} allModels - Array of all models
- * @param {string} currentValue - Currently saved value
- */
- const populateSelect = ( $select, allModels, currentValue ) => {
- $select.empty();
-
- // Add all models to dropdown and store pricing
- if ( allModels && allModels.length ) {
- allModels.forEach( function( model ) {
- // Clean model name - remove existing (free) suffix to avoid duplication
- let cleanName = model.name.replace( /\s*\(free\)\s*/gi, '' ).trim();
- $select.append( $( ' |