Skip to content

feat(plugin): Add Cosmetic Committee plugin for aesthetic UI customization#5

Merged
thirdeyenation merged 1 commit intomainfrom
cosmetic-committee-plugin-9239461664492628749
Mar 30, 2026
Merged

feat(plugin): Add Cosmetic Committee plugin for aesthetic UI customization#5
thirdeyenation merged 1 commit intomainfrom
cosmetic-committee-plugin-9239461664492628749

Conversation

@thirdeyenation
Copy link
Copy Markdown
Owner

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 the lead_designer, who delegates to a css_specialist to write the code. Finally, a qa_specialist strictly reviews the CSS for destructive or unsafe properties (e.g., hiding critical UI elements or external imports) before applying the code using the new apply_css tool.

Technical Implementation

  • Frontend Extension: Injects a reactive <style> tag into the page-head extension point.
  • State Management: Introduces an Alpine.js cosmeticStore that fetches the active CSS payload via a new backend API endpoint on load and listens for cosmetic_css_update events over the WebSocket to apply changes live.
  • Backend API: Adds /api/plugins/cosmetic_committee/get_css to serve the current theme.
  • Tooling: Adds apply_css to 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

…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>
@google-labs-jules
Copy link
Copy Markdown

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@thirdeyenation thirdeyenation merged commit 66595f3 into main Mar 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant