Integrate browser MP3 quick cleanse into root app#9
Merged
ChrisAdamsdevelopment merged 1 commit intoMay 4, 2026
Merged
Conversation
Reviewer's GuideAdds browser-side MP3 metadata analysis and a local 'Quick Cleanse' path integrated into the existing queue flow, while preserving the full server cleanse pipeline and existing root app UX. Sequence diagram for browser Quick Cleanse and server cleanse integrationsequenceDiagram
actor User
participant FrontendApp
participant MetadataUtils
participant BrowserURL as BrowserURLAPI
participant BackendAPI
User->>FrontendApp: Upload audio file
FrontendApp->>MetadataUtils: readFileMetadata(file)
MetadataUtils-->>FrontendApp: FileMetadataResult
FrontendApp->>FrontendApp: updateItem analysis
FrontendApp->>FrontendApp: addLog Reading local metadata for analysis
User->>FrontendApp: Click Quick Cleanse (Browser)
FrontendApp->>FrontendApp: validate MP3 extension
FrontendApp->>FrontendApp: addLog Starting browser quick cleanse
FrontendApp->>MetadataUtils: writeMP3Metadata(file, seo.title, analysis.artist, analysis.genre)
MetadataUtils-->>FrontendApp: cleansedBlob
FrontendApp->>BrowserURL: createObjectURL(cleansedBlob)
BrowserURL-->>FrontendApp: downloadUrl
FrontendApp->>FrontendApp: updateItem downloadUrl, downloadName, status done
FrontendApp->>FrontendApp: addLog Browser quick cleanse complete
User-->>FrontendApp: Click Manual Download Link
User->>FrontendApp: Click Full Server Cleanse
FrontendApp->>FrontendApp: addLog Starting server cleanse via /api/process
FrontendApp->>BackendAPI: POST /api/process with file and seo
BackendAPI-->>FrontendApp: cleansed file + report
FrontendApp->>BrowserURL: createObjectURL(serverFile)
BrowserURL-->>FrontendApp: downloadUrl
FrontendApp->>FrontendApp: updateItem report, downloadUrl, status done
Sequence diagram for AI SEO payload generation using metadata analysissequenceDiagram
actor User
participant FrontendApp
participant BackendAPI
User->>FrontendApp: Click Generate AI SEO Payload
FrontendApp->>FrontendApp: read activeItem.seo and analysis
FrontendApp->>BackendAPI: POST /api/generate-seo { title, artist, genre, platform }
BackendAPI-->>FrontendApp: { title, description, tags }
FrontendApp->>FrontendApp: updateItem seo with response
FrontendApp->>FrontendApp: addLog SEO payload generated
FrontendApp-->>User: Display updated SEO fields and log
Class diagram for updated QueueItem and metadata utilitiesclassDiagram
class QueueItem {
string id
File file
ItemStatus status
QueueItemSeo seo
string downloadUrl
string downloadName
QueueItemReport report
string error
QueueItemAnalysis analysis
string[] logs
}
class QueueItemSeo {
string title
string description
string tags
}
class QueueItemReport {
number removedCount
string[] removedTags
string timestamp
}
class QueueItemAnalysis {
string format
string title
string artist
string genre
RiskLevel provenanceRisk
string[] detectedMarkers
}
class FileMetadataResult {
string format
string title
string artist
string genre
string[] detectedMarkers
RiskLevel provenanceRisk
unknown raw
}
class MetadataUtils {
+readFileMetadata(file File) FileMetadataResult
+writeMP3Metadata(file File, title string, artist string, genre string) Blob
}
class AppLogic {
+addLog(id string, message string) void
+analyzeFile(item QueueItem) QueueItemPartial
+runBatch() void
}
class QueueItemPartial {
QueueItemSeo seo
QueueItemAnalysis analysis
}
QueueItem --> QueueItemSeo
QueueItem --> QueueItemReport
QueueItem --> QueueItemAnalysis
QueueItem --> "*" string : logs
MetadataUtils --> FileMetadataResult
AppLogic --> QueueItem
AppLogic --> MetadataUtils
AppLogic --> QueueItemPartial
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- The
addLoghelper closes over thequeuearray and then callsupdateItem, which itself usessetQueue; this risks stale reads under concurrent updates, so consider updating logs via a functionalsetQueue/updateItemthat derives fromprevstate rather than re-readingqueueinsideaddLog. - The
Quick Cleanse (Browser)path only checks for a.mp3filename before callingwriteMP3Metadata, so it may mis-handle mislabeled or unsupported files; consider validating the container/codec (e.g., viaanalysis.formator MIME type) before attempting to rewrite ID3 tags. - Since the rest of the app is in TypeScript, consider converting
src/utils/metadata.jsto TypeScript instead of relying on a separatemetadata.d.ts, which would keep the implementation and types in sync and simplify future refactors of the metadata utilities.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `addLog` helper closes over the `queue` array and then calls `updateItem`, which itself uses `setQueue`; this risks stale reads under concurrent updates, so consider updating logs via a functional `setQueue`/`updateItem` that derives from `prev` state rather than re-reading `queue` inside `addLog`.
- The `Quick Cleanse (Browser)` path only checks for a `.mp3` filename before calling `writeMP3Metadata`, so it may mis-handle mislabeled or unsupported files; consider validating the container/codec (e.g., via `analysis.format` or MIME type) before attempting to rewrite ID3 tags.
- Since the rest of the app is in TypeScript, consider converting `src/utils/metadata.js` to TypeScript instead of relying on a separate `metadata.d.ts`, which would keep the implementation and types in sync and simplify future refactors of the metadata utilities.
## Individual Comments
### Comment 1
<location path="app.tsx" line_range="949-958" />
<code_context>
+ <button
</code_context>
<issue_to_address>
**issue (bug_risk):** Add error handling around `writeMP3Metadata` in the Quick Cleanse handler.
Right now, failures in these async steps can throw and leave the item in a partially updated state (e.g., status updated but no download URL). Please wrap the handler body in a try/catch, set an `error` on failure, and log via `addLog` so the UI remains consistent and failures are visible.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+949
to
+958
| <button | ||
| onClick={async () => { | ||
| if (!activeItem.file.name.toLowerCase().endsWith('.mp3')) { updateItem(activeItem.id, { error: 'Quick Cleanse supports MP3 only.' }); return; } | ||
| updateItem(activeItem.id, { error: null }); | ||
| addLog(activeItem.id, 'Starting browser quick cleanse'); | ||
| const blob = await writeMP3Metadata(activeItem.file, { title: activeItem.seo.title, artist: activeItem.analysis?.artist || '', genre: activeItem.analysis?.genre || '' }); | ||
| const old = activeItem.downloadUrl; | ||
| if (old) URL.revokeObjectURL(old); | ||
| const url = URL.createObjectURL(blob); | ||
| updateItem(activeItem.id, { downloadUrl: url, downloadName: `quick_cleansed_${activeItem.file.name}`, status: 'done' }); |
There was a problem hiding this comment.
issue (bug_risk): Add error handling around writeMP3Metadata in the Quick Cleanse handler.
Right now, failures in these async steps can throw and leave the item in a partially updated state (e.g., status updated but no download URL). Please wrap the handler body in a try/catch, set an error on failure, and log via addLog so the UI remains consistent and failures are visible.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 69830c9bee
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| className="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm focus:border-cyan-500 outline-none resize-none" /> | ||
| </div> | ||
| <button onClick={async ()=>{ | ||
| const res = await fetch(`${BACKEND_URL}/api/generate-seo`, { method:'POST', headers:{'Content-Type':'application/json', Authorization:`Bearer ${authToken}`}, body: JSON.stringify({ title: activeItem.seo.title, artist: activeItem.analysis?.artist || '', genre: activeItem.analysis?.genre || '', platform })}); |
There was a problem hiding this comment.
The new SEO button posts { title, artist, genre, platform }, but POST /api/generate-seo validates only promptText and returns 400 when it is missing (see server.js handler). In this flow, every click on “Generate AI SEO Payload” fails server-side, and because only res.ok is handled, users get no feedback and the feature is effectively non-functional.
Useful? React with 👍 / 👎.
|
|
||
| const addLog = (id: string, message: string) => { | ||
| const stamp = new Date().toLocaleTimeString(); | ||
| updateItem(id, { logs: [...(queue.find(i => i.id === id)?.logs || []), `[${stamp}] ${message}`] }); |
There was a problem hiding this comment.
addLog reads queue from the render closure and then writes logs via updateItem, so multiple log writes in one async flow (e.g., runBatch or quick cleanse start/complete) can overwrite earlier entries instead of appending to the latest list. This makes the new System Log unreliable because prior messages are dropped under normal use.
Useful? React with 👍 / 👎.
This was referenced May 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Description
src/utils/metadata.js(andsrc/utils/metadata.d.ts) exposingreadFileMetadata(file)andwriteMP3Metadata(file, metadata)that reuse patterns from PR Add in-browser MP3 metadata cleanse, metadata utils, and integrated frontend UI #2 for music metadata parsing and AI/provenance marker detection.QueueItemwithanalysisandlogs, callingreadFileMetadataon upload/analysis, and displaying format/title/artist/genre/provenance risk/detected markers in the UI.Quick Cleanse (Browser)(emerald, MP3-only) which useswriteMP3Metadataand creates a Blob object URL with a manual<a download>link, andFull Server Cleanse(cyan) which uses the existing/api/processpipeline; object URLs are revoked on replace/remove/unmount.package.jsonto includebrowser-id3-writer@4.4.0andmusic-metadata-browser@2.5.11, and preserved all existing auth/session, usage meter, plan badge, upgrade modal, Stripe checkout session flow, mock checkout banner, and server forensic report handling; noclient/folder was created or imported and the root app structure was not replaced.Testing
npm installand it completed successfully.npm run buildand the TypeScript + Vite production build completed successfully.src/main.tsxand that auth/api/me, Stripe checkout-session flow, usage sync and/api/processserver cleanse code paths remain present in the built source.Reused from PR #2: metadata parsing and marker heuristics,
writeMP3Metadata/readFileMetadatalogic and marker list as a starting point; PR #2 is superseded by this integrated implementation and no separateclient/frontend was created or imported.Codex Task
Summary by Sourcery
Integrate client-side MP3 metadata analysis and a browser-based quick cleanse path into the existing root app while preserving the server-based cleanse flow.
New Features:
Enhancements:
Build: