= ({ children, value, index }) => (
+
+ {value === index && children}
+
+);
+
+const SettingsDialog: React.FC = ({ open, onClose }) => {
+ const theme = useTheme();
+ const [tabValue, setTabValue] = useState(0);
+ const [llmConfig, setLlmConfig] = useState({
+ provider: 'modelscope',
+ model: 'Qwen/Qwen3-235B-A22B-Instruct-2507',
+ api_key: '',
+ base_url: 'https://api-inference.modelscope.cn/v1/',
+ temperature: 0.7,
+ max_tokens: 4096,
+ });
+ const [mcpServers, setMcpServers] = useState>({});
+ const [newServerName, setNewServerName] = useState('');
+ const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+
+ // Load config on mount
+ useEffect(() => {
+ if (open) {
+ loadConfig();
+ }
+ }, [open]);
+
+ const loadConfig = async () => {
+ try {
+ const [llmRes, mcpRes] = await Promise.all([
+ fetch('/api/config/llm'),
+ fetch('/api/config/mcp'),
+ ]);
+
+ if (llmRes.ok) {
+ const data = await llmRes.json();
+ setLlmConfig(data);
+ }
+
+ if (mcpRes.ok) {
+ const data = await mcpRes.json();
+ setMcpServers(data.mcpServers || {});
+ }
+ } catch (error) {
+ console.error('Failed to load config:', error);
+ }
+ };
+
+ const handleSave = async () => {
+ setSaveStatus('saving');
+ try {
+ const llmRes = await fetch('/api/config/llm', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(llmConfig),
+ });
+
+ const mcpRes = await fetch('/api/config/mcp', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ mcpServers: mcpServers }),
+ });
+
+ if (llmRes.ok && mcpRes.ok) {
+ setSaveStatus('saved');
+ setTimeout(() => setSaveStatus('idle'), 2000);
+ } else {
+ setSaveStatus('error');
+ }
+ } catch (error) {
+ setSaveStatus('error');
+ }
+ };
+
+ const handleAddMCPServer = () => {
+ if (!newServerName.trim()) return;
+
+ setMcpServers((prev) => ({
+ ...prev,
+ [newServerName]: { type: 'sse', url: '' },
+ }));
+ setNewServerName('');
+ };
+
+ const handleRemoveMCPServer = (name: string) => {
+ setMcpServers((prev) => {
+ const newServers = { ...prev };
+ delete newServers[name];
+ return newServers;
+ });
+ };
+
+ const handleMCPServerChange = (name: string, field: keyof MCPServer, value: any) => {
+ setMcpServers((prev) => ({
+ ...prev,
+ [name]: { ...prev[name], [field]: value },
+ }));
+ };
+
+ const providers = [
+ { value: 'modelscope', label: 'ModelScope', baseUrl: 'https://api-inference.modelscope.cn/v1/' },
+ { value: 'openai', label: 'OpenAI', baseUrl: 'https://api.openai.com/v1/' },
+ { value: 'anthropic', label: 'Anthropic', baseUrl: 'https://api.anthropic.com/v1/' },
+ { value: 'deepseek', label: 'DeepSeek', baseUrl: 'https://api.deepseek.com/v1/' },
+ { value: 'custom', label: 'Custom', baseUrl: '' },
+ ];
+
+ const models: Record = {
+ modelscope: ['Qwen/Qwen3-235B-A22B-Instruct-2507', 'Qwen/Qwen2.5-72B-Instruct', 'Qwen/Qwen2.5-32B-Instruct'],
+ openai: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo'],
+ anthropic: ['claude-3-5-sonnet-20241022', 'claude-3-opus-20240229'],
+ deepseek: ['deepseek-chat', 'deepseek-coder'],
+ custom: [],
+ };
+
+ return (
+
+ );
+};
+
+export default SettingsDialog;
diff --git a/webui/frontend/src/components/WorkflowProgress.tsx b/webui/frontend/src/components/WorkflowProgress.tsx
new file mode 100644
index 000000000..d863337b1
--- /dev/null
+++ b/webui/frontend/src/components/WorkflowProgress.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Box, Typography, Chip, useTheme, alpha, LinearProgress } from '@mui/material';
+import { CheckCircle as CheckIcon, RadioButtonUnchecked as PendingIcon } from '@mui/icons-material';
+import { motion } from 'framer-motion';
+import { WorkflowProgress as WorkflowProgressType } from '../context/SessionContext';
+
+interface WorkflowProgressProps {
+ progress: WorkflowProgressType;
+}
+
+const WorkflowProgress: React.FC = ({ progress }) => {
+ const theme = useTheme();
+ const { steps, step_status } = progress;
+
+ // Calculate progress based on completed steps
+ const completedCount = steps.filter(s => step_status[s] === 'completed').length;
+ const runningCount = steps.filter(s => step_status[s] === 'running').length;
+ const progressPercent = steps.length > 0 ? ((completedCount + runningCount * 0.5) / steps.length) * 100 : 0;
+
+ return (
+
+
+ Workflow:
+
+
+
+ {steps.map((step, index) => {
+ const status = step_status[step] || 'pending';
+ const isCompleted = status === 'completed';
+ const isCurrent = status === 'running';
+
+ return (
+
+ : isCurrent ? undefined : }
+ label={step.replace(/_/g, ' ')}
+ sx={{
+ height: 24,
+ fontSize: '0.7rem',
+ backgroundColor: isCompleted
+ ? alpha(theme.palette.success.main, 0.1)
+ : isCurrent
+ ? alpha(theme.palette.info.main, 0.15)
+ : alpha(theme.palette.action.disabled, 0.1),
+ color: isCompleted
+ ? theme.palette.success.main
+ : isCurrent
+ ? theme.palette.info.main
+ : theme.palette.text.secondary,
+ border: isCurrent ? `1px solid ${theme.palette.info.main}` : 'none',
+ '& .MuiChip-icon': {
+ color: 'inherit',
+ },
+ }}
+ />
+
+ );
+ })}
+
+
+
+
+
+
+ );
+};
+
+export default WorkflowProgress;
diff --git a/webui/frontend/src/context/SessionContext.tsx b/webui/frontend/src/context/SessionContext.tsx
new file mode 100644
index 000000000..ae3d5bc31
--- /dev/null
+++ b/webui/frontend/src/context/SessionContext.tsx
@@ -0,0 +1,414 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef, ReactNode } from 'react';
+
+export interface Message {
+ id: string;
+ role: 'user' | 'assistant' | 'system' | 'tool';
+ content: string;
+ type: 'text' | 'tool_call' | 'tool_result' | 'error' | 'log' | 'file_output' | 'step_start' | 'step_complete';
+ timestamp: string;
+ metadata?: Record;
+}
+
+export interface Project {
+ id: string;
+ name: string;
+ display_name: string;
+ description: string;
+ type: 'workflow' | 'agent' | 'script';
+ path: string;
+ has_readme: boolean;
+}
+
+export interface WorkflowProgress {
+ current_step: string;
+ steps: string[];
+ step_status: Record;
+}
+
+export interface FileProgress {
+ file: string;
+ status: 'writing' | 'completed';
+}
+
+export interface Session {
+ id: string;
+ project_id: string;
+ project_name: string;
+ status: 'idle' | 'running' | 'completed' | 'error' | 'stopped';
+ created_at: string;
+ workflow_progress?: WorkflowProgress;
+ file_progress?: FileProgress;
+ current_step?: string;
+}
+
+export interface LogEntry {
+ level: 'info' | 'warning' | 'error' | 'debug';
+ message: string;
+ timestamp: string;
+ session_id?: string;
+}
+
+interface SessionContextType {
+ projects: Project[];
+ sessions: Session[];
+ currentSession: Session | null;
+ messages: Message[];
+ logs: LogEntry[];
+ streamingContent: string;
+ isStreaming: boolean;
+ isLoading: boolean;
+ loadProjects: () => Promise;
+ createSession: (projectId: string) => Promise;
+ selectSession: (sessionId: string, initialQuery?: string, sessionObj?: Session) => void;
+ sendMessage: (content: string) => void;
+ stopAgent: () => void;
+ clearLogs: () => void;
+}
+
+const SessionContext = createContext(undefined);
+
+const API_BASE = '/api';
+const WS_BASE = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws`;
+
+const PROJECT_DESCRIPTION_OVERRIDES: Record = {
+ deep_research:
+ 'This project provides a framework for deep research, enabling agents to autonomously explore and execute complex tasks.',
+ code_genesis:
+ 'This project provides a code generation workflow that helps agents plan, scaffold, and refine software projects end-to-end.',
+ agent_skills:
+ 'This project provides a collection of reusable agent skills and tools to automate tasks and extend agent capabilities.',
+ doc_research:
+ 'This project provides a document research workflow for ingesting, searching, and summarizing documents with agent assistance.',
+ fin_research:
+ 'This project provides a financial research workflow that combines data analysis and information gathering to produce structured reports.',
+ singularity_cinema:
+ 'This project provides a creative workflow for generating stories, scripts, and media ideas with agent collaboration.',
+};
+
+export const SessionProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+ const [projects, setProjects] = useState([]);
+ const [sessions, setSessions] = useState([]);
+ const [currentSession, setCurrentSession] = useState(null);
+ const [messages, setMessages] = useState([]);
+ const [logs, setLogs] = useState([]);
+ const [streamingContent, setStreamingContent] = useState('');
+ const [isStreaming, setIsStreaming] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const [ws, setWs] = useState(null);
+ const pendingQueryRef = useRef(null);
+
+ // Load projects
+ const loadProjects = useCallback(async () => {
+ try {
+ const response = await fetch(`${API_BASE}/projects`);
+ if (response.ok) {
+ const data = await response.json();
+ const projectsWithOverrides: Project[] = (Array.isArray(data) ? data : []).map((project: Project) => {
+ const overrideDescription = project?.id ? PROJECT_DESCRIPTION_OVERRIDES[project.id] : undefined;
+ if (overrideDescription) {
+ return { ...project, description: overrideDescription };
+ }
+ return project;
+ });
+ setProjects(projectsWithOverrides);
+ }
+ } catch (error) {
+ console.error('Failed to load projects:', error);
+ }
+ }, []);
+
+ // Create session
+ const createSession = useCallback(async (projectId: string): Promise => {
+ try {
+ const response = await fetch(`${API_BASE}/sessions`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ project_id: projectId }),
+ });
+
+ if (response.ok) {
+ const session = await response.json();
+ setSessions(prev => [...prev, session]);
+ return session;
+ }
+ } catch (error) {
+ console.error('Failed to create session:', error);
+ }
+ return null;
+ }, []);
+
+ // Connect WebSocket for session
+ const connectWebSocket = useCallback((sessionId: string, initialQuery?: string) => {
+ if (ws) {
+ ws.close();
+ }
+
+ // Store pending query to send after connection
+ if (initialQuery) {
+ pendingQueryRef.current = initialQuery;
+ }
+
+ const socket = new WebSocket(`${WS_BASE}/session/${sessionId}`);
+
+ socket.onopen = () => {
+ console.log('WebSocket connected');
+ // Send pending query if exists
+ if (pendingQueryRef.current && socket.readyState === WebSocket.OPEN) {
+ const query = pendingQueryRef.current;
+ pendingQueryRef.current = null;
+
+ // Add user message locally
+ setMessages(prev => [...prev, {
+ id: Date.now().toString(),
+ role: 'user',
+ content: query,
+ type: 'text',
+ timestamp: new Date().toISOString(),
+ }]);
+
+ socket.send(JSON.stringify({
+ action: 'start',
+ query: query,
+ }));
+
+ setIsLoading(true);
+ }
+ };
+
+ socket.onmessage = (event) => {
+ const data = JSON.parse(event.data);
+ handleWebSocketMessage(data);
+ };
+
+ socket.onclose = () => {
+ console.log('WebSocket disconnected');
+ };
+
+ socket.onerror = (error) => {
+ console.error('WebSocket error:', error);
+ };
+
+ setWs(socket);
+ }, [ws]);
+
+ // Handle WebSocket messages
+ const handleWebSocketMessage = useCallback((data: Record) => {
+ const type = data.type as string;
+
+ switch (type) {
+ case 'message':
+ setMessages(prev => [...prev, {
+ id: Date.now().toString(),
+ role: data.role as Message['role'],
+ content: data.content as string,
+ type: (data.message_type as Message['type']) || 'text',
+ timestamp: new Date().toISOString(),
+ metadata: data.metadata as Record,
+ }]);
+ break;
+
+ case 'stream':
+ setStreamingContent(data.content as string);
+ setIsStreaming(!data.done);
+ if (data.done) {
+ setMessages(prev => [...prev, {
+ id: Date.now().toString(),
+ role: 'assistant',
+ content: data.content as string,
+ type: 'text',
+ timestamp: new Date().toISOString(),
+ }]);
+ setStreamingContent('');
+ }
+ break;
+
+ case 'log':
+ setLogs(prev => [...prev, {
+ level: data.level as LogEntry['level'],
+ message: data.message as string,
+ timestamp: data.timestamp as string,
+ session_id: currentSession?.id,
+ }]);
+ break;
+
+ case 'progress':
+ setCurrentSession(prev => {
+ if (!prev) return prev;
+
+ const progressType = data.type as string;
+ if (progressType === 'workflow') {
+ return {
+ ...prev,
+ workflow_progress: {
+ current_step: data.current_step as string,
+ steps: data.steps as string[],
+ step_status: data.step_status as WorkflowProgress['step_status'],
+ },
+ current_step: data.current_step as string,
+ };
+ } else if (progressType === 'file') {
+ return {
+ ...prev,
+ file_progress: {
+ file: data.file as string,
+ status: data.status as FileProgress['status'],
+ },
+ };
+ }
+ return prev;
+ });
+ break;
+
+ case 'status':
+ {
+ const nextStatus = (data.status as Session['status'] | undefined) ?? ((data as any)?.session?.status as Session['status'] | undefined);
+ if (nextStatus) {
+ setCurrentSession(prev => {
+ if (!prev) return prev;
+ if (nextStatus !== 'running') {
+ return { ...prev, status: nextStatus, workflow_progress: undefined, file_progress: undefined, current_step: undefined };
+ }
+ return { ...prev, status: nextStatus };
+ });
+ setSessions(prev => prev.map(s => (s.id === currentSession?.id ? { ...s, status: nextStatus } : s)));
+ setIsLoading(nextStatus === 'running');
+ if (nextStatus !== 'running') {
+ setIsStreaming(false);
+ setStreamingContent('');
+ }
+ }
+ }
+ break;
+
+ case 'complete':
+ setCurrentSession(prev => {
+ if (!prev) return prev;
+ return { ...prev, status: 'completed' };
+ });
+ setSessions(prev => prev.map(s => (s.id === currentSession?.id ? { ...s, status: 'completed' } : s)));
+ setIsLoading(false);
+ break;
+
+ case 'error':
+ setCurrentSession(prev => {
+ if (!prev) return prev;
+ return { ...prev, status: 'error' };
+ });
+ setSessions(prev => prev.map(s => (s.id === currentSession?.id ? { ...s, status: 'error' } : s)));
+ setMessages(prev => [...prev, {
+ id: Date.now().toString(),
+ role: 'system',
+ content: data.message as string,
+ type: 'error',
+ timestamp: new Date().toISOString(),
+ }]);
+ setIsLoading(false);
+ break;
+ }
+ }, [currentSession?.id]);
+
+ // Select session (can pass session object directly for newly created sessions)
+ const selectSession = useCallback((sessionId: string, initialQuery?: string, sessionObj?: Session) => {
+ // Use passed session object or find from sessions array
+ const session = sessionObj || sessions.find(s => s.id === sessionId);
+ if (session) {
+ console.log('[Session] Selecting session:', session.id);
+ setCurrentSession(session);
+ setMessages([]);
+ setLogs([]);
+ setStreamingContent('');
+ connectWebSocket(sessionId, initialQuery);
+ } else {
+ console.error('[Session] Session not found:', sessionId);
+ }
+ }, [sessions, connectWebSocket]);
+
+ // Send message
+ const sendMessage = useCallback((content: string) => {
+ if (!currentSession || !ws || ws.readyState !== WebSocket.OPEN) return;
+
+ // Add user message locally
+ setMessages(prev => [...prev, {
+ id: Date.now().toString(),
+ role: 'user',
+ content,
+ type: 'text',
+ timestamp: new Date().toISOString(),
+ }]);
+
+ // Send to server
+ ws.send(JSON.stringify({
+ action: 'start',
+ query: content,
+ }));
+
+ setIsLoading(true);
+ }, [currentSession, ws]);
+
+ // Stop agent
+ const stopAgent = useCallback(() => {
+ if (ws && ws.readyState === WebSocket.OPEN) {
+ ws.send(JSON.stringify({ action: 'stop' }));
+ }
+
+ // Optimistic UI update: reflect stop immediately without waiting for backend
+ setCurrentSession(prev => {
+ if (!prev) return prev;
+ return { ...prev, status: 'stopped', workflow_progress: undefined, file_progress: undefined, current_step: undefined };
+ });
+ setSessions(prev => prev.map(s => (s.id === currentSession?.id ? { ...s, status: 'stopped' } : s)));
+ setIsLoading(false);
+ setIsStreaming(false);
+ setStreamingContent('');
+ }, [ws, currentSession?.id]);
+
+ // Clear logs
+ const clearLogs = useCallback(() => {
+ setLogs([]);
+ }, []);
+
+ // Initial load
+ useEffect(() => {
+ loadProjects();
+ }, [loadProjects]);
+
+ // Cleanup WebSocket on unmount
+ useEffect(() => {
+ return () => {
+ if (ws) {
+ ws.close();
+ }
+ };
+ }, [ws]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useSession = () => {
+ const context = useContext(SessionContext);
+ if (!context) {
+ throw new Error('useSession must be used within a SessionProvider');
+ }
+ return context;
+};
diff --git a/webui/frontend/src/context/ThemeContext.tsx b/webui/frontend/src/context/ThemeContext.tsx
new file mode 100644
index 000000000..dac05dc7a
--- /dev/null
+++ b/webui/frontend/src/context/ThemeContext.tsx
@@ -0,0 +1,281 @@
+import React, { createContext, useContext, useState, useMemo, ReactNode } from 'react';
+import { createTheme, Theme, PaletteMode } from '@mui/material';
+
+// Luxury color palettes
+const darkPalette = {
+ primary: {
+ main: '#C9A962', // Gold accent
+ light: '#E5D4A1',
+ dark: '#A08840',
+ contrastText: '#0A0A0A',
+ },
+ secondary: {
+ main: '#6B7280',
+ light: '#9CA3AF',
+ dark: '#4B5563',
+ contrastText: '#FFFFFF',
+ },
+ background: {
+ default: '#0A0A0A',
+ paper: '#141414',
+ },
+ text: {
+ primary: '#F5F5F5',
+ secondary: '#A0A0A0',
+ },
+ divider: 'rgba(201, 169, 98, 0.12)',
+ error: {
+ main: '#EF4444',
+ light: '#F87171',
+ dark: '#DC2626',
+ },
+ success: {
+ main: '#10B981',
+ light: '#34D399',
+ dark: '#059669',
+ },
+ warning: {
+ main: '#F59E0B',
+ light: '#FBBF24',
+ dark: '#D97706',
+ },
+ info: {
+ main: '#3B82F6',
+ light: '#60A5FA',
+ dark: '#2563EB',
+ },
+};
+
+const lightPalette = {
+ primary: {
+ main: '#1A1A1A',
+ light: '#404040',
+ dark: '#0A0A0A',
+ contrastText: '#FFFFFF',
+ },
+ secondary: {
+ main: '#C9A962',
+ light: '#E5D4A1',
+ dark: '#A08840',
+ contrastText: '#0A0A0A',
+ },
+ background: {
+ default: '#FAFAFA',
+ paper: '#FFFFFF',
+ },
+ text: {
+ primary: '#1A1A1A',
+ secondary: '#6B7280',
+ },
+ divider: 'rgba(0, 0, 0, 0.08)',
+ error: {
+ main: '#DC2626',
+ light: '#EF4444',
+ dark: '#B91C1C',
+ },
+ success: {
+ main: '#059669',
+ light: '#10B981',
+ dark: '#047857',
+ },
+ warning: {
+ main: '#D97706',
+ light: '#F59E0B',
+ dark: '#B45309',
+ },
+ info: {
+ main: '#2563EB',
+ light: '#3B82F6',
+ dark: '#1D4ED8',
+ },
+};
+
+const createAppTheme = (mode: PaletteMode): Theme => {
+ const palette = mode === 'dark' ? darkPalette : lightPalette;
+
+ return createTheme({
+ palette: {
+ mode,
+ ...palette,
+ },
+ typography: {
+ fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+ h1: {
+ fontSize: '3rem',
+ fontWeight: 600,
+ letterSpacing: '-0.02em',
+ },
+ h2: {
+ fontSize: '2.25rem',
+ fontWeight: 600,
+ letterSpacing: '-0.02em',
+ },
+ h3: {
+ fontSize: '1.875rem',
+ fontWeight: 600,
+ letterSpacing: '-0.01em',
+ },
+ h4: {
+ fontSize: '1.5rem',
+ fontWeight: 600,
+ },
+ h5: {
+ fontSize: '1.25rem',
+ fontWeight: 500,
+ },
+ h6: {
+ fontSize: '1rem',
+ fontWeight: 500,
+ },
+ body1: {
+ fontSize: '1rem',
+ lineHeight: 1.6,
+ },
+ body2: {
+ fontSize: '0.875rem',
+ lineHeight: 1.5,
+ },
+ button: {
+ textTransform: 'none',
+ fontWeight: 500,
+ },
+ },
+ shape: {
+ borderRadius: 12,
+ },
+ components: {
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ borderRadius: 8,
+ padding: '10px 24px',
+ fontSize: '0.875rem',
+ fontWeight: 500,
+ boxShadow: 'none',
+ '&:hover': {
+ boxShadow: 'none',
+ },
+ },
+ contained: {
+ '&:hover': {
+ transform: 'translateY(-1px)',
+ transition: 'transform 0.2s ease',
+ },
+ },
+ outlined: {
+ borderWidth: 1.5,
+ '&:hover': {
+ borderWidth: 1.5,
+ },
+ },
+ },
+ },
+ MuiPaper: {
+ styleOverrides: {
+ root: {
+ backgroundImage: 'none',
+ },
+ elevation1: {
+ boxShadow: mode === 'dark'
+ ? '0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2)'
+ : '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)',
+ },
+ elevation2: {
+ boxShadow: mode === 'dark'
+ ? '0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2)'
+ : '0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04)',
+ },
+ },
+ },
+ MuiCard: {
+ styleOverrides: {
+ root: {
+ borderRadius: 16,
+ border: `1px solid ${palette.divider}`,
+ },
+ },
+ },
+ MuiTextField: {
+ styleOverrides: {
+ root: {
+ '& .MuiOutlinedInput-root': {
+ borderRadius: 10,
+ '&:hover .MuiOutlinedInput-notchedOutline': {
+ borderColor: palette.primary.main,
+ },
+ },
+ },
+ },
+ },
+ MuiChip: {
+ styleOverrides: {
+ root: {
+ borderRadius: 6,
+ fontWeight: 500,
+ },
+ },
+ },
+ MuiTooltip: {
+ styleOverrides: {
+ tooltip: {
+ backgroundColor: mode === 'dark' ? '#2D2D2D' : '#1A1A1A',
+ fontSize: '0.75rem',
+ padding: '8px 12px',
+ borderRadius: 6,
+ },
+ },
+ },
+ MuiDialog: {
+ styleOverrides: {
+ paper: {
+ borderRadius: 20,
+ },
+ },
+ },
+ MuiDrawer: {
+ styleOverrides: {
+ paper: {
+ borderRight: `1px solid ${palette.divider}`,
+ },
+ },
+ },
+ },
+ });
+};
+
+interface ThemeContextType {
+ mode: PaletteMode;
+ theme: Theme;
+ toggleTheme: () => void;
+}
+
+const ThemeContext = createContext(undefined);
+
+export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+ const [mode, setMode] = useState(() => {
+ const stored = localStorage.getItem('theme-mode');
+ return (stored as PaletteMode) || 'dark';
+ });
+
+ const theme = useMemo(() => createAppTheme(mode), [mode]);
+
+ const toggleTheme = () => {
+ const newMode = mode === 'dark' ? 'light' : 'dark';
+ setMode(newMode);
+ localStorage.setItem('theme-mode', newMode);
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useThemeContext = () => {
+ const context = useContext(ThemeContext);
+ if (!context) {
+ throw new Error('useThemeContext must be used within a ThemeProvider');
+ }
+ return context;
+};
diff --git a/webui/frontend/src/main.tsx b/webui/frontend/src/main.tsx
new file mode 100644
index 000000000..7fd1eb284
--- /dev/null
+++ b/webui/frontend/src/main.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { ThemeProvider as MuiThemeProvider, CssBaseline } from '@mui/material'
+import App from './App'
+import { ThemeProvider, useThemeContext } from './context/ThemeContext'
+import { SessionProvider } from './context/SessionContext'
+
+const ThemedApp: React.FC = () => {
+ const { theme } = useThemeContext();
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+ ,
+)
diff --git a/webui/frontend/tsconfig.json b/webui/frontend/tsconfig.json
new file mode 100644
index 000000000..3934b8f6d
--- /dev/null
+++ b/webui/frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/webui/frontend/tsconfig.node.json b/webui/frontend/tsconfig.node.json
new file mode 100644
index 000000000..97ede7ee6
--- /dev/null
+++ b/webui/frontend/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true,
+ "strict": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/webui/frontend/vite.config.ts b/webui/frontend/vite.config.ts
new file mode 100644
index 000000000..63159c4b1
--- /dev/null
+++ b/webui/frontend/vite.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ port: 5173,
+ proxy: {
+ '/api': {
+ target: 'http://localhost:7860',
+ changeOrigin: true
+ },
+ '/ws': {
+ target: 'ws://localhost:7860',
+ ws: true
+ }
+ }
+ },
+ build: {
+ outDir: 'dist',
+ sourcemap: true
+ }
+})
diff --git a/webui/requirements.txt b/webui/requirements.txt
new file mode 100644
index 000000000..c8aa95ee8
--- /dev/null
+++ b/webui/requirements.txt
@@ -0,0 +1,3 @@
+aiohttp
+ms-agent
+pandas
diff --git a/webui/start.sh b/webui/start.sh
new file mode 100755
index 000000000..bf8a38336
--- /dev/null
+++ b/webui/start.sh
@@ -0,0 +1,159 @@
+#!/bin/bash
+
+# MS-Agent Web UI Startup Script
+# This script starts both the backend server and frontend development server
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Get the directory where the script is located
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+echo -e "${BLUE}"
+echo "╔════════════════════════════════════════════════════════════╗"
+echo "║ MS-Agent Web UI ║"
+echo "║ Intelligent Agent Platform ║"
+echo "╚════════════════════════════════════════════════════════════╝"
+echo -e "${NC}"
+
+# Check for Python 3.10+
+PYTHON_CMD=""
+for py in python3.12 python3.11 python3.10; do
+ if command -v $py &> /dev/null; then
+ PYTHON_CMD=$py
+ break
+ fi
+done
+
+if [ -z "$PYTHON_CMD" ]; then
+ echo -e "${RED}Error: Python 3.10 or higher is required but not found.${NC}"
+ echo -e "${YELLOW}Please install Python 3.10+ and try again.${NC}"
+ exit 1
+fi
+
+echo -e "${GREEN}Using Python: $PYTHON_CMD ($(${PYTHON_CMD} --version))${NC}"
+
+# Check for Node.js
+if ! command -v node &> /dev/null; then
+ echo -e "${RED}Error: Node.js is required but not installed.${NC}"
+ exit 1
+fi
+
+# Create virtual environment if not exists
+VENV_DIR="$SCRIPT_DIR/.venv"
+if [ ! -d "$VENV_DIR" ]; then
+ echo -e "${YELLOW}Creating Python virtual environment with ${PYTHON_CMD}...${NC}"
+ $PYTHON_CMD -m venv "$VENV_DIR"
+fi
+
+# Activate virtual environment
+source "$VENV_DIR/bin/activate"
+
+# Install Python dependencies
+echo -e "${YELLOW}Installing Python dependencies...${NC}"
+pip install -q -r "$SCRIPT_DIR/requirements.txt"
+
+# Install ms-agent in development mode if not installed
+if ! python -c "import ms_agent" 2>/dev/null; then
+ echo -e "${YELLOW}Installing ms-agent...${NC}"
+ pip install -q -e "$SCRIPT_DIR/../ms-agent"
+fi
+
+
+# Install frontend dependencies if needed
+if [ ! -d "$SCRIPT_DIR/frontend/node_modules" ]; then
+ echo -e "${YELLOW}Installing frontend dependencies...${NC}"
+ cd "$SCRIPT_DIR/frontend"
+ npm install
+ cd "$SCRIPT_DIR"
+fi
+
+# Parse command line arguments
+MODE="dev"
+PORT=7860
+HOST="0.0.0.0"
+
+while [[ $# -gt 0 ]]; do
+ case $1 in
+ --production|-p)
+ MODE="production"
+ shift
+ ;;
+ --port)
+ PORT="$2"
+ shift 2
+ ;;
+ --host)
+ HOST="$2"
+ shift 2
+ ;;
+ *)
+ echo "Unknown option: $1"
+ exit 1
+ ;;
+ esac
+done
+
+# Build frontend for production
+if [ "$MODE" = "production" ]; then
+ echo -e "${YELLOW}Building frontend for production...${NC}"
+ cd "$SCRIPT_DIR/frontend"
+ npm run build
+ cd "$SCRIPT_DIR"
+fi
+
+# Function to cleanup background processes
+cleanup() {
+ echo -e "\n${YELLOW}Shutting down...${NC}"
+ if [ ! -z "$BACKEND_PID" ]; then
+ kill $BACKEND_PID 2>/dev/null
+ fi
+ if [ ! -z "$FRONTEND_PID" ]; then
+ kill $FRONTEND_PID 2>/dev/null
+ fi
+ exit 0
+}
+
+trap cleanup SIGINT SIGTERM
+
+# Start backend server
+echo -e "${GREEN}Starting backend server on port $PORT...${NC}"
+cd "$SCRIPT_DIR/backend"
+if [ "$MODE" = "production" ]; then
+ python main.py --host "$HOST" --port "$PORT" &
+else
+ python main.py --host "$HOST" --port "$PORT" --reload &
+fi
+BACKEND_PID=$!
+cd "$SCRIPT_DIR"
+
+# Wait for backend to start
+sleep 2
+
+if [ "$MODE" = "dev" ]; then
+ # Start frontend development server
+ echo -e "${GREEN}Starting frontend development server...${NC}"
+ cd "$SCRIPT_DIR/frontend"
+ npm run dev &
+ FRONTEND_PID=$!
+ cd "$SCRIPT_DIR"
+
+ echo -e "\n${GREEN}✓ Development servers are running!${NC}"
+ echo -e " Backend: ${BLUE}http://localhost:$PORT${NC}"
+ echo -e " Frontend: ${BLUE}http://localhost:5173${NC}"
+ echo -e " API Docs: ${BLUE}http://localhost:$PORT/docs${NC}"
+else
+ echo -e "\n${GREEN}✓ Production server is running!${NC}"
+ echo -e " Server: ${BLUE}http://$HOST:$PORT${NC}"
+fi
+
+echo -e "\n${YELLOW}Press Ctrl+C to stop the servers${NC}\n"
+
+# Wait for processes
+wait