feat(agents): enhance POC interface styling with Cherry Studio design system

- Integrate complete Cherry Studio CSS variables and design patterns
- Implement proper light/dark theme support with system preference detection
- Enhance message bubbles to match Cherry Studio's chat interface styling
- Add Cherry Studio-compatible scrollbar styling with theme-aware colors
- Improve typography with Ubuntu font family and proper font stacks
- Add comprehensive hover states, transitions, and micro-interactions
- Implement accessibility improvements including focus states and reduced motion
- Add theme toggle functionality with persistent preferences
- Enhance header styling to match Cherry Studio's navbar design
- Add animation effects consistent with Cherry Studio's motion design
- Improve responsive design for mobile and tablet viewports
- Add high contrast mode support for better accessibility

The POC interface now provides a polished, professional appearance that
seamlessly integrates with Cherry Studio's design language and user experience.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

cagents/python-cli-web-poc/public/script.js

@@ -20,12 +20,17 @@ class PythonWebInterface {
     this.runBtn = document.getElementById('run-btn')
     this.killBtn = document.getElementById('kill-btn')
     this.sendBtn = document.getElementById('send-btn')
+    this.themeToggle = document.getElementById('theme-toggle')
+    
+    // Initialize theme
+    this.initializeTheme()
   }
 
   setupEventListeners() {
     this.runBtn.addEventListener('click', () => this.runCommand())
     this.killBtn.addEventListener('click', () => this.killSession())
     this.sendBtn.addEventListener('click', () => this.sendInput())
+    this.themeToggle.addEventListener('click', () => this.toggleTheme())
 
     this.commandInput.addEventListener('keypress', (e) => {
       if (e.key === 'Enter' && !this.isRunning) {
@@ -38,6 +43,16 @@ class PythonWebInterface {
         this.sendInput()
       }
     })
+    
+    // Listen for system theme changes
+    if (window.matchMedia) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      mediaQuery.addEventListener('change', () => {
+        if (!localStorage.getItem('theme-preference')) {
+          this.updateTheme(mediaQuery.matches ? 'dark' : 'light')
+        }
+      })
+    }
   }
 
   connect() {
@@ -213,6 +228,51 @@ class PythonWebInterface {
   scrollToBottom() {
     this.output.scrollTop = this.output.scrollHeight
   }
+  
+  // Theme Management - Cherry Studio Style
+  initializeTheme() {
+    const savedTheme = localStorage.getItem('theme-preference')
+    const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    
+    let theme
+    if (savedTheme) {
+      theme = savedTheme
+    } else {
+      theme = systemPrefersDark ? 'dark' : 'light'
+    }
+    
+    this.updateTheme(theme)
+  }
+  
+  toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('theme-mode') || 'dark'
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
+    
+    localStorage.setItem('theme-preference', newTheme)
+    this.updateTheme(newTheme)
+    
+    // Add feedback animation
+    this.themeToggle.style.transform = 'scale(0.9)'
+    setTimeout(() => {
+      this.themeToggle.style.transform = 'scale(1)'
+    }, 150)
+  }
+  
+  updateTheme(theme) {
+    document.documentElement.setAttribute('theme-mode', theme)
+    
+    // Update theme toggle icon
+    if (this.themeToggle) {
+      this.themeToggle.textContent = theme === 'dark' ? '☀️' : '🌙'
+      this.themeToggle.setAttribute('aria-label', `Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`)
+      this.themeToggle.title = `Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`
+    }
+    
+    // Detect OS for header styling
+    if (navigator.platform.includes('Mac')) {
+      document.body.setAttribute('os', 'darwin')
+    }
+  }
 }
 
 // Initialize the interface when the page loads