UI: Fix all remaining light theme elements + add WebSocket streaming debug logging

frontend/src/components/ReviewStream.tsx

@@ -33,46 +33,58 @@ export const ReviewStream: React.FC<ReviewStreamProps> = ({ reviewId }) => {
   const [llmMessages, setLlmMessages] = useState<string[]>([]);
 
   useEffect(() => {
+    console.log('🔌 Connecting to WebSocket:', WS_URL);
+    console.log('👀 Watching for review ID:', reviewId);
+    
     const ws = new WebSocket(WS_URL);
 
     ws.onopen = () => {
-      console.log('WebSocket connected for streaming');
+      console.log('✅ WebSocket connected for streaming');
       setIsConnected(true);
     };
 
     ws.onmessage = (event) => {
       try {
+        console.log('📨 WebSocket message received:', event.data);
         const data: StreamEvent = JSON.parse(event.data);
+        console.log('📦 Parsed event:', data);
+        console.log(`🔍 Event review_id: ${data.review_id}, Expected: ${reviewId}`);
         
         // Filter events for this review
         if (data.review_id === reviewId) {
+          console.log('✅ Event matches review ID, adding to events');
           setEvents((prev) => [...prev, data]);
 
           // Update current step
           if (data.data.type === 'agent_step') {
+            console.log('🚶 Agent step:', data.data.step);
             setCurrentStep(data.data.step || '');
           }
 
           // Collect LLM messages
           if (data.data.type === 'llm_message') {
+            console.log('💬 LLM message:', data.data.message);
             setLlmMessages((prev) => [...prev, data.data.message || '']);
           }
+        } else {
+          console.log('⏭️ Event is for different review, skipping');
         }
       } catch (error) {
-        console.error('Error parsing WebSocket message:', error);
+        console.error('❌ Error parsing WebSocket message:', error);
       }
     };
 
     ws.onclose = () => {
-      console.log('WebSocket disconnected');
+      console.log('🔌 WebSocket disconnected');
       setIsConnected(false);
     };
 
     ws.onerror = (error) => {
-      console.error('WebSocket error:', error);
+      console.error('❌ WebSocket error:', error);
     };
 
     return () => {
+      console.log('🔌 Closing WebSocket');
       ws.close();
     };
   }, [reviewId]);

frontend/src/components/WebSocketStatus.tsx

@@ -18,7 +18,7 @@ export default function WebSocketStatus() {
 
   const statusColors = {
     connected: 'bg-green-500',
-    disconnected: 'bg-gray-500',
+    disconnected: 'bg-dark-text-muted',
     error: 'bg-red-500',
   };
 
@@ -29,9 +29,9 @@ export default function WebSocketStatus() {
   };
 
   return (
-    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-gray-800">
+    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-card border border-dark-border">
       <div className={`w-2 h-2 rounded-full ${statusColors[status]}`} />
-      <span className="text-sm text-gray-300">{statusLabels[status]}</span>
+      <span className="text-sm text-dark-text-secondary">{statusLabels[status]}</span>
     </div>
   );
 }

frontend/src/pages/Organizations.tsx

@@ -140,23 +140,23 @@ export default function Organizations() {
         {data?.items.map((org) => (
           <div
             key={org.id}
-            className="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
+            className="bg-dark-card rounded-lg shadow-sm border border-dark-border p-6"
           >
             <div className="flex items-start justify-between">
               <div className="flex-1">
                 <div className="flex items-center gap-3">
-                  <h3 className="text-xl font-semibold text-gray-900">{org.name}</h3>
-                  <span className={`px-2 py-1 rounded text-xs font-medium ${
-                    org.is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                  <h3 className="text-xl font-semibold text-dark-text-primary">{org.name}</h3>
+                  <span className={`px-2 py-1 rounded text-xs font-medium border ${
+                    org.is_active ? 'bg-green-900/30 text-green-400 border-green-700' : 'bg-dark-card text-dark-text-muted border-dark-border'
                   }`}>
                     {org.is_active ? 'Активна' : 'Неактивна'}
                   </span>
-                  <span className="px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
+                  <span className="px-2 py-1 rounded text-xs font-medium bg-blue-900/30 text-blue-400 border border-blue-700">
                     {org.platform.toUpperCase()}
                   </span>
                 </div>
                 
-                <div className="mt-2 space-y-1 text-sm text-gray-600">
+                <div className="mt-2 space-y-1 text-sm text-dark-text-secondary">
                   <div>🌐 {org.base_url}</div>
                   {org.last_scan_at && (
                     <div>
@@ -166,8 +166,8 @@ export default function Organizations() {
                   )}
                 </div>
                 
-                <div className="mt-3 text-xs text-gray-500">
-                  Webhook: <code className="bg-gray-100 px-2 py-1 rounded">{org.webhook_url}</code>
+                <div className="mt-3 text-xs text-dark-text-muted">
+                  Webhook: <code className="bg-dark-bg px-2 py-1 rounded border border-dark-border">{org.webhook_url}</code>
                 </div>
               </div>
 
@@ -181,13 +181,13 @@ export default function Organizations() {
                 </button>
                 <button
                   onClick={() => setEditingOrg(org)}
-                  className="px-3 py-1.5 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+                  className="px-3 py-1.5 text-sm bg-dark-hover text-dark-text-primary rounded hover:bg-dark-border transition-colors border border-dark-border"
                 >
                   ✏️ Изменить
                 </button>
                 <button
                   onClick={() => handleDelete(org)}
-                  className="px-3 py-1.5 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors"
+                  className="px-3 py-1.5 text-sm bg-red-900/30 text-red-400 rounded hover:bg-red-900/50 transition-colors border border-red-700"
                 >
                   🗑️ Удалить
                 </button>
@@ -198,8 +198,8 @@ export default function Organizations() {
       </div>
 
       {data?.items.length === 0 && (
-        <div className="text-center py-12 bg-gray-50 rounded-lg">
-          <p className="text-gray-500">Нет организаций</p>
+        <div className="text-center py-12 bg-dark-card rounded-lg border border-dark-border">
+          <p className="text-dark-text-muted">Нет организаций</p>
           <button
             onClick={() => setIsFormOpen(true)}
             className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
@@ -277,15 +277,15 @@ function OrganizationForm({
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
-        <h2 className="text-2xl font-bold mb-4">
+    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+      <div className="bg-dark-card rounded-lg shadow-xl p-6 max-w-md w-full mx-4 border border-dark-border">
+        <h2 className="text-2xl font-bold mb-4 text-dark-text-primary">
           {organization ? 'Редактировать организацию' : 'Новая организация'}
         </h2>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-dark-text-primary mb-1">
               Название организации *
             </label>
             <input
@@ -293,19 +293,19 @@ function OrganizationForm({
               required
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+              className="w-full px-3 py-2 border border-dark-border bg-dark-bg text-dark-text-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
               placeholder="inno-js"
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-dark-text-primary mb-1">
               Платформа *
             </label>
             <select
               value={formData.platform}
               onChange={(e) => setFormData({ ...formData, platform: e.target.value as OrganizationPlatform })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+              className="w-full px-3 py-2 border border-dark-border bg-dark-bg text-dark-text-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             >
               <option value="gitea">Gitea</option>
               <option value="github">GitHub</option>
@@ -314,7 +314,7 @@ function OrganizationForm({
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-dark-text-primary mb-1">
               Base URL *
             </label>
             <input
@@ -322,36 +322,36 @@ function OrganizationForm({
               required
               value={formData.base_url}
               onChange={(e) => setFormData({ ...formData, base_url: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+              className="w-full px-3 py-2 border border-dark-border bg-dark-bg text-dark-text-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
               placeholder="https://git.example.com"
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-dark-text-primary mb-1">
               API токен
             </label>
             <input
               type="password"
               value={formData.api_token}
               onChange={(e) => setFormData({ ...formData, api_token: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+              className="w-full px-3 py-2 border border-dark-border bg-dark-bg text-dark-text-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
               placeholder="Опционально (используется master токен если не указан)"
             />
-            <p className="text-xs text-gray-500 mt-1">
+            <p className="text-xs text-dark-text-muted mt-1">
               💡 Если не указан, будет использован master токен из конфигурации сервера
             </p>
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-dark-text-primary mb-1">
               Webhook Secret
             </label>
             <input
               type="text"
               value={formData.webhook_secret}
               onChange={(e) => setFormData({ ...formData, webhook_secret: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+              className="w-full px-3 py-2 border border-dark-border bg-dark-bg text-dark-text-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
               placeholder="Опционально (генерируется автоматически)"
             />
           </div>
@@ -360,14 +360,14 @@ function OrganizationForm({
             <button
               type="submit"
               disabled={isSubmitting}
-              className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50"
+              className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
             >
               {isSubmitting ? 'Сохранение...' : organization ? 'Сохранить' : 'Создать'}
             </button>
             <button
               type="button"
               onClick={onCancel}
-              className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+              className="flex-1 px-4 py-2 bg-dark-hover text-dark-text-primary border border-dark-border rounded-lg hover:bg-dark-border transition-colors"
             >
               Отмена
             </button>