Polish dual cleanse workflow and analysis UX

[ChrisAdamsdevelopment]

Motivation

• Clarify the two distinct cleanse paths so users can quickly choose the right workflow without changing backend behavior.
• Improve disabled states, result visibility, metadata analysis readability, and log legibility to reduce UX friction during manual QA.

Description

• Updated app.tsx to introduce clear dual-action UI cards for Quick Cleanse (Browser) and Full Server Cleanse with short helper text explaining each path.
• Added contextual disabled-state reasons (quickDisabledReason, seoDisabledReason, serverDisabledReason) and visual disabled styles for the Quick Cleanse, Generate AI SEO Payload, and Full Server Cleanse actions.
• Made the manual download link more prominent and added a Result Source label to indicate Browser Quick Cleanse vs Full Server Cleanse.
• Enhanced analysis display by adding a parseError field to QueueItem.analysis, showing a non-blocking fallback warning when parser fallback occurred, and rendering metadata in scan-friendly cards with stronger high-risk emphasis and a clarifying low-risk note.
• Improved system log presentation by parsing the [timestamp] message strings for layout and styling log rows to visually distinguish info/success/error entries without changing log data format.
• Preserved all existing flows and behaviors; only UI/presentation changes were made in app.tsx (no server, API, Docker, dependency, or auth/Stripe logic changes).

Testing

• Ran npm install successfully.
• Built the frontend with npm run build and the production build completed successfully.
• Performed code inspection/grep to confirm presence of AuthScreen, /api/me, UsageMeter, PlanBadge, upgrade modal/checkout flow, /api/process, /api/generate-seo, Quick Cleanse, Full Server Cleanse, manual download link, and URL.revokeObjectURL usage.

---

Codex Task

Summary by Sourcery

Polish the cleanse workflow and analysis UX in the frontend without altering backend behavior.

New Features:

• Introduce distinct UI cards and helper text for Browser Quick Cleanse and Full Server Cleanse workflows.
• Surface contextual disabled-state reasons and styles for Quick Cleanse, AI SEO generation, and Full Server Cleanse actions.
• Label cleanse results with a Result Source indicator distinguishing browser vs server outputs.

Enhancements:

• Extend analysis metadata to include optional parser error information and display it with clearer, risk-emphasizing cards.
• Improve system log readability by parsing timestamped entries and visually differentiating error, success, and neutral messages.

[sourcery-ai]

Reviewer's Guide

Refines the cleanse workflow and analysis UI in app.tsx by introducing clearer dual workflow cards, contextual disabled states with explanations, richer analysis metadata (including parser fallback indication), and more legible system logs, without altering backend behavior.

Updated class diagram for QueueItem analysis model

classDiagram
  class QueueItem {
    string id
    File file
    string status
    string downloadUrl
    string downloadName
    Report report
    string error
    Analysis analysis
    string[] logs
  }

  class Report {
    number removedCount
    string[] removedTags
    string timestamp
  }

  class Analysis {
    string format
    string title
    string artist
    string genre
    RiskLevel provenanceRisk
    string[] detectedMarkers
    string parseError
  }

  class ParsedMetadata {
    string format
    string title
    string artist
    string genre
    RiskLevel provenanceRisk
    string[] detectedMarkers
    string parseError
  }

  QueueItem --> Report : report
  QueueItem --> Analysis : analysis
  ParsedMetadata --> Analysis : mapped_to

Loading

Flow diagram for dual cleanse button enablement and result source

flowchart TD
  A_start[Start_cleanse_workflow] --> B_has_active_item{Active_item_selected}

  B_has_active_item -->|no| C_quick_reason_no_file[quickDisabledReason = Select a file first]
  B_has_active_item -->|no| D_seo_reason_no_file[seoDisabledReason = Select a file to provide context first]
  B_has_active_item -->|no| E_server_reason_queue[serverDisabledReason depends_on_queue]

  B_has_active_item -->|yes| F_is_mp3{File_extension_is_mp3}

  F_is_mp3 -->|no| G_quick_reason_not_mp3[quickDisabledReason = Quick Cleanse supports MP3 files only]
  F_is_mp3 -->|yes| H_quick_reason_empty[quickDisabledReason = empty]

  H_quick_reason_empty --> I_is_batching{isBatching}
  G_quick_reason_not_mp3 --> I_is_batching

  I_is_batching -->|yes| J_quick_disabled[Quick_Cleanse_button_disabled]
  I_is_batching -->|no| K_quick_enabled[Quick_Cleanse_button_enabled]

  B_has_active_item -->|yes| L_seo_reason_empty[seoDisabledReason = empty]

  B_has_active_item -->|yes| M_server_queue_state{Queue_state}

  M_server_queue_state -->|isBatching| N_server_reason_running[serverDisabledReason = Server cleanse already running]
  M_server_queue_state -->|queue_empty| O_server_reason_no_files[serverDisabledReason = Add at least one file first]
  M_server_queue_state -->|all_done| P_server_reason_all_done[serverDisabledReason = All files are already completed]
  M_server_queue_state -->|otherwise| Q_server_reason_empty[serverDisabledReason = empty]

  Q_server_reason_empty --> R_server_button_enabled[Full_Server_Cleanse_enabled]
  N_server_reason_running --> S_server_button_disabled[Full_Server_Cleanse_disabled]
  O_server_reason_no_files --> S_server_button_disabled
  P_server_reason_all_done --> S_server_button_disabled

  subgraph Result_source_label
    T_download_ready{Has_downloadName}
    T_download_ready -->|starts_with_quick_cleansed_| U_result_quick[resultSource = Browser Quick Cleanse]
    T_download_ready -->|otherwise| V_result_server[resultSource = Full Server Cleanse]
  end

Loading

File-Level Changes

Change	Details	Files
Clarified and separated browser quick cleanse vs full server cleanse workflows with contextual helper text and result source labeling.	Introduced a Cleanse Workflow section with two distinct cards for Quick Cleanse (Browser) and Full Server Cleanse. Added MP3-only and server usage helper copy beneath each cleanse button. Wrapped the manual download link in a styled container and added a Result Source label based on the download name prefix.	app.tsx
Added contextual disabled states and explanations for cleanse and SEO actions to prevent invalid operations and clarify prerequisites.	Introduced isMp3, quickDisabledReason, seoDisabledReason, and serverDisabledReason derived from activeItem, queue, and batching state. Hooked these flags into button disabled props for Quick Cleanse, Full Server Cleanse, and Generate AI SEO Payload, including Tailwind-based disabled styles. Rendered small explanatory messages under buttons when they are disabled to communicate why actions are unavailable.	app.tsx
Enhanced analysis metadata presentation, including parser fallback warnings and more scannable metadata cards with clearer risk emphasis.	Extended QueueItem.analysis with an optional parseError field and wired it through from readFileMetadata. Displayed a non-blocking warning chip when parseError is present to indicate fallback metadata parsing. Replaced the flat two-column analysis layout with bordered cards per field and emphasized High vs Low provenance risk, including a clarifying note for Low risk. Improved detected markers display by naming the field Detected Markers and handling the empty state as 'None detected'.	app.tsx
Improved system log readability by parsing timestamped log entries and styling rows according to severity without changing log formats.	Changed the log rendering loop to regex-parse '[timestamp] message' into separate timestamp and message spans, with a fallback when parsing fails. Derived simple isErr/isSuccess booleans from log text to assign severity-based colors and background styles using Tailwind classes. Maintained the original logs array content while presenting logs in a scrollable, visually grouped list with monospaced formatting.	app.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The MP3-only messaging for Quick Cleanse is duplicated and slightly inconsistent (onClick error vs quickDisabledReason); consider centralizing the message in a constant so both the runtime error and disabled hint stay aligned.
• The log styling heuristics (/failed|error/ and /complete|generated|starting server cleanse/) rely on broad substring matches; you might want to tighten these (e.g., by anchoring or using more specific phrases) to avoid misclassifying future log messages as success or error based on incidental wording.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The MP3-only messaging for Quick Cleanse is duplicated and slightly inconsistent (onClick error vs `quickDisabledReason`); consider centralizing the message in a constant so both the runtime error and disabled hint stay aligned.
- The log styling heuristics (`/failed|error/` and `/complete|generated|starting server cleanse/`) rely on broad substring matches; you might want to tighten these (e.g., by anchoring or using more specific phrases) to avoid misclassifying future log messages as success or error based on incidental wording.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}