feat: human-like typing, Arabic locale, auto-reconnect, WebSocket real-time UI

dashboard/nginx.conf

@@ -23,7 +23,7 @@ server {
         proxy_cache_bypass $http_upgrade;
     }
 
-    # WebSocket proxy
+    # WebSocket proxy (Socket.IO + namespace)
     location /socket.io/ {
         proxy_pass http://openwa:2785;
         proxy_http_version 1.1;
@@ -32,4 +32,14 @@ server {
         proxy_set_header Host $host;
         proxy_cache_bypass $http_upgrade;
     }
+
+    # WebSocket namespace proxy
+    location /events {
+        proxy_pass http://openwa:2785;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
 }

dashboard/src/components/Layout.css

@@ -195,6 +195,77 @@
   color: var(--text-primary);
 }
 
+.language-btn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.75rem;
+  padding: 0.6rem 0.9rem;
+  color: var(--text-secondary);
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+  text-align: left;
+}
+
+.sidebar.collapsed .language-btn {
+  justify-content: center;
+  padding: 0.6rem;
+}
+
+.language-btn:hover {
+  background: var(--bg-light);
+  color: var(--text-primary);
+}
+
+.language-dropdown {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background: var(--bg-white);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 0.25rem;
+  min-width: 120px;
+}
+
+[dir="rtl"] .language-dropdown {
+  left: 0;
+  right: 0;
+}
+
+.language-option {
+  padding: 0.5rem 0.75rem;
+  border-radius: calc(var(--radius) / 2);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.language-option:hover {
+  background: var(--bg-light);
+  color: var(--text-primary);
+}
+
+.language-option.active {
+  background: rgba(37, 211, 102, 0.1);
+  color: var(--primary);
+  font-weight: 600;
+}
+
 .logout-btn {
   display: flex;
   align-items: center;

dashboard/src/components/Layout.tsx

@@ -22,7 +22,7 @@ import {
 } from 'lucide-react';
 import { useTheme } from '../hooks/useTheme';
 import { type UserRole } from '../hooks/useRole';
-import { supportedLanguages, type SupportedLanguage } from '../i18n';
+import { type SupportedLanguage } from '../i18n';
 import './Layout.css';
 
 interface LayoutProps {
@@ -54,6 +54,7 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isMobileOpen, setIsMobileOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+  const [showLangDropdown, setShowLangDropdown] = useState(false);
 
   useEffect(() => {
     const handleResize = () => {
@@ -76,17 +77,34 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
     };
   }, [isMobileOpen]);
 
+  useEffect(() => {
+    if (!showLangDropdown) return;
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('.language-wrapper')) {
+        setShowLangDropdown(false);
+      }
+    };
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, [showLangDropdown]);
+
   const toggleCollapse = () => setIsCollapsed(!isCollapsed);
   const toggleMobile = () => setIsMobileOpen(!isMobileOpen);
 
   const currentLang = (i18n.resolvedLanguage || i18n.language || 'en').split('-')[0] as SupportedLanguage;
-  const cycleLanguage = () => {
-    const idx = supportedLanguages.indexOf(currentLang);
-    const next = supportedLanguages[(idx + 1) % supportedLanguages.length];
-    void i18n.changeLanguage(next);
+  const handleLanguageChange = (lang: string) => {
+    void i18n.changeLanguage(lang);
   };
-  const languageLabel = currentLang === 'he' ? 'עברית' : 'EN';
-  const isRtl = currentLang === 'he';
+  const languageLabels: Record<SupportedLanguage, string> = {
+    en: 'English',
+    ar: 'العربية',
+    he: 'עברית',
+    zh: '中文',
+    es: 'Español',
+  };
+  const languageLabel = languageLabels[currentLang] ?? 'EN';
+  const isRtl = currentLang === 'he' || currentLang === 'ar';
 
   return (
     <div className="layout">
@@ -151,15 +169,32 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
         </nav>
 
         <div className="sidebar-footer">
-          <button
-            className="theme-toggle-btn"
-            onClick={cycleLanguage}
-            title={t('common.language')}
-            aria-label={t('common.language')}
-          >
-            <Languages size={18} />
-            {!isCollapsed && <span>{languageLabel}</span>}
-          </button>
+          <div className="language-wrapper" style={{ position: 'relative' }}>
+            <button
+              className="language-btn"
+              onClick={() => setShowLangDropdown(!showLangDropdown)}
+              title={t('common.language')}
+            >
+              <Languages size={18} />
+              {!isCollapsed && <span>{languageLabel}</span>}
+            </button>
+            {showLangDropdown && !isCollapsed && (
+              <div className="language-dropdown">
+                {(['en', 'ar', 'es', 'zh', 'he'] as SupportedLanguage[]).map(lang => (
+                  <div
+                    key={lang}
+                    className={`language-option ${currentLang === lang ? 'active' : ''}`}
+                    onClick={() => {
+                      handleLanguageChange(lang);
+                      setShowLangDropdown(false);
+                    }}
+                  >
+                    {languageLabels[lang]}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
           <button
             className="theme-toggle-btn"
             onClick={toggleTheme}

dashboard/src/hooks/useWebSocket.ts

@@ -25,9 +25,8 @@ interface WebSocketEvents {
   onMessage?: (event: MessageEvent) => void;
 }
 
-// Use current origin for WebSocket (goes through nginx proxy in Docker)
-// Falls back to env var or localhost for development
-const SOCKET_URL = import.meta.env.VITE_WS_URL || window.location.origin;
+// In dev mode, connect directly to the API server since Vite proxy doesn't handle WebSocket well
+const SOCKET_URL = import.meta.env.VITE_API_URL || (import.meta.env.DEV ? 'http://localhost:2785' : window.location.origin);
 
 export function useWebSocket(events: WebSocketEvents = {}) {
   const socketRef = useRef<Socket | null>(null);
@@ -93,7 +92,16 @@ export function useWebSocket(events: WebSocketEvents = {}) {
     const socket = socketRef.current;
 
     if (events.onSessionStatus) {
-      socket.on('session:status', events.onSessionStatus);
+      const handler = (payload: Record<string, unknown>) => {
+        // Adapt both flat and nested event payloads
+        const adapted: SessionStatusEvent = {
+          sessionId: (payload.sessionId || payload.data && (payload.data as Record<string, unknown>).sessionId) as string,
+          status: (payload.status || payload.data && (payload.data as Record<string, unknown>).status) as string,
+          timestamp: payload.timestamp as string,
+        };
+        events.onSessionStatus!(adapted);
+      };
+      socket.on('session:status', handler);
     }
 
     if (events.onQRCode) {

dashboard/src/i18n/index.ts

@@ -3,19 +3,25 @@ import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import en from './locales/en.json';
 import he from './locales/he.json';
+import ar from './locales/ar.json';
+import zh from './locales/zh.json';
+import es from './locales/es.json';
 
-export const supportedLanguages = ['en', 'he'] as const;
+export const supportedLanguages = ['en', 'ar', 'he', 'zh', 'es'] as const;
 export type SupportedLanguage = (typeof supportedLanguages)[number];
 
-export const rtlLanguages: SupportedLanguage[] = ['he'];
+export const rtlLanguages: SupportedLanguage[] = ['ar', 'he'];
 
 void i18n
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
     resources: {
       en: { translation: en },
+      ar: { translation: ar },
       he: { translation: he },
+      zh: { translation: zh },
+      es: { translation: es },
     },
     fallbackLng: 'en',
     supportedLngs: supportedLanguages as unknown as string[],