Skip to content

Commit 76d0eda

Browse files
shortovclaude
andcommitted
Compact plugin UI: flatten header, slim trial CTA, shrink workflow rail
- Flatten header to single row (logo + title + version badge only) - Move trial CTA from tall card to slim inline banner below header - Move insights grid (top-5 rewrites, top-5 suggestions) out of header - Compact workflow rail from 154px to 70px, hide description labels - Collapse empty stage hero/summary containers (CSS :empty + JS toggle) - Remove stage hero bloat (STEP X OF 4 + NEXT BEST ACTION sidebar) - De-duplicate pricing: rewrite row buttons say "Rewrite" not "Unlock for $1" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 9d55ffa commit 76d0eda

File tree

3 files changed

+160
-129
lines changed

3 files changed

+160
-129
lines changed

admin/css/admin.css

Lines changed: 76 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,45 @@
9090
height: auto;
9191
}
9292

93+
.aeo-trial-banner {
94+
display: flex;
95+
align-items: center;
96+
gap: 12px;
97+
flex-wrap: wrap;
98+
margin: -8px 0 18px;
99+
padding: 10px 18px;
100+
border: 1px solid rgba(15, 118, 110, 0.14);
101+
border-radius: 14px;
102+
background: linear-gradient(90deg, rgba(223, 244, 239, 0.4), rgba(255, 253, 248, 0.9));
103+
font-size: 13px;
104+
}
105+
106+
.aeo-trial-banner .aeo-header-trial-kicker {
107+
margin: 0;
108+
}
109+
110+
.aeo-trial-banner .aeo-header-trial-title {
111+
margin: 0;
112+
font-size: 13px;
113+
font-weight: 600;
114+
}
115+
116+
.aeo-trial-banner .aeo-header-trial-actions {
117+
margin-left: auto;
118+
display: flex;
119+
gap: 8px;
120+
}
121+
122+
.aeo-trial-banner.is-error {
123+
border-color: rgba(196, 61, 61, 0.18);
124+
background: linear-gradient(90deg, rgba(253, 231, 226, 0.4), rgba(255, 253, 248, 0.9));
125+
}
126+
127+
.aeo-trial-banner.is-exhausted {
128+
border-color: rgba(31, 42, 51, 0.1);
129+
background: linear-gradient(90deg, rgba(238, 242, 244, 0.4), rgba(255, 253, 248, 0.9));
130+
}
131+
93132
.aeo-header-trial-offer {
94133
display: flex;
95134
flex-direction: column;
@@ -284,7 +323,7 @@
284323
grid-template-columns: repeat(2, minmax(0, 1fr));
285324
gap: 16px;
286325
min-width: 0;
287-
align-self: start;
326+
margin-bottom: 18px;
288327
}
289328

290329
.aeo-header-priority {
@@ -886,10 +925,10 @@
886925
.aeo-workflow-rail::before {
887926
content: '';
888927
position: absolute;
889-
top: 52px;
890-
left: 84px;
891-
right: 84px;
892-
height: 3px;
928+
top: 34px;
929+
left: 60px;
930+
right: 60px;
931+
height: 2px;
893932
background: linear-gradient(90deg, rgba(15, 118, 110, 0.18), rgba(15, 118, 110, 0.08));
894933
pointer-events: none;
895934
}
@@ -898,11 +937,11 @@
898937
position: relative;
899938
display: flex;
900939
flex-direction: column;
901-
gap: 16px;
902-
min-height: 154px;
903-
padding: 20px 20px 18px;
940+
gap: 8px;
941+
min-height: 70px;
942+
padding: 12px 14px;
904943
border: 1px solid var(--aeo-line);
905-
border-radius: 24px;
944+
border-radius: 16px;
906945
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 245, 236, 0.94));
907946
box-shadow: var(--aeo-shadow);
908947
text-align: left;
@@ -948,9 +987,8 @@
948987
.aeo-workflow-step-top {
949988
display: flex;
950989
align-items: center;
951-
gap: 12px;
990+
gap: 8px;
952991
min-width: 0;
953-
padding-right: 24px;
954992
}
955993

956994
.aeo-workflow-step-index {
@@ -959,14 +997,14 @@
959997
display: inline-flex;
960998
align-items: center;
961999
justify-content: center;
962-
width: 40px;
963-
height: 40px;
1000+
width: 28px;
1001+
height: 28px;
9641002
border-radius: 999px;
9651003
background: var(--aeo-surface-strong);
9661004
border: 1px solid var(--aeo-line);
967-
font-size: 15px;
1005+
font-size: 12px;
9681006
font-weight: 700;
969-
box-shadow: 0 10px 20px rgba(31, 42, 51, 0.08);
1007+
box-shadow: 0 6px 12px rgba(31, 42, 51, 0.06);
9701008
}
9711009

9721010
.aeo-workflow-step.is-healthy .aeo-workflow-step-index::after {
@@ -991,19 +1029,18 @@
9911029
display: inline-flex;
9921030
align-items: center;
9931031
justify-content: center;
994-
width: 44px;
995-
height: 44px;
996-
border-radius: 14px;
1032+
width: 32px;
1033+
height: 32px;
1034+
border-radius: 10px;
9971035
border: 1px solid rgba(15, 118, 110, 0.16);
9981036
background: rgba(15, 118, 110, 0.08);
9991037
color: var(--aeo-accent);
1000-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
10011038
}
10021039

10031040
.aeo-workflow-step-icon .dashicons {
1004-
width: 20px;
1005-
height: 20px;
1006-
font-size: 20px;
1041+
width: 16px;
1042+
height: 16px;
1043+
font-size: 16px;
10071044
}
10081045

10091046
.aeo-workflow-step[data-stage="connect"] .aeo-workflow-step-icon {
@@ -1039,16 +1076,15 @@
10391076
.aeo-workflow-step-body {
10401077
display: flex;
10411078
flex-direction: column;
1042-
gap: 8px;
1079+
gap: 4px;
10431080
min-width: 0;
1044-
padding-right: 26px;
10451081
}
10461082

10471083
.aeo-workflow-step-actions {
10481084
display: flex;
10491085
flex-wrap: wrap;
1050-
gap: 8px;
1051-
margin-top: 12px;
1086+
gap: 6px;
1087+
margin-top: 4px;
10521088
position: relative;
10531089
z-index: 1;
10541090
}
@@ -1088,16 +1124,13 @@
10881124

10891125
.aeo-workflow-step-title {
10901126
display: block;
1091-
font-size: 18px;
1127+
font-size: 14px;
10921128
font-weight: 700;
10931129
line-height: 1.2;
10941130
}
10951131

10961132
.aeo-workflow-step-label {
1097-
display: block;
1098-
color: var(--aeo-muted);
1099-
font-size: 14px;
1100-
line-height: 1.55;
1133+
display: none;
11011134
}
11021135

11031136
.aeo-workflow-step-state,
@@ -1107,9 +1140,9 @@
11071140
justify-content: center;
11081141
width: fit-content;
11091142
max-width: 100%;
1110-
padding: 6px 10px;
1143+
padding: 4px 8px;
11111144
border-radius: 999px;
1112-
font-size: 11px;
1145+
font-size: 10px;
11131146
font-weight: 700;
11141147
letter-spacing: 0.03em;
11151148
text-transform: uppercase;
@@ -1178,8 +1211,8 @@
11781211

11791212
.aeo-workflow-badge {
11801213
position: absolute;
1181-
top: 14px;
1182-
right: 14px;
1214+
top: 8px;
1215+
right: 8px;
11831216
z-index: 2;
11841217
}
11851218

@@ -1201,6 +1234,11 @@
12011234
gap: 16px;
12021235
}
12031236

1237+
.aeo-stage-hero:empty,
1238+
.aeo-stage-summary:empty {
1239+
display: none;
1240+
}
1241+
12041242
.aeo-stage-hero-main,
12051243
.aeo-next-action,
12061244
.aeo-stage-metric,
@@ -1904,8 +1942,8 @@
19041942
}
19051943

19061944
.aeo-workflow-step {
1907-
min-width: 270px;
1908-
flex: 0 0 270px;
1945+
min-width: 180px;
1946+
flex: 0 0 180px;
19091947
}
19101948

19111949
.aeo-stage-summary {
@@ -1971,7 +2009,7 @@
19712009
}
19722010

19732011
.aeo-workflow-step {
1974-
min-height: 132px;
2012+
min-height: 60px;
19752013
}
19762014
}
19772015

admin/js/audit.js

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2080,56 +2080,59 @@
20802080
var planLabel = formatRewritePlanLabel(data.plan, data.planLabel);
20812081
var upgradeUrl = getRewriteUpgradeUrl();
20822082
var cardClass = 'aeo-header-trial-offer';
2083-
var kicker = '$1 Starter Trial';
2084-
var title = 'Syncing starter trial status...';
2085-
var body = 'A one-time Stripe Checkout payment unlocks ' + starterArticles + ' AEO article credits for rewrites or new articles.';
2083+
var kicker = 'Starter Trial';
2084+
var title = 'Checking trial status...';
2085+
var body = 'Unlock ' + starterArticles + ' AEO article credits for rewrites or new content.';
20862086
var note = '';
20872087
var actionHtml = '';
20882088

20892089
if (rewriteAvailabilityState.phase === 'error') {
20902090
cardClass += ' is-error';
2091-
title = 'Starter trial is temporarily unavailable';
2092-
body = rewriteAvailabilityState.message || 'The plugin could not load article trial availability right now.';
2093-
note = canManagePlugin ? 'You can still open Studio to manage billing directly.' : 'A site administrator can manage billing in Studio.';
2091+
title = 'Starter trial unavailable';
2092+
body = rewriteAvailabilityState.message || 'Could not load trial availability right now.';
2093+
note = canManagePlugin ? 'You can manage billing directly in Studio.' : 'A site administrator can manage billing in Studio.';
20942094
if (canManagePlugin && upgradeUrl) {
20952095
actionHtml = '<a href="' + esc(upgradeUrl) + '" class="button button-secondary" target="_blank" rel="noopener">Manage in Studio</a>';
20962096
}
20972097
} else if (available > 0) {
20982098
cardClass += ' is-active';
2099-
kicker = planLabel || 'AEO Article Credits';
2100-
title = available + ' of ' + (limit > 0 ? limit : starterArticles) + ' article credits remaining';
2101-
body = 'Use them on full rewrites or brand-new article runs in Studio.';
2102-
note = canManagePlugin ? ('The ' + (planLabel || 'active plan') + ' balance is attached to this connected account.') : 'A site administrator manages billing for this connected account.';
2099+
kicker = planLabel || 'Article Credits';
2100+
title = available + ' of ' + (limit > 0 ? limit : starterArticles) + ' credits remaining';
2101+
body = 'Use them on rewrites or new articles in Studio.';
2102+
note = canManagePlugin ? (planLabel || 'Active plan') + ' balance is attached to this account.' : 'A site administrator manages billing for this account.';
21032103
if (canManagePlugin && upgradeUrl) {
21042104
actionHtml = '<a href="' + esc(upgradeUrl) + '" class="button button-secondary" target="_blank" rel="noopener">Manage in Studio</a>';
21052105
}
21062106
} else if (data.checkoutEnabled && data.starterEligible) {
2107-
title = starterArticles + ' AEO articles for ' + starterPrice;
2107+
kicker = starterPrice + ' Starter';
2108+
title = 'Unlock ' + starterArticles + ' articles for rewrites and new content';
21082109
if (canManagePlugin) {
2109-
body = 'Move this account out of Free with a one-time Stripe Checkout payment. Use the credits on rewrites or new article creation in Studio.';
2110-
note = 'Stripe Checkout collects card details for the one-time starter payment.';
2111-
actionHtml = '<button type="button" class="button button-primary aeo-start-rewrite-checkout"' + (rewriteCheckoutState.loading ? ' disabled aria-disabled="true"' : '') + '>' + esc(rewriteCheckoutState.loading ? 'Opening Stripe checkout...' : ('Upgrade for ' + starterPrice)) + '</button>';
2110+
body = 'One-time payment via Stripe Checkout. Credits work for both page rewrites and new article creation in Studio.';
2111+
note = '';
2112+
actionHtml = '<button type="button" class="button button-primary aeo-start-rewrite-checkout"' + (rewriteCheckoutState.loading ? ' disabled aria-disabled="true"' : '') + '>' + esc(rewriteCheckoutState.loading ? 'Opening checkout...' : ('Start for ' + starterPrice)) + '</button>';
21122113
} else {
2113-
body = 'No AEO article credits remain on this account.';
2114-
note = 'A site administrator must manage billing to unlock more article credits.';
2114+
body = 'No article credits remain on this account.';
2115+
note = 'A site administrator must manage billing to unlock credits.';
21152116
}
21162117
} else {
21172118
cardClass += ' is-exhausted';
21182119
kicker = planLabel || 'Starter Trial';
2119-
title = planLabel === '$1 Trial Plan' ? 'Your $1 trial is exhausted' : 'Starter trial unavailable';
2120-
body = canManagePlugin ? 'Upgrade in Studio to keep generating AEO rewrites and new articles after the trial credits are spent.' : 'No AEO article credits remain on this account.';
2121-
note = canManagePlugin ? 'Billing runs through Stripe Checkout as a one-time payment for the starter trial.' : 'A site administrator must manage billing to unlock more article credits.';
2120+
title = (planLabel && planLabel !== 'Starter Trial') ? planLabel + ' credits exhausted' : 'Starter trial unavailable';
2121+
body = canManagePlugin ? 'Upgrade in Studio to keep generating rewrites and new articles.' : 'No article credits remain on this account.';
2122+
note = canManagePlugin ? 'Billing is handled via Stripe Checkout.' : 'A site administrator must manage billing to unlock credits.';
21222123
if (canManagePlugin && upgradeUrl) {
21232124
actionHtml = '<a href="' + esc(upgradeUrl) + '" class="button button-secondary" target="_blank" rel="noopener">Upgrade in Studio</a>';
21242125
}
21252126
}
21262127

2128+
var bannerClass = 'aeo-trial-banner';
2129+
if (cardClass.indexOf('is-error') !== -1) bannerClass += ' is-error';
2130+
else if (cardClass.indexOf('is-exhausted') !== -1) bannerClass += ' is-exhausted';
2131+
21272132
return ''
2128-
+ '<div id="aeo-header-trial-offer" class="' + esc(cardClass) + '">'
2133+
+ '<div id="aeo-header-trial-offer" class="' + esc(bannerClass) + '">'
21292134
+ '<span class="aeo-header-trial-kicker">' + esc(kicker) + '</span>'
2130-
+ '<h2 class="aeo-header-trial-title">' + esc(title) + '</h2>'
2131-
+ '<p class="aeo-header-trial-body">' + esc(body) + '</p>'
2132-
+ (note ? '<p class="aeo-header-trial-note"><strong>Billing:</strong> ' + esc(note) + '</p>' : '')
2135+
+ '<span class="aeo-header-trial-title">' + esc(title) + '</span>'
21332136
+ (actionHtml ? '<div class="aeo-header-trial-actions">' + actionHtml + '</div>' : '')
21342137
+ '</div>';
21352138
}
@@ -2283,7 +2286,7 @@
22832286
function formatRewritePlanLabel(plan, explicitLabel) {
22842287
if (explicitLabel) return explicitLabel;
22852288
if (!plan) return '';
2286-
if (plan === 'starter') return '$1 Trial Plan';
2289+
if (plan === 'starter') return 'Starter Plan';
22872290
if (plan === 'pro') return 'Pro Plan';
22882291
return String(plan)
22892292
.replace(/[_-]+/g, ' ')
@@ -2338,8 +2341,8 @@
23382341
else body += '.';
23392342
} else if (data.checkoutEnabled && data.starterEligible) {
23402343
if (canManagePlugin) {
2341-
body = 'Unlock ' + starterArticles + ' AEO article credits for ' + starterPrice + '. Use them on rewrites or new articles in Studio.';
2342-
actionHtml = '<button type="button" class="button button-primary aeo-start-rewrite-checkout"' + (rewriteCheckoutState.loading ? ' disabled aria-disabled="true"' : '') + '>' + esc(rewriteCheckoutState.loading ? 'Opening checkout...' : ('Upgrade for ' + starterPrice)) + '</button>';
2344+
body = 'Unlock ' + starterArticles + ' article credits for rewrites or new content in Studio.';
2345+
actionHtml = '<button type="button" class="button button-primary aeo-start-rewrite-checkout"' + (rewriteCheckoutState.loading ? ' disabled aria-disabled="true"' : '') + '>' + esc(rewriteCheckoutState.loading ? 'Opening checkout...' : ('Start for ' + starterPrice)) + '</button>';
23432346
} else {
23442347
body = 'No AEO article credits remain on this account. Ask a site administrator to manage billing.';
23452348
}
@@ -2568,7 +2571,7 @@
25682571
return { kind: 'unavailable', label: 'Admin required', reason: 'A site administrator must manage billing for additional article credits.' };
25692572
}
25702573
if (availability.checkoutEnabled && availability.starterEligible) {
2571-
return { kind: 'starter', label: 'Unlock for $1' };
2574+
return { kind: 'starter', label: 'Rewrite' };
25722575
}
25732576
return { kind: 'upgrade', label: 'Upgrade', href: getRewriteUpgradeUrl() };
25742577
}
@@ -4281,24 +4284,10 @@
42814284
+ '</aside>';
42824285
}
42834286

4284-
function renderStageHero(stageId, context) {
4285-
var stage = STAGE_BY_ID[stageId];
4286-
if (!stage) return '';
4287-
4288-
var state = getStageState(stageId, context);
4289-
var action = getNextBestAction(stageId, context);
4290-
4291-
return ''
4292-
+ '<div class="aeo-stage-hero-main">'
4293-
+ '<div class="aeo-stage-kicker">Step ' + stage.order + ' of ' + STAGE_CONFIGS.length + '</div>'
4294-
+ '<div class="aeo-stage-title-row">'
4295-
+ '<h2 class="aeo-stage-title">' + esc(stage.title) + '</h2>'
4296-
+ renderStatusChip(state.label, state.tone)
4297-
+ '</div>'
4298-
+ '<p class="aeo-stage-description">' + esc(getStageDescription(stageId)) + '</p>'
4299-
+ '<p class="aeo-stage-context">' + esc(getStageContextLine(stageId, context)) + '</p>'
4300-
+ '</div>'
4301-
+ renderNextActionCard(action);
4287+
function renderStageHero() {
4288+
// Hero removed to reduce vertical bloat. Stage state and next-best
4289+
// action are already visible in the compact workflow rail.
4290+
return '';
43024291
}
43034292

43044293
function renderStageSummary(stageId, context) {
@@ -4324,8 +4313,14 @@
43244313
STAGE_CONFIGS.forEach(function (stage) {
43254314
var hero = document.getElementById('aeo-stage-hero-' + stage.id);
43264315
var summary = document.getElementById('aeo-stage-summary-' + stage.id);
4327-
if (hero) hero.innerHTML = renderStageHero(stage.id, context);
4328-
if (summary) summary.innerHTML = renderStageSummary(stage.id, context);
4316+
if (hero) {
4317+
hero.innerHTML = renderStageHero(stage.id, context);
4318+
hero.style.display = hero.innerHTML.trim() ? '' : 'none';
4319+
}
4320+
if (summary) {
4321+
summary.innerHTML = renderStageSummary(stage.id, context);
4322+
summary.style.display = summary.innerHTML.trim() ? '' : 'none';
4323+
}
43294324
applyWorkflowStepState(stage.id, getStageState(stage.id, context));
43304325
});
43314326
updateWorkflowBadges(context);

0 commit comments

Comments
 (0)