dwindown/wp-agentic-writer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit all files

Browse Source
This commit is contained in:
dwindown
2026-01-28 00:26:00 +07:00
parent 65dd207a74
commit 97426d5ab1
72 changed files with 91484 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
assets/css/admin-v2.css Normal file
View File

@@ -0,0 +1,119 @@
/** 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;
}

964
assets/css/admin.css Normal file
View File

@@ -0,0 +1,964 @@
/**
* 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;
}

449
assets/css/agentic-bootstrap-custom.css Normal file
View File

@@ -0,0 +1,449 @@
/**
* 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;
}

532
assets/css/agentic-components.css Normal file
View File

@@ -0,0 +1,532 @@
/**
* Agentic Vibe - Component Library
* Reusable UI components for settings page
*
* @package WP_Agentic_Writer
* @since 0.2.0
*/
/* ============================================
Stat Cards
============================================ */
.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);
}
.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;
}
.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;
}
.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;
}
.wpaw-stat-value.text-success {
color: var(--wpaw-success);
}
.wpaw-stat-value.text-warning {
color: var(--wpaw-warning);
}
.wpaw-stat-value.text-danger {
color: var(--wpaw-error);
}
.wpaw-stat-value.text-info {
color: var(--wpaw-info);
}
/* ============================================
Status Badges
============================================ */
.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);
}
.wpaw-status-online {
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);
}
.wpaw-status-processing {
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);
}
/* ============================================
Code/Monospace Elements
============================================ */
.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);
}
.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;
}
/* ============================================
Header Section
============================================ */
.wpaw-agentic-header {
margin-bottom: var(--wpaw-space-xl);
}
.wpaw-agentic-header h1 {
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);
}
/* ============================================
Model Cards
============================================ */
.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%;
}
.wpaw-model-card:hover {
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);
}
.wpaw-model-header h5 {
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;
}
.wpaw-model-stat {
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;
}
.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);
}
.wpaw-metric {
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;
}
.wpaw-metric-value {
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);
}
/* ============================================
Cost Table Enhancements
============================================ */
.wpaw-cost-table {
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;
}
.wpaw-cost-table tbody tr {
transition: background-color var(--wpaw-transition-fast);
border-left: 3px solid transparent;
}
.wpaw-cost-table tbody tr:hover {
background: var(--wpaw-bg-secondary) !important;
}
.wpaw-cost-table tbody tr.row-success {
border-left-color: var(--wpaw-success);
}
.wpaw-cost-table tbody tr.row-warning {
border-left-color: var(--wpaw-warning);
}
.wpaw-cost-table tbody tr.row-error {
border-left-color: var(--wpaw-error);
}
.wpaw-cost-table .wpaw-code {
font-size: 0.85em;
}
/* ============================================
Animations
============================================ */
/* Pulse Animation */
@keyframes wpaw-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.wpaw-animate-pulse {
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); }
}
.wpaw-animate-spin {
animation: wpaw-spin 2s linear infinite;
}
/* Fade In */
@keyframes wpaw-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wpaw-fade-in {
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);
}
}
.wpaw-slide-in-right {
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);
}
}
.wpaw-scale-in {
animation: wpaw-scale-in 200ms ease-out;
}
/* Shimmer Loading */
@keyframes wpaw-shimmer {
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;
}
/* ============================================
Utility Classes
============================================ */
/* Hover Lift */
.wpaw-hover-lift {
transition: transform var(--wpaw-transition-normal);
}
.wpaw-hover-lift:hover {
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);
}
.wpaw-glow-primary:hover {
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;
}
/* Icon Dot */
.wpaw-icon-dot {
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;
}
.wpaw-skeleton-text {
height: 1em;
margin-bottom: 0.5em;
}
.wpaw-skeleton-heading {
height: 2em;
margin-bottom: 1em;
}
/* Divider */
.wpaw-divider {
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);
}
/* Section Spacing */
.wpaw-section {
margin-bottom: var(--wpaw-space-2xl);
}
.wpaw-section-header {
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);
}
.wpaw-section-description {
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);
}
.wpaw-empty-state-icon {
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);
}
.wpaw-empty-state-description {
font-size: var(--wpaw-text-sm);
color: var(--wpaw-text-tertiary);
}
/* ============================================
Responsive Utilities
============================================ */
@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);
}
}
/* ============================================
Print Styles
============================================ */
@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;
}
}

98
assets/css/agentic-variables.css Normal file
View File

@@ -0,0 +1,98 @@
/**
* 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;
}

54
assets/css/cost-log-grouped.css Normal file
View File

@@ -0,0 +1,54 @@
/* 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;
}

103
assets/css/editor.css Normal file
View File

@@ -0,0 +1,103 @@
/**
* 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;
}

572
assets/css/settings-v2.css Normal file
View File

@@ -0,0 +1,572 @@
/**
* WP Agentic Writer Settings V2
* Bootstrap-based settings page styles
*/
/* Container override for WordPress admin */
.wpaw-settings-v2-wrap {
margin: 0;
padding: 0;
}
.wpaw-settings-v2-wrap * {
box-sizing: border-box;
}
.wpaw-settings-v2-wrap a {
color: var(--wpaw-primary);
}
/* Card enhancements */
.wpaw-settings-v2-wrap .card {
transition: box-shadow 0.2s ease;
padding: unset;
}
.wpaw-settings-v2-wrap .card:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}
/* Preset cards */
.wpaw-settings-v2-wrap .preset-card {
cursor: pointer;
transition: all 0.2s ease;
}
.wpaw-settings-v2-wrap .preset-card:hover {
transform: translateY(-2px);
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
.wpaw-settings-v2-wrap .preset-card:focus {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
.wpaw-settings-v2-wrap .preset-card.border-primary {
background-color: rgba(13, 110, 253, 0.05);
}
/* Select2 Bootstrap 5 theme adjustments - Dark Theme */
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection {
min-height: 38px;
border-color: #3a4a5e !important;
background-color: #2d3e52 !important;
color: #e8eaed !important;
}
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
line-height: 1.5;
color: #e8eaed !important;
}
ul.select2-results__options{
padding: unset!important;
}
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
color: #b8bcc4 !important;
}
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-dropdown {
border-color: #3a4a5e !important;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
background-color: #243447 !important;
}
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option {
color: #e8eaed !important;
background-color: #243447 !important;
}
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--highlighted {
background-color: #17a2b8 !important;
color: white !important;
}
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-results__option--selected {
background-color: #2d3e52 !important;
}
.wpaw-settings-v2-wrap .select2-container--bootstrap-5 .select2-search__field {
background-color: #2d3e52 !important;
color: #e8eaed !important;
border-color: #3a4a5e !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
right: 1.25rem;
}
/* Form controls - Dark Theme */
.wpaw-settings-v2-wrap .form-control,
.wpaw-settings-v2-wrap .form-select,
.wpaw-settings-v2-wrap input[type="text"],
.wpaw-settings-v2-wrap input[type="number"],
.wpaw-settings-v2-wrap input[type="email"],
.wpaw-settings-v2-wrap input[type="password"],
.wpaw-settings-v2-wrap input[type="date"],
.wpaw-settings-v2-wrap textarea {
background-color: #2d3e52 !important;
color: #e8eaed !important;
border-color: #3a4a5e !important;
}
.wpaw-settings-v2-wrap .form-control:focus,
.wpaw-settings-v2-wrap .form-select:focus,
.wpaw-settings-v2-wrap input:focus,
.wpaw-settings-v2-wrap textarea:focus {
border-color: #17a2b8 !important;
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25) !important;
background-color: #2d3e52 !important;
color: #e8eaed !important;
}
.wpaw-settings-v2-wrap .form-control::placeholder,
.wpaw-settings-v2-wrap input::placeholder,
.wpaw-settings-v2-wrap textarea::placeholder {
color: #8a8f98 !important;
opacity: 0.7 !important;
}
/* Nav pills styling - Dark Theme */
.wpaw-settings-v2-wrap .nav-pills {
border: 1px solid #17a2b8;
border-radius: .75em;
}
.wpaw-settings-v2-wrap .nav-pills .nav-link {
color: #b8bcc4 !important;
border-radius: 0.5rem;
padding: 0.75rem 1.25rem;
font-weight: 500;
transition: all 0.2s ease;
background-color: transparent !important;
}
.wpaw-settings-v2-wrap .nav-pills .nav-link:hover:not(.active) {
background-color: #243447 !important;
color: #e8eaed !important;
}
.wpaw-settings-v2-wrap .nav-pills .nav-link.active {
background-color: #17a2b8 !important;
color: #fff !important;
}
/* Sticky save buttons */
.wpaw-settings-v2-wrap .sticky-bottom {
z-index: 100;
}
/* Table styles - Dark Theme */
.wpaw-settings-v2-wrap .table {
margin-bottom: 0;
color: #e8eaed !important;
background-color: transparent !important;
}
.wpaw-settings-v2-wrap .table th {
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.025em;
color: #b8bcc4 !important;
border-bottom-width: 1px;
border-color: #3a4a5e !important;
background-color: #2d3e52 !important;
}
.wpaw-settings-v2-wrap .table td {
vertical-align: middle;
color: #e8eaed !important;
border-color: #3a4a5e !important;
background-color: #243447 !important;
}
.wpaw-settings-v2-wrap .table tbody tr {
background-color: #243447 !important;
}
.wpaw-settings-v2-wrap .table tbody tr:hover {
background-color: #2d3e52 !important;
}
.wpaw-settings-v2-wrap .table tbody tr:hover td {
background-color: #2d3e52 !important;
}
.wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(odd) {
background-color: #243447 !important;
}
.wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(odd) td {
background-color: #243447 !important;
}
.wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(even) {
background-color: #2d3e52 !important;
}
.wpaw-settings-v2-wrap .table-striped tbody tr:nth-of-type(even) td {
background-color: #2d3e52 !important;
}
/* Badge enhancements - Dark Theme */
.wpaw-settings-v2-wrap *:not(td,label) > .badge {
font-weight: 500;
color: white !important;
}
.wpaw-settings-v2-wrap .badge.bg-secondary {
background-color: #6c757d !important;
color: white !important;
}
.wpaw-settings-v2-wrap .badge.bg-success {
background-color: #28a745 !important;
color: white !important;
}
.wpaw-settings-v2-wrap .badge.bg-warning {
background-color: #ffc107 !important;
color: #212529 !important;
}
.wpaw-settings-v2-wrap .badge.bg-danger {
background-color: #dc3545 !important;
color: white !important;
}
.wpaw-settings-v2-wrap .badge.bg-info {
background-color: #17a2b8 !important;
color: white !important;
}
/* Custom language items */
.wpaw-settings-v2-wrap .wpaw-custom-language-item .btn {
padding: 0.375rem 0.5rem;
}
/* Cost estimate display */
.wpaw-settings-v2-wrap #wpaw-cost-estimate {
transition: all 0.3s ease;
}
/* Toast positioning */
.wpaw-settings-v2-wrap .toast-container {
z-index: 9999;
}
/* Dashicons in buttons */
.wpaw-settings-v2-wrap .dashicons {
font-size: 1rem;
width: 1rem;
height: 1rem;
vertical-align: middle;
}
.wpaw-settings-v2-wrap .btn .dashicons {
margin-top: -2px;
}
/* Filter section */
.wpaw-settings-v2-wrap #wpaw-filter-post,
.wpaw-settings-v2-wrap #wpaw-filter-date-from,
.wpaw-settings-v2-wrap #wpaw-filter-date-to {
max-width: 100%;
}
/* Pagination */
.wpaw-settings-v2-wrap .pagination {
margin-bottom: 0;
}
.wpaw-settings-v2-wrap .page-link {
padding: 0.375rem 0.75rem;
}
/* Loading states */
.wpaw-settings-v2-wrap .spinner-border {
width: 1rem;
height: 1rem;
border-width: 0.15em;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.wpaw-settings-v2-wrap .nav-pills {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wpaw-settings-v2-wrap .nav-pills .nav-link {
white-space: nowrap;
padding: 0.5rem 1rem;
}
.wpaw-settings-v2-wrap .preset-card {
margin-bottom: 0.5rem;
}
.wpaw-settings-v2-wrap .sticky-bottom {
position: relative !important;
bottom: auto !important;
}
}
/* WordPress admin bar offset */
@media (min-width: 601px) {
.admin-bar .wpaw-settings-v2-wrap .sticky-top {
top: 32px !important;
}
}
@media (max-width: 600px) {
.admin-bar .wpaw-settings-v2-wrap .sticky-top {
top: 46px !important;
}
}
/* Form text helper */
.wpaw-settings-v2-wrap .form-text {
font-size: 0.8125rem;
margin: 0.375rem 0;
}
/* Alert styling */
.wpaw-settings-v2-wrap .alert {
border-radius: 0.5rem;
}
/* Focus states for accessibility */
.wpaw-settings-v2-wrap .btn:focus,
.wpaw-settings-v2-wrap .nav-link:focus {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
/* Animation for cost estimate */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.wpaw-settings-v2-wrap #wpaw-cost-estimate.updating {
animation: pulse 0.5s ease-in-out;
}
/* Customization - Dark Theme */
#wpcontent {
background-color: #1d2227 !important;
}
.wpaw-settings-v2-wrap .container-fluid {
background: #1d2227 !important;
}
.card {
max-width: unset;
}
/* Checkboxes and Form Switches */
.wpaw-settings-v2-wrap .form-check-input {
background-color: #2d3e52 !important;
border-color: #3a4a5e !important;
}
.wpaw-settings-v2-wrap .form-check-input:checked {
background-color: #17a2b8 !important;
border-color: #17a2b8 !important;
}
.wpaw-settings-v2-wrap .form-check-label {
color: #e8eaed !important;
}
/* Labels */
.wpaw-settings-v2-wrap label,
.wpaw-settings-v2-wrap .form-label {
color: #b8bcc4 !important;
}
/* Small text / help text */
.wpaw-settings-v2-wrap small,
.wpaw-settings-v2-wrap .small,
.wpaw-settings-v2-wrap .form-text {
color: #8a8f98 !important;
}
/* Headings in cards */
.wpaw-settings-v2-wrap h1,
.wpaw-settings-v2-wrap h2,
.wpaw-settings-v2-wrap h3,
.wpaw-settings-v2-wrap h4,
.wpaw-settings-v2-wrap h5,
.wpaw-settings-v2-wrap h6 {
color: #e8eaed !important;
}
/* Paragraph text */
.wpaw-settings-v2-wrap p {
color: #b8bcc4 !important;
}
/* Button text colors */
.wpaw-settings-v2-wrap .btn {
color: #e8eaed !important;
}
.wpaw-settings-v2-wrap .btn-primary {
background-color: #17a2b8 !important;
border-color: #17a2b8 !important;
color: white !important;
}
.wpaw-settings-v2-wrap .btn-secondary {
background-color: #6c757d !important;
border-color: #6c757d !important;
color: white !important;
}
.wpaw-settings-v2-wrap .btn-outline-primary {
color: #17a2b8 !important;
border-color: #17a2b8 !important;
background-color: transparent !important;
}
.wpaw-settings-v2-wrap .btn-outline-primary:hover {
background-color: #17a2b8 !important;
color: white !important;
}
.wpaw-settings-v2-wrap .btn-outline-secondary {
color: #b8bcc4 !important;
border-color: #6c757d !important;
background-color: transparent !important;
}
.wpaw-settings-v2-wrap .btn-outline-secondary:hover {
background-color: #6c757d !important;
color: white !important;
}
/* List group items */
.wpaw-settings-v2-wrap .list-group-item {
background-color: #243447 !important;
color: #e8eaed !important;
border-color: #3a4a5e !important;
}
.wpaw-settings-v2-wrap .list-group-item:hover {
background-color: #2d3e52 !important;
}
/* Dropdown menus */
.wpaw-settings-v2-wrap .dropdown-menu {
background-color: #243447 !important;
border-color: #3a4a5e !important;
}
.wpaw-settings-v2-wrap .dropdown-item {
color: #e8eaed !important;
}
.wpaw-settings-v2-wrap .dropdown-item:hover {
background-color: #2d3e52 !important;
color: #17a2b8 !important;
}
/* Modal dialogs */
.wpaw-settings-v2-wrap .modal-content {
background-color: #243447 !important;
color: #e8eaed !important;
border-color: #3a4a5e !important;
}
.wpaw-settings-v2-wrap .modal-header {
background-color: #2d3e52 !important;
border-bottom-color: #3a4a5e !important;
}
.wpaw-settings-v2-wrap .modal-footer {
background-color: #2d3e52 !important;
border-top-color: #3a4a5e !important;
}
/* Pagination */
.wpaw-settings-v2-wrap .pagination .page-link {
background-color: #243447 !important;
color: #e8eaed !important;
border-color: #3a4a5e !important;
}
.wpaw-settings-v2-wrap .pagination .page-link:hover {
background-color: #2d3e52 !important;
color: #17a2b8 !important;
}
.wpaw-settings-v2-wrap .pagination .page-item.active .page-link {
background-color: #17a2b8 !important;
border-color: #17a2b8 !important;
color: white !important;
}
/* Code blocks */
.wpaw-settings-v2-wrap code {
background-color: #2d3e52 !important;
color: #17a2b8 !important;
border: 1px solid #3a4a5e;
}
.wpaw-settings-v2-wrap pre {
background-color: #2d3e52 !important;
color: #e8eaed !important;
border: 1px solid #3a4a5e;
}
/* Breadcrumb */
.wpaw-settings-v2-wrap .breadcrumb {
background-color: #243447 !important;
}
.wpaw-settings-v2-wrap .breadcrumb-item {
color: #b8bcc4 !important;
}
.wpaw-settings-v2-wrap .breadcrumb-item.active {
color: #e8eaed !important;
}
/* Progress bars */
.wpaw-settings-v2-wrap .progress {
background-color: #2d3e52 !important;
}
.wpaw-settings-v2-wrap .progress-bar {
background-color: #17a2b8 !important;
}
/* Tooltips */
.wpaw-settings-v2-wrap .tooltip-inner {
background-color: #243447 !important;
color: #e8eaed !important;
}
/* Popovers */
.wpaw-settings-v2-wrap .popover {
background-color: #243447 !important;
border-color: #3a4a5e !important;
}
.wpaw-settings-v2-wrap .popover-header {
background-color: #2d3e52 !important;
color: #e8eaed !important;
border-bottom-color: #3a4a5e !important;
}
.wpaw-settings-v2-wrap .popover-body {
color: #b8bcc4 !important;
}

2779
assets/css/sidebar.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
assets/img/icon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

114
assets/js/block-refine.js Normal file
View File

@@ -0,0 +1,114 @@
/**
* WP Agentic Writer - Block Toolbar Chat Mention
*
* Adds "@chat" button to block toolbar to insert the block mention into chat input.
*
* @package WP_Agentic_Writer
*/
( function ( wp ) {
const { BlockControls } = wp.blockEditor;
const { ToolbarButton, ToolbarGroup } = wp.components;
const { createHigherOrderComponent } = wp.compose;
const { useSelect } = wp.data;
const { addFilter } = wp.hooks;
const { __ } = wp.i18n;
const buildMentionToken = ( block, allBlocks ) => {
if ( ! block ) {
return '@this';
}
if ( block.name === 'core/list-item' ) {
let listIndex = 0;
for ( const parent of allBlocks ) {
if ( parent.name !== 'core/list' ) {
continue;
}
listIndex += 1;
const innerItems = Array.isArray( parent.innerBlocks ) ? parent.innerBlocks : [];
const itemIndex = innerItems.findIndex( ( item ) => item.clientId === block.clientId );
if ( itemIndex !== -1 ) {
return `@list-${ listIndex }.list-item-${ itemIndex }`;
}
}
}
if ( ! block.name || ! block.name.startsWith( 'core/' ) ) {
return '@this';
}
const typeName = block.name.replace( 'core/', '' );
let count = 0;
for ( const entry of allBlocks ) {
if ( ! entry.name || ! entry.name.startsWith( 'core/' ) ) {
continue;
}
if ( entry.name.replace( 'core/', '' ) === typeName ) {
count += 1;
}
if ( entry.clientId === block.clientId ) {
break;
}
}
return `@${ typeName }-${ count }`;
};
const withChatMentionToolbar = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
const { clientId } = props;
const block = useSelect(
( select ) => select( 'core/block-editor' ).getBlock( clientId ),
[ clientId ]
);
const allBlocks = useSelect(
( select ) => select( 'core/block-editor' ).getBlocks(),
[]
);
const mentionToken = buildMentionToken( block, allBlocks );
const sendToChat = () => {
window.dispatchEvent(
new CustomEvent( 'wpaw:insert-mention', {
detail: {
token: `${ mentionToken } `,
blockId: block?.clientId || clientId,
},
} )
);
};
return wp.element.createElement(
wp.element.Fragment,
null,
wp.element.createElement( BlockEdit, props ),
wp.element.createElement(
BlockControls,
null,
wp.element.createElement(
ToolbarGroup,
null,
wp.element.createElement( ToolbarButton, {
icon: 'format-chat',
label: __( 'Send to chat', 'wp-agentic-writer' ),
onClick: sendToChat,
children: '@chat',
} )
)
)
);
};
}, 'withChatMentionToolbar' );
addFilter(
'editor.BlockEdit',
'wp-agentic-writer/block-chat-mention',
withChatMentionToolbar
);
} )( window.wp );

1013
assets/js/settings-v2.js Normal file
View File

File diff suppressed because it is too large Load Diff

293
assets/js/settings.js Normal file
View File

@@ -0,0 +1,293 @@
/**
* 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 = $( '<span>' + model.text + '</span>' );
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( $( '<option>', {
value: model.id,
text: cleanName + ( model.is_free ? ' (Free)' : '' )
} ) );
// Store pricing data for cost calculation
if ( model.pricing ) {
modelPricing[ model.id ] = model.pricing;
}
} );
}
// Ensure saved value exists in dropdown (legacy/custom models)
if ( currentValue && $select.find( `option[value="${currentValue}"]` ).length === 0 ) {
$select.prepend( $( '<option>', {
value: currentValue,
text: currentValue + ' (Saved)'
} ) );
}
// Set the current value
if ( currentValue ) {
$select.val( currentValue );
}
};
// Update chat model dropdown
const $chatSelect = $( '#chat_model' );
const currentChat = wpawSettings.currentModels?.chat || $chatSelect.val();
populateSelect( $chatSelect, models.chat?.all || [], currentChat );
// Update clarity model dropdown
const $claritySelect = $( '#clarity_model' );
const currentClarity = wpawSettings.currentModels?.clarity || $claritySelect.val();
populateSelect( $claritySelect, models.planning?.all || [], currentClarity );
// Update planning model dropdown
const $planningSelect = $( '#planning_model' );
const currentPlanning = wpawSettings.currentModels?.planning || $planningSelect.val();
populateSelect( $planningSelect, models.planning?.all || [], currentPlanning );
// Update writing model dropdown
const $writingSelect = $( '#writing_model' );
const currentWriting = wpawSettings.currentModels?.writing || wpawSettings.currentModels?.execution || $writingSelect.val();
populateSelect( $writingSelect, models.execution?.all || [], currentWriting );
// Update refinement model dropdown
const $refinementSelect = $( '#refinement_model' );
const currentRefinement = wpawSettings.currentModels?.refinement || $refinementSelect.val();
populateSelect( $refinementSelect, models.execution?.all || [], currentRefinement );
// Update image model dropdown
const $imageSelect = $( '#image_model' );
const currentImage = wpawSettings.currentModels?.image || $imageSelect.val();
populateSelect( $imageSelect, models.image?.all || [], currentImage );
// Reinitialize Select2 after updating dropdowns
initSelect2();
// Update cost estimate
updateCostEstimate();
}
/**
* Show error message.
*/
function showError( message ) {
$( '#wpaw-models-message' )
.removeClass( 'notice-success' )
.addClass( 'notice-error' )
.text( message )
.show();
}
} );

59
assets/js/sidebar-test.js Normal file
View File

@@ -0,0 +1,59 @@
/**
* WP Agentic Writer - Test Script
*
* @package WP_Agentic_Writer
*/
console.log('WP Agentic Writer script loaded!');
console.log('wpAgenticWriter data:', typeof wpAgenticWriter !== 'undefined' ? wpAgenticWriter : 'NOT DEFINED');
// Check if wp object is available
if (typeof wp !== 'undefined') {
console.log('WordPress wp object available:', wp);
} else {
console.error('WordPress wp object NOT available');
}
// Check dependencies
const deps = {
wp: typeof wp !== 'undefined',
element: typeof wp !== 'undefined' && typeof wp.element !== 'undefined',
components: typeof wp !== 'undefined' && typeof wp.components !== 'undefined',
data: typeof wp !== 'undefined' && typeof wp.data !== 'undefined',
i18n: typeof wp !== 'undefined' && typeof wp.i18n !== 'undefined',
};
console.log('Dependencies check:', deps);
// Try to register a simple plugin
if (deps.wp && deps.element && deps.components) {
const { registerPlugin } = wp.plugins;
const { PluginSidebar } = wp.editPost;
const { Panel, PanelBody } = wp.components;
const { __ } = wp.i18n;
const TestSidebar = () => {
return wp.element.createElement(
PluginSidebar,
{ name: 'wp-agentic-writer-test', title: 'WP Agentic Writer Test' },
wp.element.createElement(
Panel,
null,
wp.element.createElement(
PanelBody,
null,
wp.element.createElement('p', null, 'Plugin loaded successfully! 🎉')
)
)
);
};
registerPlugin('wp-agentic-writer-test', {
icon: 'edit',
render: TestSidebar,
});
console.log('Plugin registered successfully!');
} else {
console.error('Cannot register plugin - missing dependencies');
}

5713
assets/js/sidebar.js Normal file
View File

File diff suppressed because it is too large Load Diff

5693
assets/js/sidebar.js.backup Normal file
View File

File diff suppressed because it is too large Load Diff

5152
assets/js/sidebar.js.bak Normal file
View File

File diff suppressed because it is too large Load Diff

2
assets/js/vendor/markdown-it-task-lists.min.js vendored Normal file
View File

@@ -0,0 +1,2 @@
/*! markdown-it-task-lists 2.1.0 https://github.com/revin/markdown-it-task-lists#readme by @license {ISC} */
!function(n){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=n();else if("function"==typeof define&&define.amd)define([],n);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.markdownitTaskLists=n()}}(function(){return function(){function n(e,t,i){function r(c,l){if(!t[c]){if(!e[c]){var f="function"==typeof require&&require;if(!l&&f)return f(c,!0);if(o)return o(c,!0);var u=new Error("Cannot find module '"+c+"'");throw u.code="MODULE_NOT_FOUND",u}var a=t[c]={exports:{}};e[c][0].call(a.exports,function(n){var t=e[c][1][n];return r(t?t:n)},a,a.exports,n,e,t,i)}return t[c].exports}for(var o="function"==typeof require&&require,c=0;c<i.length;c++)r(i[c]);return r}return n}()({1:[function(n,e,t){function i(n,e,t){var i=n.attrIndex(e),r=[e,t];0>i?n.attrPush(r):n.attrs[i]=r}function r(n,e){for(var t=n[e].level-1,i=e-1;i>=0;i--)if(n[i].level===t)return i;return-1}function o(n,e){return s(n[e])&&d(n[e-1])&&h(n[e-2])&&p(n[e])}function c(n,e){if(n.children.unshift(l(n,e)),n.children[1].content=n.children[1].content.slice(3),n.content=n.content.slice(3),b)if(v){n.children.pop();var t="task-item-"+Math.ceil(1e7*Math.random()-1e3);n.children[0].content=n.children[0].content.slice(0,-1)+' id="'+t+'">',n.children.push(a(n.content,t,e))}else n.children.unshift(f(e)),n.children.push(u(e))}function l(n,e){var t=new e("html_inline","",0),i=x?' disabled="" ':"";return 0===n.content.indexOf("[ ] ")?t.content='<input class="task-list-item-checkbox"'+i+'type="checkbox">':(0===n.content.indexOf("[x] ")||0===n.content.indexOf("[X] "))&&(t.content='<input class="task-list-item-checkbox" checked=""'+i+'type="checkbox">'),t}function f(n){var e=new n("html_inline","",0);return e.content="<label>",e}function u(n){var e=new n("html_inline","",0);return e.content="</label>",e}function a(n,e,t){var i=new t("html_inline","",0);return i.content='<label class="task-list-item-label" for="'+e+'">'+n+"</label>",i.attrs=[{"for":e}],i}function s(n){return"inline"===n.type}function d(n){return"paragraph_open"===n.type}function h(n){return"list_item_open"===n.type}function p(n){return 0===n.content.indexOf("[ ] ")||0===n.content.indexOf("[x] ")||0===n.content.indexOf("[X] ")}var x=!0,b=!1,v=!1;e.exports=function(n,e){e&&(x=!e.enabled,b=!!e.label,v=!!e.labelAfter),n.core.ruler.after("inline","github-task-lists",function(n){for(var e=n.tokens,t=2;t<e.length;t++)o(e,t)&&(c(e[t],n.Token),i(e[t-2],"class","task-list-item"+(x?"":" enabled")),i(e[r(e,t-2)],"class","contains-task-list"))})}},{}]},{},[1])(1)});

3
assets/js/vendor/markdown-it.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
assets/js/vendor/purify.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long