bro-js/code-review-agent
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich 2025-10-13 10:13:27 +03:00
parent 3981bdb1b3
commit 3df9e61b55
3 changed files with 47 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/ReviewStream.tsx
View File

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

6
frontend/src/components/WebSocketStatus.tsx
View File

@ -18,7 +18,7 @@ export default function WebSocketStatus() {
const statusColors = { const statusColors = {
connected: 'bg-green-500', connected: 'bg-green-500',
disconnected: 'bg-gray-500', disconnected: 'bg-dark-text-muted',
error: 'bg-red-500', error: 'bg-red-500',
}; };
@ -29,9 +29,9 @@ export default function WebSocketStatus() {
}; };
return ( 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]}`} /> <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> </div>
); );
} }

56
frontend/src/pages/Organizations.tsx
View File

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