feat(M3): dossier edit+rerun UI, F2/F3, run-list badges — v0.20.0
- Dossier_Actions (4 AJAX endpoints, manage_options+nonce): save fork / queue replay / queue rebuild / stage-status poll. Run identity always derived server-side from post meta; the AJAX layer validates + queues ONLY — all mutations happen in the cron handlers (chained-cron, CPO hard constraint). Fork saves lock message structure (count/roles) so every version stays replayable. - Edit panel per editable stage: per-message textareas prefilled from the latest fork or the recorded request_json; explicit fork + downstream-stale + queued-execution copy; spend strip with ceiling warning (filterable fraction, default 0.8). Disabled stages always show WHY (policy reasons; missing-input retention copy). - Stale / human-edited / attempt chips per stage + header badges (M2 slot filled); dossier polls stage status while a re-run is active (board poll interval setting) and re-renders when the run settles. - F2: sidebar Models & Prompts card (per-stage model/pv/role) + Run Spend card. F3: log-only stages (image_a/b, llm_research, ...) render from generation_log + the _prautoblogger_image_role attachment grid. - M2 correctness: dossier is now item-scoped (idea-hash meta) and excludes gen_log rows linked to other posts of a multi-article run. - Run-list visibility (product AC): board cards get a Human-modified chip; Review Queue rows get a stale-stages chip linking to the dossier. Both via single batched queries (no N+1). - v0.20.0 + CHANGELOG + ARCHITECTURE #24 (+ file tree, schema tables, db-version note) in this commit per versioning discipline. Agent-Session: engineer-prab-m3-20260612
This commit is contained in:
peptiderepo
240
assets/css/dossier-edit.css
Normal file
240
assets/css/dossier-edit.css
Normal file
@@ -0,0 +1,240 @@
|
||||
/**
|
||||
* PRAutoBlogger dossier — edit + re-run styles (M3, v0.20.0).
|
||||
* Extends dossier.css (kept separate: dossier.css predates the
|
||||
* 300-line discipline and is not grown further).
|
||||
*/
|
||||
|
||||
/* ── Audit chips (stale / human-edited / attempt) ─────────────────── */
|
||||
.prab-chip {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.6;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.prab-chip--stale {
|
||||
background: #fcf0e4;
|
||||
color: #8a4a0b;
|
||||
border: 1px solid #e8c9a8;
|
||||
}
|
||||
|
||||
.prab-chip--human {
|
||||
background: #e9f2f4;
|
||||
color: #1b5e6b;
|
||||
border: 1px solid #b8d8de;
|
||||
}
|
||||
|
||||
.prab-chip--attempt {
|
||||
background: #f0f0f1;
|
||||
color: #50575e;
|
||||
border: 1px solid #dcdcde;
|
||||
}
|
||||
|
||||
.prab-chip--chosen {
|
||||
background: #edf7ed;
|
||||
color: #1e6b2e;
|
||||
border: 1px solid #b9dfc0;
|
||||
}
|
||||
|
||||
.prab-chip--header {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.prab-stage--stale {
|
||||
border-left: 3px solid #d98c2b;
|
||||
}
|
||||
|
||||
/* ── Stage footer actions ─────────────────────────────────────────── */
|
||||
.prab-stage-rerun-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed #e2dcd2;
|
||||
}
|
||||
|
||||
.prab-edit-unavailable {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
max-width: 46em;
|
||||
}
|
||||
|
||||
.prab-rerun-from--stale {
|
||||
border-color: #d98c2b;
|
||||
color: #8a4a0b;
|
||||
}
|
||||
|
||||
/* ── Edit panel ───────────────────────────────────────────────────── */
|
||||
.prab-edit-panel {
|
||||
margin-top: 12px;
|
||||
padding: 14px 16px;
|
||||
background: #fbf8f2;
|
||||
border: 1px solid #e2dcd2;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.prab-edit-copy {
|
||||
font-size: 13px;
|
||||
color: #50575e;
|
||||
max-width: 60em;
|
||||
}
|
||||
|
||||
.prab-edit-spend {
|
||||
font-size: 12px;
|
||||
color: #50575e;
|
||||
}
|
||||
|
||||
.prab-edit-spend--warn,
|
||||
.prab-spend-warning {
|
||||
color: #8a2a0b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prab-run-spend--warn {
|
||||
border-left: 3px solid #c9501f;
|
||||
}
|
||||
|
||||
.prab-edit-model {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
}
|
||||
|
||||
.prab-edit-message {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.prab-edit-role {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #8c8f94;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.prab-edit-textarea {
|
||||
width: 100%;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prab-edit-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.prab-edit-forkinfo {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.prab-edit-feedback {
|
||||
font-size: 12px;
|
||||
color: #1e6b2e;
|
||||
}
|
||||
|
||||
.prab-edit-feedback--error {
|
||||
color: #b32d2e;
|
||||
}
|
||||
|
||||
/* ── Image grid (F3) ──────────────────────────────────────────────── */
|
||||
.prab-image-grid {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.prab-image-card {
|
||||
margin: 0;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.prab-image-card img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e2dcd2;
|
||||
}
|
||||
|
||||
.prab-image-card--chosen img {
|
||||
border: 2px solid #1b8a92;
|
||||
}
|
||||
|
||||
.prab-image-card figcaption {
|
||||
font-size: 12px;
|
||||
color: #50575e;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ── Sidebar models card (F2) ─────────────────────────────────────── */
|
||||
.prab-models-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.prab-models-table th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
padding: 4px 6px 4px 0;
|
||||
vertical-align: top;
|
||||
color: #50575e;
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.prab-models-table td {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.prab-models-model {
|
||||
display: block;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
font-size: 11px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.prab-models-meta {
|
||||
display: block;
|
||||
color: #8c8f94;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ── Board card human-modified dot ────────────────────────────────── */
|
||||
.prab-card-human-chip {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
background: #e9f2f4;
|
||||
color: #1b5e6b;
|
||||
border: 1px solid #b8d8de;
|
||||
}
|
||||
|
||||
/* ── Review queue stale warning ───────────────────────────────────── */
|
||||
.prab-review-stale-chip {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
background: #fcf0e4;
|
||||
color: #8a4a0b;
|
||||
border: 1px solid #e8c9a8;
|
||||
}
|
||||
@@ -69,6 +69,11 @@
|
||||
|
||||
html += '<div class="prab-card-title">' + escHtml( card.title || cfg.strings.empty ) + '</div>';
|
||||
|
||||
// v0.20.0: human-modified runs are visually distinct at run-list level.
|
||||
if ( card.human_modified ) {
|
||||
html += '<span class="prab-card-human-chip">' + escHtml( cfg.strings.humanModified || 'Human-modified' ) + '</span>';
|
||||
}
|
||||
|
||||
if ( card.cost_total ) {
|
||||
html += '<div class="prab-card-meta"><span class="prab-card-cost">';
|
||||
html += escHtml( formatCost( card.cost_total ) );
|
||||
|
||||
235
assets/js/dossier-edit.js
Normal file
235
assets/js/dossier-edit.js
Normal file
@@ -0,0 +1,235 @@
|
||||
/**
|
||||
* PRAutoBlogger Article Dossier — edit + re-run actions (M3, v0.20.0).
|
||||
*
|
||||
* Chained-cron UX contract (CPO hard constraint): clicking a re-run
|
||||
* button QUEUES a background job — the UI says "queued", starts the
|
||||
* stage-status poll, and renders pickup/result as the rows change.
|
||||
* Nothing here implies synchronous execution.
|
||||
*
|
||||
* Vanilla JS, no build step. Config injected via wp_localize_script
|
||||
* ('prabDossierEdit': ajaxUrl, nonce, postId, pollInterval, strings).
|
||||
*
|
||||
* @see admin/class-dossier-actions.php — The endpoints this calls.
|
||||
* @see admin/class-dossier-page.php — Enqueue + localization.
|
||||
*/
|
||||
( function () {
|
||||
'use strict';
|
||||
|
||||
var cfg = window.prabDossierEdit || null;
|
||||
|
||||
function post( action, fields ) {
|
||||
var data = new window.FormData();
|
||||
data.append( 'action', action );
|
||||
data.append( 'nonce', cfg.nonce );
|
||||
data.append( 'post_id', cfg.postId );
|
||||
Object.keys( fields || {} ).forEach( function ( key ) {
|
||||
data.append( key, fields[ key ] );
|
||||
} );
|
||||
return window.fetch( cfg.ajaxUrl, { method: 'POST', credentials: 'same-origin', body: data } )
|
||||
.then( function ( res ) { return res.json(); } );
|
||||
}
|
||||
|
||||
function feedback( panel, message, isError ) {
|
||||
var el = panel.querySelector( '[data-feedback]' );
|
||||
if ( el ) {
|
||||
el.textContent = message || '';
|
||||
el.classList.toggle( 'prab-edit-feedback--error', !! isError );
|
||||
}
|
||||
}
|
||||
|
||||
function sectionFor( el ) {
|
||||
var node = el;
|
||||
while ( node && ! node.classList.contains( 'prab-dossier-section--stage' ) ) {
|
||||
node = node.parentElement;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
// ── Stage-status polling (queued → pickup → result) ────────────────
|
||||
var pollTimer = null;
|
||||
var sawActivity = false;
|
||||
|
||||
function applyStageState( state ) {
|
||||
var selector = '.prab-dossier-section--stage[data-stage="' + state.stage + '"][data-agent-role="' + state.agent_role + '"]';
|
||||
var section = document.querySelector( selector );
|
||||
if ( ! section ) {
|
||||
return;
|
||||
}
|
||||
var pill = section.querySelector( '.prab-stage-status-pill' );
|
||||
if ( pill ) {
|
||||
pill.className = 'prab-stage-status-pill prab-stage-status-pill--' + state.status;
|
||||
pill.textContent = state.status.charAt( 0 ).toUpperCase() + state.status.slice( 1 );
|
||||
}
|
||||
var staleChip = section.querySelector( '[data-chip="stale"]' );
|
||||
if ( staleChip ) {
|
||||
staleChip.hidden = ! state.stale;
|
||||
}
|
||||
section.classList.toggle( 'prab-stage--stale', !! state.stale );
|
||||
var humanChip = section.querySelector( '[data-chip="human"]' );
|
||||
if ( humanChip ) {
|
||||
humanChip.hidden = ! state.human_modified;
|
||||
}
|
||||
}
|
||||
|
||||
function poll() {
|
||||
post( 'prautoblogger_dossier_stage_status', {} ).then( function ( res ) {
|
||||
if ( ! res || ! res.success || ! res.data ) {
|
||||
return;
|
||||
}
|
||||
var anyRunning = false;
|
||||
var anyStale = false;
|
||||
var anyHuman = false;
|
||||
( res.data.stages || [] ).forEach( function ( state ) {
|
||||
applyStageState( state );
|
||||
if ( 'running' === state.status || 'pending' === state.status ) {
|
||||
anyRunning = true;
|
||||
}
|
||||
anyStale = anyStale || !! state.stale;
|
||||
anyHuman = anyHuman || !! state.human_modified;
|
||||
} );
|
||||
var headerHuman = document.querySelector( '[data-header-chip="human"]' );
|
||||
if ( headerHuman ) {
|
||||
headerHuman.hidden = ! anyHuman;
|
||||
}
|
||||
var headerStale = document.querySelector( '[data-header-chip="stale"]' );
|
||||
if ( headerStale ) {
|
||||
headerStale.hidden = ! anyStale;
|
||||
}
|
||||
|
||||
var terminal = -1 === [ 'running', 'pending' ].indexOf( res.data.run_status );
|
||||
if ( anyRunning || ! terminal ) {
|
||||
sawActivity = true;
|
||||
return;
|
||||
}
|
||||
// Run settled after activity we watched: re-render the dossier
|
||||
// fresh (server-rendered outputs, receipts, fork info).
|
||||
if ( sawActivity ) {
|
||||
window.clearInterval( pollTimer );
|
||||
pollTimer = null;
|
||||
window.location.reload();
|
||||
}
|
||||
} ).catch( function () { /* transient poll errors are ignored */ } );
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
sawActivity = true;
|
||||
if ( ! pollTimer ) {
|
||||
pollTimer = window.setInterval( poll, cfg.pollInterval * 1000 );
|
||||
}
|
||||
}
|
||||
|
||||
// ── Wiring ──────────────────────────────────────────────────────────
|
||||
document.addEventListener( 'DOMContentLoaded', function () {
|
||||
if ( ! cfg ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Edit panel toggles.
|
||||
document.querySelectorAll( '.prab-edit-toggle' ).forEach( function ( btn ) {
|
||||
btn.addEventListener( 'click', function () {
|
||||
var panel = document.getElementById( btn.getAttribute( 'aria-controls' ) );
|
||||
if ( ! panel ) {
|
||||
return;
|
||||
}
|
||||
var open = btn.getAttribute( 'aria-expanded' ) === 'true';
|
||||
panel.hidden = open;
|
||||
btn.setAttribute( 'aria-expanded', open ? 'false' : 'true' );
|
||||
} );
|
||||
} );
|
||||
|
||||
// Save fork.
|
||||
document.querySelectorAll( '.prab-edit-save' ).forEach( function ( btn ) {
|
||||
btn.addEventListener( 'click', function () {
|
||||
var panel = btn.closest( '.prab-edit-panel' );
|
||||
var messages = [];
|
||||
panel.querySelectorAll( '.prab-edit-textarea' ).forEach( function ( area ) {
|
||||
messages.push( { role: area.getAttribute( 'data-role' ), content: area.value } );
|
||||
} );
|
||||
btn.disabled = true;
|
||||
feedback( panel, cfg.strings.saving, false );
|
||||
post( 'prautoblogger_dossier_save_input', {
|
||||
stage: panel.getAttribute( 'data-stage' ),
|
||||
agent_role: panel.getAttribute( 'data-agent-role' ),
|
||||
messages: JSON.stringify( messages )
|
||||
} ).then( function ( res ) {
|
||||
btn.disabled = false;
|
||||
if ( res && res.success ) {
|
||||
feedback( panel, res.data.message, false );
|
||||
var rerunBtn = panel.querySelector( '.prab-edit-rerun' );
|
||||
if ( rerunBtn ) {
|
||||
rerunBtn.disabled = false;
|
||||
}
|
||||
var info = panel.querySelector( '[data-forkinfo]' );
|
||||
if ( info && res.data.version ) {
|
||||
info.textContent = 'v' + res.data.version;
|
||||
}
|
||||
} else {
|
||||
feedback( panel, ( res && res.data && res.data.message ) || cfg.strings.error, true );
|
||||
}
|
||||
} ).catch( function () {
|
||||
btn.disabled = false;
|
||||
feedback( panel, cfg.strings.error, true );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
// Replay latest fork (queued).
|
||||
document.querySelectorAll( '.prab-edit-rerun' ).forEach( function ( btn ) {
|
||||
btn.addEventListener( 'click', function () {
|
||||
var panel = btn.closest( '.prab-edit-panel' );
|
||||
if ( ! window.confirm( cfg.strings.confirmReplay ) ) {
|
||||
return;
|
||||
}
|
||||
btn.disabled = true;
|
||||
post( 'prautoblogger_dossier_rerun_stage', {
|
||||
stage: panel.getAttribute( 'data-stage' ),
|
||||
agent_role: panel.getAttribute( 'data-agent-role' )
|
||||
} ).then( function ( res ) {
|
||||
if ( res && res.success ) {
|
||||
feedback( panel, res.data.message, false );
|
||||
startPolling();
|
||||
} else {
|
||||
btn.disabled = false;
|
||||
feedback( panel, ( res && res.data && res.data.message ) || cfg.strings.error, true );
|
||||
}
|
||||
} ).catch( function () {
|
||||
btn.disabled = false;
|
||||
feedback( panel, cfg.strings.error, true );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
// Re-run from here (queued rebuild).
|
||||
document.querySelectorAll( '.prab-rerun-from' ).forEach( function ( btn ) {
|
||||
btn.addEventListener( 'click', function () {
|
||||
var section = sectionFor( btn );
|
||||
if ( ! window.confirm( cfg.strings.confirmRerunFrom ) ) {
|
||||
return;
|
||||
}
|
||||
btn.disabled = true;
|
||||
btn.textContent = cfg.strings.queued;
|
||||
post( 'prautoblogger_dossier_rerun_from', {
|
||||
stage: btn.getAttribute( 'data-stage' ),
|
||||
agent_role: section ? section.getAttribute( 'data-agent-role' ) : ''
|
||||
} ).then( function ( res ) {
|
||||
if ( res && res.success ) {
|
||||
startPolling();
|
||||
} else {
|
||||
btn.disabled = false;
|
||||
btn.textContent = cfg.strings.rerunFromLabel;
|
||||
window.alert( ( res && res.data && res.data.message ) || cfg.strings.error );
|
||||
}
|
||||
} ).catch( function () {
|
||||
btn.disabled = false;
|
||||
btn.textContent = cfg.strings.rerunFromLabel;
|
||||
window.alert( cfg.strings.error );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
// A stage already running (e.g. revisit mid-job): poll from load.
|
||||
if ( document.querySelector( '.prab-stage-status-pill--running' ) ) {
|
||||
startPolling();
|
||||
}
|
||||
} );
|
||||
}() );
|
||||
Reference in New Issue
Block a user