feat(plugin): Add Cosmetic Committee plugin for aesthetic UI customization#5
Conversation
…omization Adds a new plugin called 'Cosmetic Committee' that provides users with a dedicated team of specialized agents to assist in making aesthetic changes to the Agent Zero Web UI via chat. Features: - **Cosmo**: The user-facing agent who guides the user and offers 3 pre-built themes (Cyberpunk, Minimalist Light, Ocean Breeze). - **Lead Designer**: Translates the user's intent into explicit, machine-readable CSS instructions. - **CSS Specialist**: Writes the custom CSS. - **QA Specialist**: Reviews the CSS for safety, quality, and contrast, preventing destructive UI changes before applying the code. - **Real-time Updates**: Changes to the UI are broadcasted to the frontend Alpine.js store and applied instantly without requiring a page reload. Co-authored-by: thirdeyenation <133812267+thirdeyenation@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
This PR introduces the "Cosmetic Committee", a fully functional Agent Zero plugin consisting of a multi-agent team dedicated to aesthetic customization of the Web UI.
Overview
Users can chat with the user-facing agent,
cosmo, to request visual changes to the interface or apply one of 3 pre-built themes. Cosmo orchestrates the task by calling thelead_designer, who delegates to acss_specialistto write the code. Finally, aqa_specialiststrictly reviews the CSS for destructive or unsafe properties (e.g., hiding critical UI elements or external imports) before applying the code using the newapply_csstool.Technical Implementation
<style>tag into thepage-headextension point.cosmeticStorethat fetches the active CSS payload via a new backend API endpoint on load and listens forcosmetic_css_updateevents over the WebSocket to apply changes live./api/plugins/cosmetic_committee/get_cssto serve the current theme.apply_cssto save the CSS, broadcast the update to connected clients (mq.broadcast), and send a success toast notification (AgentNotification.success).PR created automatically by Jules for task 9239461664492628749 started by @thirdeyenation