Site Detail Page — UX Map

Everything displayed on /site/:siteId — every component, every conditional, every data field. For a complete redesign from scratch.

Always visible
Conditionally visible
Inside a tab

Page Overview

URL: /site/:siteId — the primary workspace for a connected site. The page has a fixed max-width (768px), stacks vertically, and uses animated entrance delays per card. The default tab when a plan is ready is Site report.

┌─────────────────────────────────────────────┐ │ ← Dashboard (back button) │ │ │ │ [SITE HEADER — always] │ │ favicon · site URL · Settings icon │ │ badges: tier · platform · GSC · plugin │ │ │ │ [CONTEXTUAL BANNERS — conditional] │ │ Subscription upsell │ │ Campaign activation / paused │ │ GSC verification pending │ │ GSC nudge (not connected yet) │ │ GSC auth error (403) │ │ WooCommerce connect │ │ Plan failed / Plan pending │ │ │ │ [TABS — when plan is ready + has data] │ │ ┌──────────┬──────────┬──────────┬───────┐ │ │ │Site │ Activity │ Progress │Review?│ │ │ │report │ │ │(badge)│ │ │ └──────────┴──────────┴──────────┴───────┘ │ │ │ │ [TAB CONTENT area] │ └─────────────────────────────────────────────┘

1. Site Header Always visible

Title row
Top of page, always present
Favicon (48px) · site URL as h1 · connection date or "Collaborator" label · Settings gear icon (top right, navigates to /site/:id/settings)
Status badges row
Below title; badges appear/disappear based on state
A horizontal row of pill badges indicating integration and subscription status. Each badge is independent.
  • Tier badge — subscription tier (free / pilot / active). Hidden for collaborators.
  • Collaborator badge — shown instead of tier when user is a collaborator, not owner.
  • GitHub Connected — green pill with checkmark, shown when platform = github.
  • WordPress Connected — green pill with checkmark, shown when platform = wordpress.
  • Plugin v{version} — green pill with version number when WP plugin is verified and up to date.
  • Plugin update available — amber link badge when a newer plugin version exists. Has an inline "recheck" refresh icon button.
  • Search Console Connected — green checkmark when GSC property is linked and verified.
  • Search Console Verifying — amber with spinner, shown during GSC auto-verification.
  • Search Console: setup needed — amber, when GSC verification is waiting for user action.
  • Search Console: reconnect — clickable error badge; triggers re-adding the site to GSC. Shows "Reconnecting…" during load, "Reconnect failed" on error.
WordPress publish-blocked warning
Only when site.wpPublishBlocked = true
Amber banner with triangle icon. Headline: "Your WordPress password can't publish pages". Body explains changes are saved as drafts and instructs user to create a new Application Password with Editor/Administrator role and reconnect.
Admin view banner
Only for admin users viewing another user's site
Shield icon + "Admin view — [owner email]'s site". Helps admins know they're looking at someone else's data.
Admin ID copy fields
Only visible to admin users
Copyable monospace fields for siteId and planGenerationId. Click to copy to clipboard; shows checkmark for 1.5s after copy.

2. Contextual Banners At most one or two shown at a time

These banners stack below the header. Only the ones matching the current site state appear. They appear in priority order (subscription first, then campaign, then GSC, then WooCommerce).
Subscription banner
When plan is ready AND subscription is not active/pilot
Prompts the owner to subscribe to unlock automated improvements. Shows when the site has a plan generated but no paid subscription.
CTA: Subscribe / upgrade
Campaign activation banner
When subscription is active/pilot AND campaign is not yet launched
Shows the number of improvement items and content items queued, and prompts the user to start the campaign. After activation, navigates to the Activity tab.
  • Improvement item count
  • Content item count
  • Activate button — inline loading state → success checkmark
CTA: Activate campaign
Campaign paused banner
When subscription is active/pilot AND campaign is paused
Informs user the campaign is paused. Offers a "Resume" button to restart daily automation.
CTA: Resume campaign
GSC verification pending banner
When site.gscVerification exists and is not yet verified
Guides user through completing Google Search Console verification. Shows verification steps and polls for completion in the background.
GSC nudge
When plan data exists but GSC is not connected and no verification is in progress
Soft prompt encouraging the user to connect Google Search Console to unlock keyword tracking and the Progress tab.
CTA: Connect Search Console
GSC auth error banner
When site.lastExecutionError contains "GSC" and "403"
Explains that Scaup lost access to Google Search Console, probably due to revoked permissions, and prompts reconnection.
CTA: Reconnect Search Console
WooCommerce connect card
When site is WooCommerce AND WooCommerce API key is not set
Prompts user to connect WooCommerce API so Scaup can access product descriptions and optimize e-commerce content.
CTA: Connect WooCommerce
Plan failed state
When site.planStatus = 'failed'
Error card with triangle icon. "We couldn't build your plan. Something went wrong on our end. Let's try again."
CTA: Try again (retries plan generation)
Plan pending state
When site.planStatus = 'pending'
Two variants:
Needs subscription (no subscription + other sites exist) — shows Subscription banner.
Ready to generate — shows Generate Plan CTA card prompting the user to kick off analysis.
CTA: Generate my plan
Plan generating full-screen state
When site.planStatus = 'generating' — replaces entire page
Full-screen loading UI shown while the AI plan is being built. Cycles through phase labels (analyzing site, reviewing competitors, building plan…) to communicate progress. Shows site URL.

3. Tab Bar Shown when plan is ready and has items or scan data

The tab bar uses a line-style variant (underline, not pill). Tabs available:

Site report

Default tab. AI-generated analysis: keywords, competitors, content roadmap.

Activity

Recent work timeline, reverted items, and the full growth plan backlog.

Progress

GSC-powered keyword metrics and sparklines over week / month / all-time.

To review (badge)

Hidden unless there are pending items. Shows an orange count badge.

4. Site Report Tab Tab content

Shows an AI-generated site analysis updated periodically. Sections appear only when data is available.

Report header
"Site report" heading + "Last updated: [date]" timestamp.
Keyword opportunities table
Shown when report.keywordOpportunities.length > 0
Full-width table with four columns.
  • Keyword — the search term
  • Monthly searches — formatted volume (e.g. "1.2k")
  • Status — current GSC ranking description. Column header has an info tooltip explaining GSC vs. live Google differences.
  • Difficulty — badge: Quick fix (green) / Medium (gray) / Hard (red)
Competitor landscape grid
Shown when report.competitors.length > 0
Grid of competitor cards, each showing:
  • Competitor favicon (Google favicon API)
  • Domain name + external link icon
  • Unique advantage description (1–2 sentences)
  • "N shared keywords" badge — hovering shows a tooltip list of the shared keywords
Content roadmap list
Shown when report.contentRoadmap.length > 0
Ordered list of AI-recommended content pieces. Each item shows:
  • Title of the suggested content
  • Rationale (why this content matters)
  • Target keyword badges (outline style)
Health overview grid
Shown within the site report (inside the report data)
Four metric squares with info tooltips. Each shows a label + status value.
  • Site basics — OK / Needs attention / Critical (HTTPS, broken links, missing tags)
  • Technical health — OK / Needs attention / Critical (speed, mobile, crawlability)
  • Content quality — OK / Needs attention / Critical (thin content, duplicates, missing descriptions)
  • Growth potential — Low / Medium / High (keyword gap vs. competitors)
Reassurance footer card
"We're working through everything above. Every day, we pick the highest-impact improvement and apply it to your site."
Empty state
When no report exists yet
"We're analyzing your site" + description that first report is coming soon.

5. Activity Tab Tab content

Shows everything that has been done and everything planned. The tab has three distinct sub-sections.

Completion counter
Shown when any work has been completed or timeline exists
"N improvements completed" subheading at top.
Recent work timeline
Shown when dailyActivityFeed has entries
Vertical timeline with colored dots (blue for content changes, gray for technical). Each entry shows:
  • Relative date (e.g. "3 days ago")
  • Change title
  • Target page path (linked to live page)
  • Execution summary: "what" + "why" paragraphs (shown when available)
  • Detail text (fallback when no execution summary)
  • "Worth reviewing" badge + warning text (when validation status = warn)
  • "Show change / Hide change" toggle — expands a before/after diff block
  • Undo button — appears for revertible items. Opens a confirmation dialog. Clicking "Yes, undo" reverts the change on the live site.
  • Initial view: 5 entries. "Show N more" button reveals the rest.
Action: Undo (revert change) Action: Show/hide diff
Reverted items card
Shown only when there are reverted changes
Card listing items the user previously undid. Shows title, target URL, and "Undone" label.
Growth plan
Shown when plan has any items
The full backlog of planned improvements, grouped by category and collapsible.
  • Summary bar: Planned · Done (green) · Remaining — three counters
  • Explanation text: "Your growth plan has N items, ranked by impact. We execute the highest-priority items first, one per day."
  • Category groups (expandable/collapsible, first group open by default):
    • Technical fixes (meta fixes, static files, minor edits)
    • Page improvements (content changes, category descriptions, keyword optimization)
    • New content (new pages/posts)
    • Other improvements
  • Each category shows: item count + "N done" count
  • Each plan item row: status icon · title · type badge · origin badge (if any) · completion date or "Skipped" label
  • Status icons: checkmark (completed) · spinner (in_progress) · empty circle (scheduled/queued) · dash (skipped)
Empty state
When campaign has no data and no plan items
"Your plan is being prepared" + description that analysis is underway.

6. Progress Tab Tab content

Keyword performance over time, powered by Google Search Console. Requires GSC to be connected.

Period toggle
Three-button segmented control: "This week" · "This month" · "All time". Selecting a period re-fetches data.
Highlights grid
Two metric cards side by side.
  • Keywords finding you — count of unique queries that appeared in search results. Shows a sparkline trend chart. Shows "N clicks" below if > 0. Shows upward percentage change badge when positive.
  • Search appearances — total impressions. Shows a sparkline trend chart. Shows upward percentage change badge when positive.
Top keywords list
Shown when data available
Section label "Top keywords". Each row: keyword name · impression count ("N views") · current position (#N).
Keywords moving up list
Section label "Keywords moving up". Each row: keyword name · impression count · spots gained (↑N) · current position (#N). Shows "No keyword improvements yet for this period" when empty.
Milestones list
Shown when milestones exist
Section label "Milestones". Each row: green checkmark icon + milestone label text (e.g. "First keyword reached top 10").
No-GSC empty state
When GSC is not connected
"Connect Google Search Console" + explanation that this data requires GSC.
Collecting data empty state
When GSC is connected but no weekly report has run yet
"Collecting data" + "We'll start showing your search performance after the first weekly report runs."

7. To Review Tab Tab content Hidden when 0 pending items

Appears in the tab bar with an orange badge count when Scaup has prepared changes that need the owner's approval before going live.

Guidance text
"Here's what we've prepared for your site. Tap any item to review it."
Review item cards
List of pending items. Each card is tappable and navigates to /site/:id/review?item=:itemId for full review. Cards show item title, type, and a summary of the proposed change.
Action: Tap to review → full review page
All caught up empty state
When pending items become 0
Green checkmark icon + "You're all caught up" + "Nothing to review right now. We'll let you know when new changes are ready."

8. Navigation & Global Actions

Back button
Top-left, above the header. "← Dashboard". Navigates to /dashboard.
Settings button
Gear icon in the site header (top-right of header). Navigates to /site/:id/settings.

9. Data Sources Summary

The page is powered by these data queries (useful for understanding what state drives each UI region):

  • getUserSites / getCollaboratorSites — determines if user is owner or collaborator
  • getPlanSummary — campaign status, item counts, completion stats, GSC connection status
  • getPendingReviews — count and list of items awaiting review (drives the "To review" tab badge)
  • getLatestSiteReport — site report tab data (keywords, competitors, roadmap, health scores)
  • getWeeklyOverview — daily activity feed for the timeline
  • getRevertibleItems — which timeline entries can be undone
  • getRevertedItems — previously undone items for the reverted section
  • getProgressOverview — keyword stats, sparklines, milestones (parameterized by period)
  • getLatestRelease — latest plugin version for the update badge
scaup-site-detail-ux.md
# Scaup — Site Detail Page UX Map (/site/:siteId) Complete map of every component, banner, tab, and data field on the site detail page. For a full redesign from scratch. --- ## Page Overview URL: /site/:siteId — the primary workspace for a connected site. Max-width: 768px, vertically stacked, animated entrance delays per card. Default tab (when plan is ready): Site report. Layout structure (top to bottom): ← Dashboard (back button) [SITE HEADER — always visible] [CONTEXTUAL BANNERS — conditional, priority-ordered] [TAB BAR — when plan is ready and has items/scan data] [TAB CONTENT] --- ## 1. Site Header (always visible) ### Title row - Site favicon (48px) - Site URL as h1 - "Connected [date]" or "Collaborator" label - Settings gear icon (top-right) → navigates to /site/:id/settings ### Status badges (conditional, horizontal row) Each badge appears/disappears independently based on site state: - Tier badge — subscription tier (free / pilot / active). Hidden for collaborators. - Collaborator badge — shown when user is collaborator, not owner. - GitHub Connected — green pill with checkmark (platform = github) - WordPress Connected — green pill with checkmark (platform = wordpress) - Plugin v{version} — green pill when WP plugin is verified and current - Plugin update available — amber link badge; has inline refresh/recheck icon button - Search Console Connected — green checkmark when GSC property verified - Search Console Verifying — amber + spinner during GSC auto-verification - Search Console: setup needed — amber, user action required - Search Console: reconnect — clickable error badge; triggers re-adding site to GSC; shows "Reconnecting…" / "Reconnect failed" states ### WordPress publish-blocked warning (conditional) Shown when: site.wpPublishBlocked = true - Amber banner with triangle icon - Headline: "Your WordPress password can't publish pages" - Body: explains changes are saved as drafts; instructs user to create new Application Password with Editor/Administrator role and reconnect ### Admin view banner (conditional) Shown when: admin user viewing another user's site - Shield icon + "Admin view — [owner email]'s site" ### Admin ID copy fields (conditional) Shown when: current user is admin - Copyable monospace fields for siteId and planGenerationId - Click to copy; shows checkmark for 1.5s --- ## 2. Contextual Banners (conditional, priority-ordered) At most one or two shown at a time, stacked below the header. ### Subscription banner Condition: plan is ready AND subscription is not active/pilot - Prompts owner to subscribe to unlock automated improvements - CTA: Subscribe / upgrade ### Campaign activation banner Condition: subscription is active/pilot AND campaign status = inactive - Shows: improvement item count, content item count - CTA: "Activate campaign" — inline loading state → success checkmark - On activation: navigates to Activity tab ### Campaign paused banner Condition: subscription is active/pilot AND campaign status = paused - Informs user campaign is paused - CTA: "Resume campaign" ### GSC verification pending banner Condition: site.gscVerification exists and status != verified - Guides user through completing Google Search Console verification - Polls for verification completion in background ### GSC nudge Condition: plan data exists AND GSC not connected AND no verification in progress - Soft prompt to connect Google Search Console - CTA: Connect Search Console ### GSC auth error banner Condition: site.lastExecutionError contains "GSC" and "403" - Explains Scaup lost GSC access (revoked permissions) - CTA: Reconnect Search Console ### WooCommerce connect card Condition: site is WooCommerce AND WooCommerce API key is not set - Prompts to connect WooCommerce API for product content optimization - CTA: Connect WooCommerce ### Plan failed state Condition: site.planStatus = 'failed' - Error card with triangle icon - "We couldn't build your plan. Something went wrong on our end. Let's try again." - CTA: "Try again" (retries plan generation) ### Plan pending state Condition: site.planStatus = 'pending' Two variants: - Needs subscription (no active subscription + other sites exist): shows Subscription banner - Ready to generate (no subscription conflict): shows Generate Plan CTA card - CTA: "Generate my plan" ### Plan generating full-screen state Condition: site.planStatus = 'generating' — replaces entire page - Full-screen loading UI while AI plan builds - Cycles through phase labels (analyzing site → reviewing competitors → building plan…) - Shows site URL --- ## 3. Tab Bar Shown when: plan is ready AND (has plan items OR has scan data) Style: line/underline variant (not pill) Tabs: - Site report — default tab; AI-generated analysis - Activity — recent work timeline and growth plan backlog - Progress — GSC keyword metrics - To review — hidden unless pending items > 0; shows orange count badge --- ## 4. Site Report Tab (default) Sections appear only when data is available. ### Report header - "Site report" heading - "Last updated: [date]" timestamp ### Keyword opportunities table Condition: report.keywordOpportunities.length > 0 Columns: - Keyword — the search term - Monthly searches — formatted volume (e.g. "1.2k") - Status — current GSC ranking description; column header has info tooltip explaining GSC vs. live Google differences - Difficulty — badge: Quick fix (green) / Medium (gray) / Hard (red) ### Competitor landscape grid Condition: report.competitors.length > 0 Each competitor card shows: - Favicon (Google favicon API) - Domain name + external link icon - Unique advantage description (1–2 sentences) - "N shared keywords" badge — hover shows tooltip list of shared keywords ### Content roadmap list Condition: report.contentRoadmap.length > 0 Each item shows: - Title of the suggested content piece - Rationale (why this content matters for SEO) - Target keyword badges (outline style) ### Health overview grid Four metric squares, each with an info tooltip: - Site basics — OK / Needs attention / Critical (HTTPS, broken links, missing tags) - Technical health — OK / Needs attention / Critical (speed, mobile, crawlability) - Content quality — OK / Needs attention / Critical (thin content, duplicates, missing descriptions) - Growth potential — Low / Medium / High (keyword gap vs. competitors) ### Reassurance footer card "We're working through everything above. Every day, we pick the highest-impact improvement and apply it to your site." ### Empty state (no report yet) "We're analyzing your site" + description that first report is coming soon. --- ## 5. Activity Tab ### Completion counter Shown when: any work completed or timeline has entries "N improvements completed" subheading ### Recent work timeline Shown when: dailyActivityFeed has entries - Vertical timeline with colored dots: blue (content changes), gray (technical) - Initial view: 5 entries; "Show N more" button reveals the rest Each entry shows: - Relative date ("3 days ago") - Change title - Target page path (linked to live page) - Execution summary: "what" + "why" paragraphs (when available) - Detail text (fallback when no execution summary) - "Worth reviewing" badge + warning text (when validation status = warn) - "Show change / Hide change" toggle → expands before/after diff block - Undo button (for revertible items) → confirmation dialog → reverts change on live site Actions: Undo (revert), Show/hide diff ### Reverted items card Shown when: any items have been reverted - Lists undone items: title, target URL, "Undone" label ### Growth plan Shown when: plan has any items Summary bar: Planned · Done (green) · Remaining — three counters Explanation: "Your growth plan has N items, ranked by impact. We execute the highest-priority items first, one per day." Category groups (expandable/collapsible; first group open by default): - Technical fixes — meta fixes, static files, minor edits - Page improvements — content changes, category descriptions, keyword optimization - New content — new pages/posts - Other improvements Each category shows: item count + "N done" count Each plan item row: - Status icon: ✓ completed / spinner in_progress / circle scheduled/queued / dash skipped - Title - Type badge (outline) - Origin badge (secondary, if applicable) - Completion date ("Done Jun 3") or "Skipped" label ### Empty state "Your plan is being prepared" + description that analysis is underway. --- ## 6. Progress Tab Requires Google Search Console to be connected. ### Period toggle Segmented control: "This week" · "This month" · "All time" Selecting a period re-fetches all data. ### Highlights grid (two cards) Keywords finding you: - Count of unique search queries that appeared in results - Sparkline trend chart - "N clicks" shown below when > 0 - Upward % change badge when positive Search appearances: - Total impressions count - Sparkline trend chart - Upward % change badge when positive ### Top keywords list Section label: "Top keywords" Each row: keyword name · "N views" (impressions) · #N (position) ### Keywords moving up list Section label: "Keywords moving up" Each row: keyword name · "N views" · ↑N (spots gained) · #N (current position) Empty message: "No keyword improvements yet for this period" ### Milestones list Condition: milestones exist Section label: "Milestones" Each row: green checkmark icon + milestone label (e.g. "First keyword reached top 10") ### Empty states - No GSC: "Connect Google Search Console" + explanation - GSC connected but no data yet: "Collecting data" + "We'll start showing your search performance after the first weekly report runs." --- ## 7. To Review Tab Hidden from tab bar when: pending items = 0 Shown with orange count badge when: pending items > 0 ### Guidance text "Here's what we've prepared for your site. Tap any item to review it." ### Review item cards List of pending items; each card navigates to /site/:id/review?item=:itemId Cards show: title, type, summary of proposed change ### Empty state Green checkmark icon + "You're all caught up" + "Nothing to review right now. We'll let you know when new changes are ready." --- ## 8. Navigation & Global Actions - Back button: top-left, above header. "← Dashboard" → /dashboard - Settings button: gear icon in site header (top-right) → /site/:id/settings --- ## 9. Data Sources Each data query and what it drives: - getUserSites / getCollaboratorSites — owner vs. collaborator role - getPlanSummary — campaign status, item counts, completion stats, GSC connection - getPendingReviews — "To review" tab badge count and item list - getLatestSiteReport — Site report tab (keywords, competitors, roadmap, health scores) - getWeeklyOverview — daily activity feed for the timeline - getRevertibleItems — which timeline entries show an Undo button - getRevertedItems — reverted items section in Activity tab - getProgressOverview — keyword stats, sparklines, milestones (parameterized by period) - getLatestRelease — latest plugin version for the update badge in Site header