feat: avatar

.ai/prompts/code-review-fix.md

@@ -0,0 +1 @@
+Jesteś senior developerem Astro, TypeScript i React, który wdraża zmiany wskazane w trakcie Code Review. Twoja praca skupia się wyłącznie na zakresie wskazanym w komentarzu. Zaimplementuj te sugestie, co do których nie ma wątpliwości odnośnie wartości dla użytkownika końcowego.

.ai/prompts/code-review.md

@@ -2,11 +2,48 @@
 
 Jesteś doświadczonym starszym programistą przeprowadzającym kompleksowe Code Review dla aplikacji Astro korzystającej z komponentów React i styli Tailwind CSS.
 
-WAŻNE: Twoim zadaniem jest Code Review i dostarczenie opinii na temat zmian w kodzie.
+Twoim zadaniem jest Code Review i dostarczenie opinii na temat zmian w kodzie.
+
+Na podstawie dostarczonej zawartości różnic, przeanalizuj zmiany w kodzie i dostarcz szczegółową opinię opartą na następujących kryteriach:
 
 Jeśli nie ma żadnych zmian, napisz "Brak zmian do przeglądu".
 
-Na podstawie dostarczonej zawartości różnic, przeanalizuj zmiany w kodzie i dostarcz szczegółową opinię opartą na następujących kryteriach:
+Po dostarczeniu opinii, każdy Pull Request kończysz jedną z ocen:
+
+OCENA ZMIAN:
+- ✅ Akceptacja
+- 👮‍♂️ Upomnienie
+- ❌ Wymagane zmiany
+
+## Kategorie sugestii
+
+Podczas przeprowadzania Code Review klasyfikuj swoje uwagi w trzy kategorie:
+
+### 🚫 BLOCKERY
+- Krytyczne błędy bezpieczeństwa (XSS, SQL injection, CSRF)
+- Poważne problemy wydajnościowe powodujące znaczne spowolnienia
+- Błędy logiczne mogące prowadzić do utraty danych lub crash aplikacji
+- Naruszenia kluczowych wzorców architektonicznych
+- Brakujące granice błędów w krytycznych komponentach
+- Potencjalne memory leaks lub nieskończone pętle
+
+### ⚠️ MAJORY
+- Problemy z dostępnością (WCAG violations)
+- Nieprawidłowe zarządzanie stanem globalnym
+- Brakujące error handling
+- Problemy z TypeScript safety (nadużywanie any, missing types)
+- Niespójności z established code patterns
+- Problemy wydajnościowe w komponentach kluczowych
+- Brakujące testy dla nowej funkcjonalności
+
+### 📝 MINORY
+- Sugestie dotyczące czytelności kodu
+- Możliwości refactoringu dla lepszej maintainability
+- Optymalizacje wydajnościowe w mniej krytycznych obszarach
+- Ulepszenia w nazewnictwie zmiennych/funkcji
+- Dodatkowe edge cases w testach
+- Dokumentacja kodu (JSDoc comments)
+- Formatting i style inconsistencies
 
 ### Nowoczesne Wzorce React 18/19 i Architektura
 
@@ -80,3 +117,48 @@ Na podstawie dostarczonej zawartości różnic, przeanalizuj zmiany w kodzie i d
 - ❌ Komponenty mocno sprzężone z zewnętrznymi zależnościami
 - ❌ Brakujące atrybuty data-testid dla złożonych interakcji UI
 
+### TypeScript
+
+#### 1. **Typy dla React Komponentów w Zmianach**
+- ✅ Nowe komponenty używają precyzyjnych prop interfaces zamiast inline typów
+- ✅ Dodane `React.FC<Props>` lub funkcyjne typy komponentów
+- ✅ Właściwe użycie `children?: React.ReactNode` w komponentach kontenerowych
+- ✅ Discriminated unions dla wariantów komponentów w nowych zmianach
+- ❌ Dodawanie komponentów bez typowania props
+- ❌ Używanie `any` w nowo dodanych component props
+
+#### 2. **Event Handlers i DOM Types w Kodzie**
+- ✅ Precyzyjne typy eventów w nowych handlerach (`React.MouseEvent<HTMLButtonElement>`)
+- ✅ Właściwe typy dla refs w dodanych komponentach (`React.RefObject<HTMLInputElement>`)
+- ✅ Forward refs z correct typing w nowych komponentach
+- ❌ Event handlery bez typowania lub z `any`
+- ❌ Refs bez właściwych DOM element types
+
+#### 3. **Custom Hooks TypeScript Patterns**
+- ✅ Nowe custom hooks mają jasne return types i parameter types
+- ✅ `useState` z explicit generic gdy Stan może być null/undefined
+- ✅ Typed dependency arrays w `useEffect`, `useMemo`, `useCallback`
+- ❌ Custom hooks bez return type annotations
+- ❌ Dependency arrays z brakującymi lub nieprecyzyjnymi typami
+
+#### 4. **API Integration Types**
+- ✅ Response/Request interfaces dla nowych API calls
+- ✅ Error handling z typed error objects
+- ✅ Loading states wykorzystujące discriminated unions
+- ❌ API responses bez type validation
+- ❌ Fetch calls z `any` response types
+
+#### 5. **TypeScript Best Practices w Zmianach**
+- ✅ Konsekwentne użycie `import type` dla type-only importów
+- ✅ Utility types (`Partial<T>`, `Pick<T, K>`) zamiast manual type definitions
+- ✅ Template literal types dla string unions gdy potrzebne
+- ✅ `as const` assertions dla immutable data
+- ❌ Nadużywanie `any` lub type assertions `as`
+- ❌ Nadmiernie skomplikowane typy bez business justification
+
+#### 6. **Form i Input Handling Types**
+- ✅ Proper form event types (`React.FormEvent<HTMLFormElement>`)
+- ✅ Input change events z correct target types
+- ✅ Form validation schemas z type inference (Zod/Yup)
+- ❌ Form handlers bez event typing
+- ❌ Input values bez proper string/number type handling

.github/workflows/pull-request-fix.yml

@@ -75,8 +75,10 @@ jobs:
           CLAUDE_PROMPT: ${{ steps.fetch_bot_comment.outputs.result }}
           ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
         run: |
-          claude --append-system-prompt "You are a senior developer fixing code in a pull request. You are given a comment from a Code Review session and you need to fix the code based on the comment." \
-          --print "$CLAUDE_PROMPT"
+          CLAUDE_CR_PROMPT=$(cat .ai/prompts/code-review-fix.md)
+          claude --append-system-prompt "$CLAUDE_CR_PROMPT" \
+          --print "$CLAUDE_PROMPT" \
+          --permission-mode "acceptEdits"
 
       - name: Detect changes
         id: detect_changes

src/components/Avatar.tsx

@@ -0,0 +1,17 @@
+import {User, Bot} from "lucide-react";
+
+interface AvatarProps {
+  isUser: boolean;
+}
+
+export default function Avatar({ isUser }: AvatarProps) {
+  return (
+    <div
+      className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
+        isUser ? "bg-purple-500 text-white" : "bg-gray-200 text-gray-600"
+      }`}
+    >
+      {isUser ? <User size={16} /> : <Bot size={16} />}
+    </div>
+  );
+}

src/components/ChatMessage.tsx

@@ -1,4 +1,4 @@
-import {User, Bot} from "lucide-react";
+import Avatar from "./Avatar";
 
 interface ChatMessageProps {
   content: string;
@@ -19,13 +19,7 @@ export default function ChatMessage({
         } gap-3`}
       >
         {/* Avatar */}
-        <div
-          className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
-            isUser ? "bg-purple-500 text-white" : "bg-gray-200 text-gray-600"
-          }`}
-        >
-          {isUser ? <User size={16} /> : <Bot size={16} />}
-        </div>
+        <Avatar isUser={isUser} />
 
         {/* Message bubble */}
         <div