Add improved theme toggle and enterprise-locked tabs

- Add ThemeToggle component with visual sun/moon icons and smooth animations
- Replace text-based theme button with visual switch element
- Replace "Refresh" text button with visual refresh icon
- Add "Users" tab with enterprise lock indicator
- Add "Roles" tab with enterprise lock indicator
- Create EnterpriseFeature component for locked features
- Display enterprise features list with CTAs for demo booking

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

Author: Miyamura80

frontend/src/App.tsx

@@ -4,13 +4,14 @@ import Editor from '@monaco-editor/react'
 import { useSessions } from './hooks'
 import type { Session, OAuthServerInfo, OAuthStatusResponse, OAuthAuthorizeRequest, OAuthStatus, ToolSchemasResponse, ToolSchemaEntry } from './types'
 import { SessionTable } from './components/SessionTable'
-import { Toggle } from './components/Toggle'
+import { Toggle, ThemeToggle } from './components/Toggle'
 import { Modal } from './components/Modal'
 import AgentDataflow from './components/AgentDataflow'
 import Stats from './components/Stats'
 import Kpis from './components/Kpis'
 import DateRangeSlider from './components/DateRangeSlider'
 import { ComparisonTable } from './components/ComparisonTable'
+import { EnterpriseFeature } from './components/EnterpriseFeature'
 
 // Embedding/Electron detection
 const isEmbedded = (() => {
@@ -338,10 +339,10 @@ export function App(): React.JSX.Element {
 
     const projectRoot = (globalThis as any).__PROJECT_ROOT__ || ''
 
-    const [view, setView] = useState<'sessions' | 'configs' | 'manager' | 'observability' | 'agents' | 'comparison'>(() => {
+    const [view, setView] = useState<'sessions' | 'configs' | 'manager' | 'observability' | 'agents' | 'comparison' | 'users' | 'roles'>(() => {
         try {
             const saved = safeLocalStorage.getItem('app_view')
-            if (saved === 'sessions' || saved === 'configs' || saved === 'manager' || saved === 'observability' || saved === 'agents' || saved === 'comparison') {
+            if (saved === 'sessions' || saved === 'configs' || saved === 'manager' || saved === 'observability' || saved === 'agents' || saved === 'comparison' || saved === 'users' || saved === 'roles') {
                 return saved
             }
         } catch { /* ignore */ }
@@ -350,7 +351,7 @@ export function App(): React.JSX.Element {
     const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
 
     // Handle view changes with unsaved changes warning
-    const handleViewChange = (newView: 'sessions' | 'configs' | 'manager' | 'observability' | 'agents' | 'comparison') => {
+    const handleViewChange = (newView: 'sessions' | 'configs' | 'manager' | 'observability' | 'agents' | 'comparison' | 'users' | 'roles') => {
         if (hasUnsavedChanges && view === 'configs') {
             const confirmed = window.confirm('You have unsaved changes in the JSON editor. Are you sure you want to switch views? Your changes will be lost.')
             if (!confirmed) return
@@ -737,24 +738,49 @@ export function App(): React.JSX.Element {
                         {view === 'manager' && 'Manage MCP servers, tools, and permissions with a guided interface.'}
                         {view === 'agents' && 'Monitor agent identities, sessions, and permission overrides.'}
                         {view === 'comparison' && 'Feature comparison between OpenEdison (Open Source) and EdisonWatch (Commercial).'}
+                        {view === 'users' && 'Multi-user management and access control (Enterprise feature).'}
+                        {view === 'roles' && 'Role-based access control and permission management (Enterprise feature).'}
                     </p>
                 </div>
                 <div className="flex gap-2 items-center">
                     <div className="hidden sm:flex border border-app-border rounded overflow-hidden">
                         <button className={`px-3 py-1 text-sm ${view === 'sessions' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('sessions')}>Sessions</button>
                         <button className={`px-3 py-1 text-sm ${view === 'agents' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('agents')}>Agents</button>
+                        <button className={`px-3 py-1 text-sm ${view === 'users' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('users')}>
+                            <span className="inline-flex items-center gap-1">
+                                Users
+                                <svg className="w-3 h-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+                                </svg>
+                            </span>
+                        </button>
+                        <button className={`px-3 py-1 text-sm ${view === 'roles' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('roles')}>
+                            <span className="inline-flex items-center gap-1">
+                                Roles
+                                <svg className="w-3 h-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+                                </svg>
+                            </span>
+                        </button>
                         <button className={`px-3 py-1 text-sm ${view === 'configs' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('configs')}>Raw Config</button>
                         <button className={`px-3 py-1 text-sm ${view === 'manager' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('manager')}>Server Manager</button>
                         <button className={`px-3 py-1 text-sm ${view === 'comparison' ? 'text-app-accent border-r border-app-border bg-app-accent/10' : ''}`} onClick={() => handleViewChange('comparison')}>Comparison</button>
                         <button className={`px-3 py-1 text-sm ${view === 'observability' ? 'text-app-accent bg-app-accent/10' : ''}`} onClick={() => handleViewChange('observability')}>Observability</button>
                     </div>
                     {/* Hide theme switch when embedded in Electron (exposed via window.__ELECTRON_EMBED__) */}
                     {!(window as any).__ELECTRON_EMBED__ && (new URLSearchParams(location.search).get('embed') !== 'electron') && (
-                        <button className="button" onClick={() => setTheme((t) => (t === 'light' ? 'dark' : 'light'))}>
-                            {theme === 'light' ? 'Dark' : 'Light'} mode
-                        </button>
+                        <ThemeToggle theme={theme} onChange={setTheme} />
                     )}
-                    <button className="button" onClick={() => location.reload()}>Refresh</button>
+                    <button
+                        className="button flex items-center justify-center"
+                        onClick={() => location.reload()}
+                        aria-label="Refresh page"
+                        title="Refresh page"
+                    >
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        </svg>
+                    </button>
                 </div>
             </div>
 
@@ -845,6 +871,16 @@ export function App(): React.JSX.Element {
                 <AgentsView sessions={uiSessions} />
             ) : view === 'comparison' ? (
                 <ComparisonTable />
+            ) : view === 'users' ? (
+                <EnterpriseFeature
+                    featureName="User Management"
+                    description="Manage multiple users, roles, and permissions across your organization with enterprise-grade access control."
+                />
+            ) : view === 'roles' ? (
+                <EnterpriseFeature
+                    featureName="Role-Based Access Control"
+                    description="Define custom roles and granular permissions to control what users can access and manage across your MCP infrastructure."
+                />
             ) : (
                 <div className="space-y-4">
                     <Kpis sessions={timeFiltered} prevSessions={prevTimeFiltered} />

frontend/src/components/EnterpriseFeature.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+
+interface EnterpriseFeatureProps {
+  featureName: string
+  description: string
+}
+
+export function EnterpriseFeature({ featureName, description }: EnterpriseFeatureProps) {
+  return (
+    <div className="card max-w-4xl mx-auto">
+      <div className="flex flex-col items-center justify-center py-16 px-8 text-center">
+        {/* Lock Icon */}
+        <div className="mb-6 p-4 rounded-full bg-app-accent/10 border-2 border-app-accent/30">
+          <svg className="w-16 h-16 text-app-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+        </div>
+
+        {/* Heading */}
+        <div className="mb-4">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/30 mb-3">
+            <svg className="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
+            </svg>
+            <span className="text-xs font-semibold text-amber-400 uppercase tracking-wide">Enterprise Feature</span>
+          </div>
+          <h2 className="text-3xl font-bold mb-2">{featureName}</h2>
+          <p className="text-lg text-app-muted max-w-2xl">{description}</p>
+        </div>
+
+        {/* Feature List */}
+        <div className="mt-8 p-6 bg-app-bg/30 rounded-lg border border-app-border max-w-2xl w-full">
+          <h3 className="font-semibold mb-4 text-left">Available in EdisonWatch Enterprise</h3>
+          <ul className="text-left space-y-3 text-app-muted">
+            <li className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-app-accent mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span><strong>Multi-Tenancy</strong>: Manage multiple isolated users and organizations</span>
+            </li>
+            <li className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-app-accent mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span><strong>SSO Integration</strong>: Enterprise identity provider support</span>
+            </li>
+            <li className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-app-accent mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span><strong>SIEM Integration</strong>: Enterprise security monitoring</span>
+            </li>
+            <li className="flex items-start gap-3">
+              <svg className="w-5 h-5 text-app-accent mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span><strong>Client Software</strong>: Auto-enforcement at the client level</span>
+            </li>
+          </ul>
+        </div>
+
+        {/* CTA */}
+        <div className="mt-8 flex flex-col sm:flex-row gap-4 items-center">
+          <a
+            href="https://cal.com/eito80/demo"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg"
+            style={{ backgroundColor: 'var(--accent)', color: 'var(--bg)' }}
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            Schedule a Demo
+          </a>
+          <a
+            href="https://edisonwatch.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-lg border-2 border-app-accent text-app-accent hover:bg-app-accent/10 transition-colors"
+          >
+            Learn More
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/Toggle.tsx

@@ -22,4 +22,46 @@ export function Toggle({ checked, onChange }: { checked: boolean; onChange: (nex
   )
 }
 
+export function ThemeToggle({ theme, onChange }: { theme: 'light' | 'dark' | 'blue'; onChange: (theme: 'light' | 'dark') => void }) {
+  const isDark = theme === 'dark' || theme === 'blue'
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isDark}
+      aria-label="Toggle theme"
+      className="relative inline-flex h-8 w-16 items-center rounded-full transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-accent"
+      style={{
+        backgroundColor: isDark ? 'var(--accent)' : '#FFB84D',
+      }}
+      onClick={() => onChange(isDark ? 'light' : 'dark')}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onChange(isDark ? 'light' : 'dark')
+        }
+      }}
+    >
+      {/* Slider */}
+      <span
+        className={`inline-flex h-6 w-6 transform items-center justify-center rounded-full shadow-md transition-transform duration-200 ${isDark ? 'translate-x-9' : 'translate-x-1'}`}
+        style={{ backgroundColor: 'var(--card)' }}
+      >
+        {isDark ? (
+          // Moon icon
+          <svg className="h-4 w-4" style={{ color: 'var(--accent)' }} fill="currentColor" viewBox="0 0 20 20">
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+          </svg>
+        ) : (
+          // Sun icon
+          <svg className="h-4 w-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
+          </svg>
+        )}
+      </span>
+    </button>
+  )
+}
+