+ {/* Plugin Header */}
+
+
+ {plugin.name}
+
+
+ {plugin.description}
+
+
+
+ {/* Tabs */}
+
+
+ {hasSettings && (
+
+ )}
+ {hasEnvVars && (
+
+ )}
+
+
+ {/* Tab Content */}
+
+ {activeTab === 'orchestration' && (
+
+ )}
+
+ {activeTab === 'settings' && hasSettings && (
+
+
+
+
+ Plugin Settings
+
+
+
+
+ {settingsKeys.map((key) => {
+ const fieldSchema = plugin.config_schema.settings[key]
+ const value = config.settings[key]
+ const error = errors[`settings.${key}`]
+
+ return (
+ handleSettingsChange(key, newValue)}
+ error={error}
+ disabled={disabled}
+ />
+ )
+ })}
+
+
+ )}
+
+ {activeTab === 'secrets' && hasEnvVars && (
+
+ )}
+
+
+ {/* Test Result Display */}
+ {testResult && (
+
+
+ {testResult.success ? (
+
+ ) : (
+
+ )}
+
+
+ {testResult.message}
+
+ {testResult.details && (
+
+ {JSON.stringify(testResult.details, null, 2)}
+
+ )}
+
+
+
+ )}
+
+ {/* Action Buttons */}
+
+
+ {plugin.supports_testing && onTestConnection && (
+
+ )}
+
+
+
+
+
+
+
+ {plugins.map((plugin) => {
+ const isSelected = selectedPluginId === plugin.plugin_id
+
+ return (
+
onSelectPlugin(plugin.plugin_id)}
+ className={`
+ p-4 rounded-lg border cursor-pointer transition-all
+ ${
+ isSelected
+ ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+ : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800'
+ }
+ `}
+ >
+ {/* Plugin Header */}
+
+
+ {getStatusIcon(plugin.status, plugin.enabled)}
+
+
+ {plugin.name}
+
+
+
+
+
+ {/* Plugin Description */}
+
+ {plugin.description}
+
+
+ {/* Plugin Status and Toggle */}
+
+ {getStatusBadge(plugin.status, plugin.enabled)}
+
+
+
+
+ )
+ })}
+
-
+
+ {/* Toggle Button */}
+
+
+
+
+ {/* Content */}
+ {useFormUI ? (
+
+ ) : (
+
+ )}
)
}
diff --git a/backends/advanced/webui/src/pages/System.tsx b/backends/advanced/webui/src/pages/System.tsx
index a628d70d..dfe662f7 100644
--- a/backends/advanced/webui/src/pages/System.tsx
+++ b/backends/advanced/webui/src/pages/System.tsx
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'
-import { Settings, RefreshCw, CheckCircle, XCircle, AlertCircle, Activity, Users, Database, Server, Volume2, Mic, Brain } from 'lucide-react'
+import { Settings, RefreshCw, CheckCircle, XCircle, AlertCircle, Activity, Users, Database, Server, Volume2, Mic, Brain, Sliders } from 'lucide-react'
import { systemApi, speakerApi } from '../services/api'
import { useAuth } from '../contexts/AuthContext'
import MemorySettings from '../components/MemorySettings'
@@ -92,6 +92,14 @@ export default function System() {
const [providerLoading, setProviderLoading] = useState(false)
const [providerMessage, setProviderMessage] = useState('')
+ // Miscellaneous settings state
+ const [miscSettings, setMiscSettings] = useState({
+ always_persist_enabled: false,
+ use_provider_segments: false
+ })
+ const [miscLoading, setMiscLoading] = useState(false)
+ const [miscMessage, setMiscMessage] = useState('')
+
const { isAdmin } = useAuth()
const loadSystemData = async () => {
@@ -167,6 +175,38 @@ export default function System() {
}
}
+ const loadMiscSettings = async () => {
+ try {
+ setMiscLoading(true)
+ const response = await systemApi.getMiscSettings()
+ if (response.data.status === 'success') {
+ setMiscSettings(response.data.settings)
+ }
+ } catch (err: any) {
+ console.error('Failed to load misc settings:', err)
+ } finally {
+ setMiscLoading(false)
+ }
+ }
+
+ const saveMiscSettings = async () => {
+ try {
+ setMiscLoading(true)
+ setMiscMessage('')
+ const response = await systemApi.saveMiscSettings(miscSettings)
+ if (response.data.status === 'success') {
+ setMiscMessage('Settings saved successfully')
+ setTimeout(() => setMiscMessage(''), 3000)
+ } else {
+ setMiscMessage('Failed to save settings')
+ }
+ } catch (err: any) {
+ setMiscMessage('Error: ' + (err.response?.data?.detail || err.message))
+ } finally {
+ setMiscLoading(false)
+ }
+ }
+
const saveMemoryProvider = async () => {
if (selectedProvider === currentProvider) {
setProviderMessage('Provider is already set to ' + selectedProvider)
@@ -211,6 +251,7 @@ export default function System() {
loadSystemData()
loadDiarizationSettings()
loadMemoryProvider()
+ loadMiscSettings()
}, [isAdmin])
const getStatusIcon = (healthy: boolean) => {
@@ -804,6 +845,86 @@ export default function System() {