Windsurf

User: Jak dodać dark mode?
AI: Oto kod do dark mode... [pokazuje snippet]
User: Gdzie to umieścić?
AI: W pliku ThemeProvider...
User: A jak zaktualizować komponenty?
AI: Musisz... [kolejna instrukcja]

User: Dodaj dark mode do aplikacji

Cascade:
1. Analizuję strukturę projektu...
   → Znalazłem Next.js App Router z Tailwind
2. Sprawdzam obecny system stylów...
   → Tailwind z next-themes będzie najlepszy
3. Tworzę konfigurację dark theme...
   → Aktualizuję tailwind.config.ts
4. Dodaję ThemeProvider...
   → Tworzę providers/ThemeProvider.tsx
5. Aktualizuję layout...
   → Modyfikuję app/layout.tsx
6. Dodaję toggle w Header...
   → Tworzę components/ThemeToggle.tsx
7. Testuję zmiany...
   → Sprawdzam w przeglądarce

✓ Dark mode dodany. Zmodyfikowane pliki:
  - tailwind.config.ts
  - providers/ThemeProvider.tsx
  - app/layout.tsx
  - components/ThemeToggle.tsx
  - package.json (dodano next-themes)

User: Gdzie obsługiwane są płatności w tym projekcie?

Cascade:
Przeanalizowałem strukturę projektu. Płatności są obsługiwane w:

1. API Endpoint: app/api/payments/route.ts
   - Tworzenie sesji Stripe
   - Obsługa webhooków

2. Frontend: components/checkout/CheckoutForm.tsx
   - UI formularza płatności
   - Integracja z Stripe Elements

3. Utils: lib/stripe.ts
   - Konfiguracja klienta Stripe
   - Funkcje pomocnicze

4. Types: types/payment.ts
   - Interfejsy TypeScript

Czy chcesz, żebym wyjaśnił przepływ płatności?

User: Stwórz nowy endpoint API do obsługi newslettera z walidacją i zapisem do bazy

Cascade:
Tworzę kompletny endpoint newslettera...

[Krok 1] Tworzę schemat walidacji z Zod
→ lib/validations/newsletter.ts

[Krok 2] Tworzę model Prisma
→ Aktualizuję prisma/schema.prisma
→ Uruchamiam: npx prisma generate

[Krok 3] Tworzę endpoint API
→ app/api/newsletter/subscribe/route.ts

[Krok 4] Dodaję obsługę błędów
→ lib/errors/newsletter-errors.ts

[Krok 5] Tworzę testy
→ __tests__/api/newsletter.test.ts

[Krok 6] Uruchamiam testy
→ npm test newsletter

Gotowe! Newsletter endpoint działa:
POST /api/newsletter/subscribe
Body: { email: "user@example.com", name?: "Jan" }

User: Znajdź wszystkie miejsca gdzie używamy useEffect bez cleanup

Cascade:
Przeszukuję projekt pod kątem useEffect bez cleanup...

Znalazłem 7 problematycznych przypadków:

1. components/Chat.tsx:45
   useEffect(() => {
     socket.on('message', handleMessage)
   }, []) // Brak cleanup dla socket listener

2. hooks/useWindowSize.ts:12
   useEffect(() => {
     window.addEventListener('resize', handler)
   }, []) // Brak cleanup dla event listener

3. components/Timer.tsx:23
   useEffect(() => {
     const id = setInterval(tick, 1000)
   }, []) // Brak clearInterval

[... pozostałe przypadki ...]

Czy naprawić te problemy automatycznie?

User: Skonfiguruj projekt do deploymentu na Vercel

Cascade:
Konfiguruję projekt dla Vercel...

[Terminal] Sprawdzam czy Vercel CLI jest zainstalowane
→ vercel --version
→ Nie znaleziono, instaluję...
→ npm install -g vercel

[Terminal] Loguję do Vercel
→ vercel login
→ Otwórz przeglądarkę, aby się zalogować

[Plik] Tworzę vercel.json z konfiguracją
→ Ustawiam Node.js 20, regiony, redirects

[Plik] Aktualizuję .env.example
→ Dodaję zmienne wymagane w produkcji

[Terminal] Linkuję projekt
→ vercel link

[Terminal] Ustawiam zmienne środowiskowe
→ vercel env add DATABASE_URL production

Projekt gotowy do deploymentu!
Uruchom 'vercel --prod' aby wdrożyć.

User: Dodaj paginację do listy produktów

Cascade [Write Mode]:
→ Modyfikuję ProductList.tsx
→ Dodaję hook usePagination
→ Aktualizuję API endpoint
→ Tworzę komponent Pagination

User: [Chat Mode] Wyjaśnij jak działa ten algorytm sortowania

Cascade [Chat Mode]:
Ten algorytm to QuickSort z następującymi optymalizacjami...
[wyjaśnienie bez modyfikacji kodu]

User: [Review] Sprawdź ten PR pod kątem security

Cascade [Review Mode]:
Analiza bezpieczeństwa PR #123:

⚠️ Wysokie ryzyko:
1. SQL Injection w line 45
   Sugerowana poprawka: [kod]

⚠️ Średnie ryzyko:
2. Brak rate limiting na endpoint
   Sugerowana poprawka: [kod]

✓ Zaakceptuj sugestie aby je zastosować

# .windsurf/flows/new-component.yaml
name: New React Component
description: Tworzy nowy komponent React z testami i storybook
author: team
version: 1.0.0

inputs:
  - name: componentName
    type: string
    description: Nazwa komponentu (PascalCase)
    required: true
  - name: withTests
    type: boolean
    default: true
  - name: withStorybook
    type: boolean
    default: true
  - name: componentType
    type: select
    options:
      - client
      - server
    default: client

steps:
  - name: Create component file
    action: create_file
    path: src/components/{{componentName}}/{{componentName}}.tsx
    template: |
      {{#if (eq componentType "client")}}
      'use client'

      {{/if}}
      import { cn } from '@/lib/utils'

      interface {{componentName}}Props {
        className?: string
        children?: React.ReactNode
      }

      export function {{componentName}}({ className, children }: {{componentName}}Props) {
        return (
          <div className={cn('', className)}>
            {children}
          </div>
        )
      }

  - name: Create index file
    action: create_file
    path: src/components/{{componentName}}/index.ts
    template: |
      export { {{componentName}} } from './{{componentName}}'

  - name: Create test file
    condition: "{{withTests}}"
    action: create_file
    path: src/components/{{componentName}}/{{componentName}}.test.tsx
    template: |
      import { render, screen } from '@testing-library/react'
      import { {{componentName}} } from './{{componentName}}'

      describe('{{componentName}}', () => {
        it('renders children correctly', () => {
          render(<{{componentName}}>Test content</{{componentName}}>)
          expect(screen.getByText('Test content')).toBeInTheDocument()
        })

        it('applies custom className', () => {
          const { container } = render(
            <{{componentName}} className="custom-class">Content</{{componentName}}>
          )
          expect(container.firstChild).toHaveClass('custom-class')
        })
      })

  - name: Create Storybook file
    condition: "{{withStorybook}}"
    action: create_file
    path: src/components/{{componentName}}/{{componentName}}.stories.tsx
    template: |
      import type { Meta, StoryObj } from '@storybook/react'
      import { {{componentName}} } from './{{componentName}}'

      const meta: Meta<typeof {{componentName}}> = {
        title: 'Components/{{componentName}}',
        component: {{componentName}},
        tags: ['autodocs'],
      }

      export default meta
      type Story = StoryObj<typeof {{componentName}}>

      export const Default: Story = {
        args: {
          children: '{{componentName}} content',
        },
      }

  - name: Update barrel export
    action: update_file
    path: src/components/index.ts
    insert_after: "// Components"
    content: |
      export { {{componentName}} } from './{{componentName}}'

# W Command Palette (Cmd+Shift+P)
> Windsurf: Run Flow

# Lub bezpośrednio
> Run Flow: New React Component

# Dialog:
Component Name: ProductCard
With Tests: ✓
With Storybook: ✓
Component Type: client

# Cascade wykonuje Flow:
→ Created src/components/ProductCard/ProductCard.tsx
→ Created src/components/ProductCard/index.ts
→ Created src/components/ProductCard/ProductCard.test.tsx
→ Created src/components/ProductCard/ProductCard.stories.tsx
→ Updated src/components/index.ts

# .windsurf/flows/crud-api.yaml
name: CRUD API Endpoints
description: Generuje kompletne API CRUD dla encji

inputs:
  - name: entityName
    type: string
    required: true
  - name: fields
    type: array
    items:
      - name: fieldName
        type: string
      - name: fieldType
        type: select
        options: [string, number, boolean, date]
    required: true
  - name: withAuth
    type: boolean
    default: true

steps:
  # Prisma schema
  - name: Update Prisma Schema
    action: update_file
    path: prisma/schema.prisma
    insert_before: "// END MODELS"
    template: |
      model {{entityName}} {
        id        String   @id @default(cuid())
        {{#each fields}}
        {{this.fieldName}} {{#if (eq this.fieldType "string")}}String{{/if}}{{#if (eq this.fieldType "number")}}Int{{/if}}{{#if (eq this.fieldType "boolean")}}Boolean{{/if}}{{#if (eq this.fieldType "date")}}DateTime{{/if}}
        {{/each}}
        createdAt DateTime @default(now())
        updatedAt DateTime @updatedAt
      }

  # API routes - iteracja
  - name: Create List Endpoint
    action: create_file
    path: app/api/{{lowercase entityName}}s/route.ts
    template: |
      import { prisma } from '@/lib/prisma'
      import { NextResponse } from 'next/server'
      {{#if withAuth}}
      import { auth } from '@/lib/auth'
      {{/if}}

      export async function GET() {
        {{#if withAuth}}
        const session = await auth()
        if (!session) {
          return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
        }
        {{/if}}

        const items = await prisma.{{lowercase entityName}}.findMany()
        return NextResponse.json(items)
      }

      export async function POST(request: Request) {
        {{#if withAuth}}
        const session = await auth()
        if (!session) {
          return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
        }
        {{/if}}

        const data = await request.json()
        const item = await prisma.{{lowercase entityName}}.create({ data })
        return NextResponse.json(item, { status: 201 })
      }

  # Powtórz dla każdego endpointu...

# .windsurf/flows/ai-refactor.yaml
name: AI-Powered Refactoring
description: Używa Cascade do inteligentnego refaktoringu

inputs:
  - name: targetFile
    type: file
    required: true
  - name: refactorType
    type: select
    options:
      - Extract Functions
      - Add TypeScript Types
      - Improve Performance
      - Add Error Handling
    required: true

steps:
  - name: Analyze with AI
    action: cascade_analyze
    file: "{{targetFile}}"
    prompt: |
      Przeanalizuj ten plik pod kątem: {{refactorType}}.
      Zidentyfikuj wszystkie miejsca wymagające poprawy.

  - name: Apply Refactoring
    action: cascade_refactor
    file: "{{targetFile}}"
    instruction: |
      Na podstawie analizy, wykonaj {{refactorType}}.
      Zachowaj istniejącą funkcjonalność.
      Dodaj komentarze gdzie zmiany są znaczące.

  - name: Verify Changes
    action: run_command
    command: npm test -- --findRelatedTests {{targetFile}}

  - name: Format Code
    action: run_command
    command: npx prettier --write {{targetFile}}

# Flows można udostępniać w team:
# 1. Lokalnie w .windsurf/flows/
# 2. Repozytorium flows firmy
# 3. Windsurf Marketplace

# Instalacja z marketplace:
> Windsurf: Install Flow
> Search: "nextjs api crud"
> Install: "NextJS CRUD Generator by @company"

// Tradycyjne autouzupełnianie:
// Sugeruje tylko na podstawie lokalnego kontekstu

const user = {
  na| // Sugeruje: "name", "navigate", "NaN"
}

// Windsurf Supercomplete:
// Rozumie strukturę projektu

// Jeśli w projekcie istnieje:
// types/user.ts: interface User { name: string; email: string; role: 'admin' | 'user' }

const user: User = {
  na| // Sugeruje: "name" (string) - z pełnym typem
}

// Po wybraniu:
const user: User = {
  name: '|' // Sugeruje wartości na podstawie istniejących danych w projekcie
}

// Zaczynam pisać:
import { use|

// Supercomplete rozumie projekt i sugeruje:
// → useAuth (z hooks/useAuth.ts)
// → useCart (z hooks/useCart.ts)
// → useToast (z @/components/ui/use-toast)
// → useState (z react)
// → useEffect (z react)

// Kolejność jest inteligentna - najpierw lokalne, potem dependencies

// W pliku components/ProductCard.tsx
// Projekt używa TailwindCSS i shadcn/ui

function ProductCard({ product }: { product: Product }) {
  return (
    <Card className="|
    // Supercomplete sugeruje:
    // → "p-4 hover:shadow-lg" (wzorzec z innych kart w projekcie)
    // → "flex flex-col gap-4" (częsty pattern)

// Znając strukturę API w projekcie:

async function getProduct(id: string) {
  const response = await fetch|
  // Supercomplete:
  // → fetch(`/api/products/${id}`) - na podstawie istniejących endpointów

// .windsurf/settings.json
{
  "supercomplete": {
    "enabled": true,
    "debounceMs": 100,
    "maxSuggestions": 5,
    "contextDepth": "project", // "file" | "directory" | "project"
    "prioritizeLocal": true,
    "learnFromEdits": true,
    "excludePatterns": [
      "node_modules/**",
      "dist/**",
      ".git/**"
    ]
  }
}

Cmd+K → Otwiera AI Command

Przykłady:
"refactor this to use hooks"
"add error handling"
"convert to TypeScript"
"explain this code"
"add tests for this function"
"make this component responsive"

// Zaznacz kod i naciśnij Cmd+K

function processData(data) {  // ← Zaznaczone
  const result = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].active) {
      result.push(data[i].value * 2);
    }
  }
  return result;
}

// Cmd+K → "convert to functional style"

// Wynik:
const processData = (data: DataItem[]): number[] =>
  data
    .filter(item => item.active)
    .map(item => item.value * 2);

Cmd+Shift+K → AI Command dla wielu plików

"add loading states to all components in components/dashboard"
"update all API calls to use new error handling pattern"
"migrate class components to functional"

User: Zainstaluj i skonfiguruj TailwindCSS

Cascade:
[1/4] Instaluję dependencies...
> npm install -D tailwindcss postcss autoprefixer

[2/4] Inicjalizuję Tailwind...
> npx tailwindcss init -p

[3/4] Konfiguruję tailwind.config.js...
→ Aktualizuję plik z odpowiednimi ścieżkami

[4/4] Dodaję dyrektywy do CSS...
→ Aktualizuję globals.css

✓ TailwindCSS skonfigurowany!

User: Testy w auth.test.ts nie przechodzą, pomoż mi je naprawić

Cascade:
[1/3] Uruchamiam testy aby zobaczyć błędy...
> npm test auth.test.ts

Błąd w linii 45: "TypeError: Cannot read property 'user' of undefined"

[2/3] Analizuję problem...
→ Mock dla useSession zwraca undefined zamiast obiektu sesji

[3/3] Naprawiam test...
→ Aktualizuję mock w auth.test.ts

Ponownie uruchamiam testy...
> npm test auth.test.ts

✓ Wszystkie 12 testów przeszły!

User: Uruchom testy w trybie watch i naprawiaj błędy automatycznie

Cascade:
> npm test -- --watch

[Watch] Test failed: ProductCard.test.tsx
→ Analizuję błąd...
→ Brak propsa 'onAddToCart'
→ Aktualizuję test...
→ Test przeszedł!

[Watch] Test failed: useCart.test.ts
→ Analizuję błąd...
→ State nie jest resetowany między testami
→ Dodaję beforeEach z resetem...
→ Test przeszedł!

[Watch] Wszystkie testy przechodzą ✓
Monitoruję dalsze zmiany...

# Homebrew
brew install --cask windsurf

# Lub pobierz z windsurf.ai
curl -fsSL https://windsurf.ai/install.sh | sh

# Winget
winget install Codeium.Windsurf

# Lub pobierz instalator z windsurf.ai

# Ubuntu/Debian
wget -qO- https://windsurf.ai/gpg.key | sudo gpg --dearmor -o /usr/share/keyrings/windsurf.gpg
echo "deb [signed-by=/usr/share/keyrings/windsurf.gpg] https://windsurf.ai/apt stable main" | sudo tee /etc/apt/sources.list.d/windsurf.list
sudo apt update && sudo apt install windsurf

# Arch Linux (AUR)
yay -S windsurf-bin

# Flatpak
flatpak install flathub ai.windsurf.Windsurf

# 1. Uruchom Windsurf
windsurf

# 2. Zaloguj się do Codeium (darmowe konto)
# → Kliknij "Sign In" w prawym dolnym rogu
# → Autoryzuj przez GitHub/Google/Email

# 3. Skonfiguruj projekt
# → Otwórz folder projektu
# → Windsurf automatycznie zaindeksuje kod

// .windsurf/settings.json (projekt)
// lub ~/.config/windsurf/settings.json (globalna)

{
  // Cascade
  "cascade": {
    "enabled": true,
    "model": "gpt-4-turbo", // lub "claude-3-opus", "custom"
    "temperature": 0.3,
    "maxTokens": 8192,
    "autoApprove": false, // true = automatycznie stosuj zmiany
    "showDiff": true
  },

  // Supercomplete
  "supercomplete": {
    "enabled": true,
    "debounceMs": 150,
    "maxSuggestions": 5,
    "contextDepth": "project"
  },

  // Terminal
  "terminal": {
    "cascadeIntegration": true,
    "autoRunSuggested": false,
    "shell": "/bin/zsh"
  },

  // Prywatność
  "privacy": {
    "telemetry": false,
    "shareUsageData": false,
    "localIndexing": true
  },

  // Wygląd
  "theme": "windsurf-dark",
  "fontSize": 14,
  "fontFamily": "JetBrains Mono"
}

# Windsurf automatycznie importuje:
# - Rozszerzenia (większość kompatybilna)
# - Ustawienia
# - Keybindings
# - Snippets

# Ręczna migracja:
windsurf --import-from-vscode

# Lub kopiuj ustawienia:
cp ~/.config/Code/User/settings.json ~/.config/windsurf/

User: Przygotuj commit z sensownym opisem

Cascade:
Analizuję zmiany w staging area...

Znalezione zmiany:
- components/Cart.tsx: Dodano walidację ilości
- hooks/useCart.ts: Obsługa błędów przy update
- api/cart/route.ts: Nowy endpoint DELETE

Proponowany commit message:
---
feat(cart): add quantity validation and error handling

- Add min/max quantity validation in Cart component
- Implement error handling in useCart hook
- Add DELETE endpoint for removing items
---

Zaakceptować? (Y/n)

User: Stwórz Dockerfile dla tego projektu Next.js

Cascade:
Analizuję strukturę projektu...

→ Next.js 14 z App Router
→ Używa Prisma (wymaga generate)
→ Zmienne środowiskowe: DATABASE_URL, NEXTAUTH_SECRET

Tworzę zoptymalizowany Dockerfile:

[Plik] Dockerfile
[Plik] .dockerignore
[Plik] docker-compose.yml (z PostgreSQL)

Uruchomić budowanie? (docker build -t app .)

# .github/workflows/windsurf-review.yml
name: AI Code Review

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  cascade-review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Windsurf AI Review
        uses: codeium/windsurf-action@v1
        with:
          api-key: ${{ secrets.CODEIUM_API_KEY }}
          review-mode: security,performance,best-practices

      - name: Post Review Comments
        uses: codeium/windsurf-comment@v1
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}

# 1. Bądź konkretny w poleceniach

❌ "Napraw ten bug"
✅ "Funkcja calculateTotal w Cart.tsx nie uwzględnia rabatów.
   Dodaj obsługę rabatu procentowego z pola discount."

# 2. Podawaj kontekst

❌ "Dodaj formularz"
✅ "Dodaj formularz rejestracji użytkownika zgodny z designem
   w Figma (link). Użyj React Hook Form i Zod do walidacji.
   Pola: email, password, confirmPassword, name."

# 3. Dziel złożone zadania

❌ "Zbuduj cały system autentykacji"
✅ "Krok 1: Skonfiguruj NextAuth z provider GitHub
   Krok 2: Dodaj middleware do protected routes
   Krok 3: Stwórz komponenty Login i Register"

# 4. Używaj Review Mode do nauki

"[Review] Sprawdź mój kod i wyjaśnij co można poprawić"

# Struktura katalogów
.windsurf/
├── flows/
│   ├── components/       # Generowanie komponentów
│   │   ├── react-component.yaml
│   │   └── page-component.yaml
│   ├── api/             # Generowanie API
│   │   ├── crud-endpoint.yaml
│   │   └── graphql-resolver.yaml
│   ├── testing/         # Generowanie testów
│   │   ├── unit-test.yaml
│   │   └── e2e-test.yaml
│   └── refactoring/     # Refaktoring
│       ├── to-typescript.yaml
│       └── extract-hook.yaml
├── templates/           # Szablony dla flows
│   ├── component.tsx.hbs
│   └── test.tsx.hbs
└── settings.json

// Dla dużych projektów
{
  "supercomplete": {
    "contextDepth": "directory", // Zamiast "project"
    "excludePatterns": [
      "**/*.test.ts",
      "**/*.spec.ts",
      "**/__mocks__/**",
      "**/fixtures/**"
    ],
    "priorityPaths": [
      "src/components/**",
      "src/hooks/**",
      "src/lib/**"
    ]
  }
}

# 1. Przeindeksuj projekt
Cmd+Shift+P → "Windsurf: Reindex Project"

# 2. Sprawdź .windsurfignore
# Upewnij się, że nie ignorujesz ważnych plików

# 3. Dodaj CLAUDE.md lub WINDSURF.md z opisem projektu
echo "# Project: E-commerce
Tech: Next.js, Prisma, Tailwind
Structure: app/ (pages), components/, lib/" > WINDSURF.md

// Optymalizacja dla wolnych maszyn
{
  "supercomplete": {
    "debounceMs": 300,
    "contextDepth": "file",
    "maxSuggestions": 3
  }
}

# Sprawdź uprawnienia terminala
# macOS: System Preferences → Security → Full Disk Access → Windsurf

# Sprawdź PATH
# .windsurf/settings.json
{
  "terminal": {
    "env": {
      "PATH": "/usr/local/bin:/usr/bin:$PATH"
    }
  }
}