Co to jest Gluon v2?

Gluon v2 to zaawansowane narzędzie łączące Twoje lokalne projekty programistyczne z modelami AI takimi jak Claude, Gemini i AI Studio. W przeciwieństwie do tradycyjnych agentów AI, Gluon daje Ci pełną kontrolę nad kontekstem przekazywanym do modelu - wybierasz dokładnie które pliki, prompty systemowe i instrukcje mają być uwzględnione.

Architektura: Dwa Komponenty

🖥️ Aplikacja Desktopowa (Silnik)

Działa w tle na Windows, zarządza projektami, monitoruje pliki, generuje konteksty i komunikuje się z rozszerzeniem przez WebSocket.

🧩 Rozszerzenie Chrome (Interfejs)

Panel boczny w przeglądarce, umożliwia wybór plików, konfigurację promptów i bezpośrednią interakcję z AI (Claude/Gemini/AI Studio).

Dlaczego Gluon?

  • Precyzyjny kontekst: Wybierasz dokładnie które pliki trafiają do AI - żadnego automatycznego "dumpu" całego repozytorium.
  • Oszczędność tokenów: Mniejszy kontekst = niższe koszty API i szybsze odpowiedzi.
  • Kontrola nad AI: Używasz własnych promptów systemowych i instrukcji - AI zachowuje się dokładnie tak, jak chcesz.
  • Multi-projekt: Pracuj z wieloma projektami jednocześnie, bez przełączania kontekstu.

🖥️ Aplikacja Desktopowa

Aplikacja desktopowa to "silnik" Gluon - działa w tle na systemie Windows i zarządza wszystkimi projektami, plikami oraz komunikacją z rozszerzeniem Chrome.

Desktop App Main Screen

📄 Licencja i Aktualizacje

Gluon v2 to produkt z jednorazowym zakupem - bez subskrypcji. Po zakupie otrzymujesz:

  • ✅ Dożywotni dostęp do aplikacji desktopowej i rozszerzenia Chrome
  • ✅ Wszystkie przyszłe aktualizacje (bezpłatnie)
  • ✅ Wsparcie techniczne poprzez Discord
  • ✅ 30-dniową gwarancję zwrotu pieniędzy
License & Updates Screen

💡 Wskazówka: Klucz licencyjny wprowadzasz tylko raz w aplikacji desktopowej. Rozszerzenie Chrome automatycznie weryfikuje status licencji przez połączenie WebSocket.

➕ Dodawanie Projektu

Aby rozpocząć pracę z Gluon, musisz dodać co najmniej jeden projekt w aplikacji desktopowej. Projekt to folder zawierający kod, który chcesz udostępnić dla AI.

Krok po kroku:

  1. Otwórz aplikację desktopową Gluon v2
  2. Przejdź do zakładki "Projects"
  3. Kliknij przycisk "Add Project" lub "+" (jeśli nie masz jeszcze żadnego projektu)
  4. Wybierz folder główny projektu (np. C:\Users\YourName\Projects\my-app)
  5. Projekt pojawi się na liście i będzie dostępny w rozszerzeniu Chrome
Empty Projects Screen Projects Screen with Project

⚠️ Ważne: Gluon NIE modyfikuje Twoich plików - działa tylko w trybie do odczytu. Możesz bezpiecznie dodać dowolny projekt bez obaw o utratę danych.

⚙️ Ustawienia Projektu

Po dodaniu projektu możesz skonfigurować, które pliki i foldery mają być uwzględniane w kontekście AI. To kluczowa funkcja pozwalająca zredukować "szum" i skupić AI na tym co naprawdę ważne.

🚫 Wykluczenia (Exclusions)

Wykluczenia pozwalają na pominięcie całych folderów podczas skanowania projektu. Typowe wykluczenia to:

  • node_modules - zależności npm/yarn (zazwyczaj tysiące plików)
  • .git - historia repozytorium Git
  • build, dist, target - artefakty budowania
  • venv, .venv - wirtualne środowiska Python
  • __pycache__, .pytest_cache - cache Python
Project Settings - Exclusions

Glob patterns

Gluon wspiera wzorce glob dla bardziej zaawansowanego filtrowania:

  • **/*.min.js - wyklucz wszystkie zminifikowane pliki JS
  • **/test/** - wyklucz wszystkie foldery o nazwie "test"
  • temp_* - wyklucz foldery zaczynające się od "temp_"

💡 Best Practice: Zacznij od wykluczenia największych folderów (node_modules, .git) - często redukują one liczbę plików o 90%+.

📋 Dozwolone Rozszerzenia

Możesz określić whitelist rozszerzeń plików, które mają być widoczne w drzewie plików. Jeśli lista jest pusta, wszystkie pliki (poza wykluczeniami) będą widoczne.

Przykładowe konfiguracje:

JavaScript/TypeScript Project

.js, .jsx, .ts, .tsx, .json, .md

Python Project

.py, .pyi, .toml, .yaml, .yml, .txt, .md

Full-Stack Web App

.js, .ts, .jsx, .tsx, .py, .html, .css, .scss, .json, .sql, .md

Project Settings - Allowed Extensions

🌍 Środowiska i Prompty Systemowe

Środowisko (Environment) to predefiniowany zestaw promptów systemowych, który określa "osobowość" i zachowanie AI. Możesz tworzyć różne środowiska dla różnych typów zadań.

Domyślne środowiska:

🎨 Default

Podstawowe ustawienia dla ogólnej pracy z kodem

🏗️ Senior Architect

Skupienie na architekturze, wzorcach projektowych i najlepszych praktykach

💻 Frontend Specialist

Dedykowany dla React, Vue, Angular - UX, accessibility, performance

🔧 Backend Specialist

API, bazy danych, logika biznesowa, bezpieczeństwo

Environment Editor
  1. W aplikacji desktopowej przejdź do zakładki "Environments"
  2. Kliknij "Add Environment"
  3. Podaj nazwę (np. "DevOps Engineer") i wybierz ikonę
  4. Dodaj prompty systemowe - każdy prompt to instrukcja dla AI
  5. Zapisz - środowisko będzie dostępne w rozszerzeniu Chrome

💡 Przykład promptu: "You are an expert in Docker and Kubernetes. Focus on containerization best practices, scalability, and security. Always suggest production-ready solutions."

🧩 Rozszerzenie Chrome

Rozszerzenie Chrome to interfejs użytkownika Gluon - panel boczny w przeglądarce umożliwiający interakcję z projektami, wybór plików i bezpośrednią komunikację z AI. Rozszerzenie łączy się z aplikacją desktopową przez WebSocket i działa w serwisach Claude.ai, Gemini oraz AI Studio.

Chrome Extension Overview

💡 Wskazówka: Rozszerzenie automatycznie wykrywa stronę AI (Claude/Gemini/AI Studio) i dostosowuje swój interfejs. Wszystkie funkcje działają we wszystkich trzech serwisach.

📁 Selektor Projektów

Selektor projektów znajduje się na górze panelu bocznego i umożliwia przełączanie między projektami dodanymi w aplikacji desktopowej.

Jak używać:

  1. Kliknij dropdown "Select Project"
  2. Wybierz projekt z listy (wyświetlana jest nazwa folderu)
  3. Drzewo plików automatycznie załaduje strukturę wybranego projektu
  4. Wszystkie funkcje (Auto Select, Context Save) będą działać w kontekście tego projektu
Project Selector

⚠️ Połączenie WebSocket: Jeśli lista projektów jest pusta, sprawdź czy aplikacja desktopowa jest uruchomiona i czy rozszerzenie ma połączenie WebSocket (status widoczny na dole panelu).

🌐 Wybór Środowiska

Środowisko definiuje, jak AI będzie się zachowywać - określa prompty systemowe, które będą automatycznie dołączane do każdej konwersacji.

Jak to działa:

  • Wybór środowiska: Kliknij dropdown i wybierz środowisko (np. "Frontend Specialist")
  • Automatyczne prompty: Wszystkie prompty systemowe z tego środowiska zostaną dołączone na początku konwersacji
  • Zmiana środowiska: Możesz zmienić środowisko w każdej chwili - nowe prompty będą użyte w następnej konwersacji
Environment Selector

💡 Pro Tip: Twórz dedykowane środowiska dla różnych typów zadań - "Code Review", "Bug Fixing", "Architecture Discussion" - każde z odpowiednimi promptami systemowymi.

⚡ Quick Task

Quick Task to pole tekstowe do szybkiego wprowadzania instrukcji dla AI. To Twój główny sposób komunikacji z modelem - tutaj wpisujesz zadania, pytania i komendy.

Co się dzieje po wysłaniu zadania:

  1. Tekst z Quick Task jest łączony z wybranymi plikami z drzewa
  2. Dodawane są prompty systemowe z wybranego środowiska
  3. Całość jest wklejana do pola input w Claude/Gemini/AI Studio
  4. Możesz jeszcze edytować wklejony tekst przed wysłaniem do AI
Quick Task Field

Przykładowe zadania:

  • "Dodaj obsługę błędów do funkcji getUserData"
  • "Zrefaktoryzuj ten kod używając async/await"
  • "Wyjaśnij jak działa ta logika walidacji"
  • "Napisz testy jednostkowe dla tego modułu"

🌳 Drzewo Plików

Drzewo plików wyświetla strukturę wybranego projektu i pozwala na precyzyjne wybieranie plików do dołączenia do kontekstu AI. To jedna z najważniejszych funkcji Gluon - decydujesz dokładnie co AI "widzi".

Funkcje drzewa plików:

  • Multi-select: Zaznacz wiele plików jednocześnie (Ctrl+Click, Shift+Click)
  • Expand/collapse: Rozwijaj i zwijaj foldery klikając strzałkę
  • Ikony typów plików: Różne ikony dla .js, .py, .json, etc.
  • Licznik: Na dole widoczna liczba zaznaczonych plików
  • Clear selection: Przycisk do odznaczenia wszystkich plików
File Tree

Dobre praktyki:

🎯 Minimalizm kontekstu

Zaznaczaj tylko pliki bezpośrednio związane z zadaniem. Mniej plików = szybsze odpowiedzi + niższe koszty + lepsze wyniki.

🧩 Modułowy wybór

Dla feature: zaznacz komponent, jego styl, test, i dokumentację. Dla buga: plik z błędem + related utils/helpers.

📋 Context Save jako checkpoint

Gdy znalazłeś optymalny zestaw plików - zapisz go jako Context Save. Będziesz mógł szybko go wczytać później.

💾 Zapisane Konteksty (Context Saves)

Context Save to zapisany "snapshot" zaznaczonych plików i konfiguracji. Możesz szybko wczytać wcześniej zapisany kontekst zamiast ponownie zaznaczać te same pliki.

Kiedy używać Context Saves:

  • Powtarzające się zadania: "Frontend Forms", "API Endpoints", "Authentication Flow"
  • Code review: Zapisz zestaw plików do review przed każdym merge'm
  • Onboarding: Przygotuj context saves dla nowych członków zespołu - "Project Overview", "Core Architecture"
  • Debugging: "Payment System Bug" z wszystkimi powiązanymi plikami

Jak utworzyć Context Save:

  1. Zaznacz pliki w drzewie plików
  2. Kliknij "Save Context" w sekcji funkcji
  3. Podaj nazwę (np. "User Profile Module")
  4. Context Save pojawi się w sekcji "Saved Contexts"
  5. Kliknij nazwę aby wczytać - pliki zostaną automatycznie zaznaczone
Context Saves

💡 Organizacja: Context Saves są specyficzne dla projektu - każdy projekt ma swoją listę zapisów. Możesz mieć "Frontend" w projekcie A i "Frontend" w projekcie B - to osobne konteksty.

⭐ Funkcje Kluczowe

Gluon oferuje trzy zaawansowane funkcje, które automatyzują i usprawniają pracę z AI. Każda z nich rozwiązuje konkretny problem w workflow programistycznym.

Key Features

🎯 Auto Select

Czym jest Auto Select?

Auto Select to funkcja automatycznego wyboru plików na podstawie Twojego zadania. Wpisujesz zadanie (np. "napraw błąd w loginie"), a AI analizuje wszystkie pliki w projekcie i automatycznie zaznacza te, które są najbardziej istotne dla tego konkretnego zadania.

Dlaczego używać Auto Select?

⏱️ Oszczędność czasu

Nie musisz ręcznie przeszukiwać drzewa plików - AI znajduje relevantne pliki w sekundach.

🔍 Odkrywanie zależności

Auto Select często znajdzie pliki, o których nie pomyślałeś - utils, helpers, typy, które są powiązane z zadaniem.

🎓 Uczenie się projektu

Obserwując jakie pliki AI wybiera dla różnych zadań, uczysz się struktury i zależności w projekcie.

Jak używać Auto Select?

  1. Upewnij się, że masz wybrany projekt
  2. W sekcji "Features" kliknij "Auto Select"
  3. W oknie dialogowym wpisz opis zadania - bądź jak najbardziej konkretny
  4. Kliknij "Analyze" - AI przeanalizuje wszystkie pliki w projekcie
  5. Po chwili zobaczysz automatycznie zaznaczone pliki w drzewie
  6. Możesz ręcznie dodać lub usunąć pliki przed wysłaniem do AI
Auto Select Dialog

Przykład

Scenariusz: Refaktoryzacja systemu autentykacji

Zadanie wpisane w Auto Select:

"Zrefaktoryzuj system logowania - zamień localStorage na cookies, dodaj refresh token"

Pliki automatycznie wybrane przez AI:

  • src/auth/login.js - główna logika logowania
  • src/auth/authService.js - serwis autentykacji
  • src/utils/storage.js - helpers do localStorage (wymaga zmiany)
  • src/utils/cookies.js - helpers do cookies (nowe API)
  • src/types/auth.ts - typy TypeScript dla auth
  • src/api/authEndpoints.js - endpointy API refresh token

AI znalazło nie tylko oczywiste pliki (login.js), ale też zależności (storage.js, cookies.js) i powiązane API (authEndpoints.js).

💡 Pro Tip: Czym bardziej szczegółowy opis zadania, tym lepsze wyniki. Zamiast "napraw bug" napisz "napraw bug w walidacji email w formularzu rejestracji".

Optymalizacja opisów zadań:

Dobre opisy

  • "Dodaj walidację email w formularzu kontaktowym używając regex"
  • "Zaimplementuj paginację w tabeli użytkowników na stronie admin"
  • "Napraw memory leak w komponencie Chart przy unmount"

Słabe opisy

  • "Popraw kod" - zbyt ogólne
  • "Bug" - brak kontekstu
  • "Frontend" - zbyt szerokie

💡 Kombinacja z Context Save: Po udanym Auto Select zapisz wynik jako Context Save - będziesz mógł go szybko wczytać przy podobnych zadaniach.

📋 Context Save (Funkcja)

Czym jest Context Save?

Context Save to zaawansowana funkcja współpracy z AI w trybie wieloetapowym. Pozwala AI "zapamiętać" kontekst poprzedniej odpowiedzi i przekazać go automatycznie do następnego promptu - eliminując konieczność kopiowania długich fragmentów kodu między konwersacjami.

Dlaczego używać Context Save?

🔗 Kontynuacja pracy

Pracujesz nad kodem w etapach - AI najpierw generuje kod, potem Ty go testujesz, potem prosisz o poprawki. Context Save przekazuje wcześniejszy kod automatycznie.

💾 Zapis stanu

Zapisujesz wynik pracy AI jako Context Save i możesz wrócić do niego później - nawet w nowej przeglądarce czy po restarcie.

🎯 Precyzyjna iteracja

Zamiast kopiować długi kod do promptu (marnując tokeny), używasz Context Save - AI dostaje tylko referencję.

Jak używać Context Save?

  1. W Quick Task zaznacz checkbox "Context Save"
  2. Wyślij zadanie do AI normalnie (np. "napisz funkcję do parsowania JSON")
  3. AI w odpowiedzi dołączy specjalny znacznik @gluon:response z kodem
  4. Gluon automatycznie zapisze tę odpowiedź jako Context Save
  5. W następnym zadaniu napisz: "dodaj error handling do poprzedniej funkcji"
  6. Gluon automatycznie dołączy zapisany kontekst - AI będzie wiedziało o której funkcji mówisz
Context Save Example

Przykład przepływu pracy

Etap 1: Generowanie początkowego kodu

Ty (z Context Save włączonym):

"Napisz klasę UserManager z metodami: createUser, deleteUser, updateUser. Użyj TypeScript."

AI odpowiada:

@gluon:response class UserManager { createUser(name: string, email: string) { /* ... */ } deleteUser(id: number) { /* ... */ } updateUser(id: number, data: any) { /* ... */ } }

→ Gluon zapisuje ten kod jako Context Save automatycznie

Etap 2: Iteracja i ulepszenie

Ty:

"Dodaj walidację email w metodzie createUser i obsługę błędów we wszystkich metodach"

→ Gluon automatycznie dołącza poprzedni Context Save do promptu
→ AI widzi poprzednią wersję UserManager i modyfikuje ją

Etap 3: Testy

Ty:

"Napisz testy jednostkowe dla UserManager używając Jest"

→ AI ma pełny kontekst UserManager z poprzednich etapów
→ Generuje testy dokładnie dopasowane do implementacji

💡 Kluczowa zasada: Context Save działa najlepiej przy iteracyjnej pracy - generuj, testuj, poprawiaj, rozszerzaj. Każdy etap buduje na poprzednim.

Zarządzanie wieloma Context Saves

Gluon automatycznie nazywa Context Saves na podstawie Twojego zadania. Możesz mieć wiele aktywnych Context Saves dla różnych części projektu. Kliknij nazwę w sekcji "Saved Contexts" aby wczytać konkretny kontekst.

Kombinacja z plikami projektu

Context Save działa razem z zaznaczonymi plikami. Przykład: zaznacz user.model.ts (model danych) + włącz Context Save z wcześniej wygenerowanym UserManager - AI zobaczy zarówno model danych jak i poprzedni kod.

⚠️ Limity: Context Save zapisuje do ~10,000 znaków z odpowiedzi AI. Dla bardzo długich kodów rozważ użycie Prompt Generator zamiast Context Save.

✍️ Prompt Generator

Czym jest Prompt Generator?

Prompt Generator to najbardziej zaawansowana funkcja Gluon - pozwala AI wygenerować strukturyzowaną odpowiedź w formacie JSON, która zawiera nie tylko kod, ale też pliki do aktualizacji, reasoning (wyjaśnienie myślenia AI) i opcjonalny "handoff" (przekazanie kontekstu do następnego zadania).

Dlaczego używać Prompt Generator?

📦 Strukturyzowane odpowiedzi

AI zwraca JSON z jasno rozdzielonymi sekcjami: kod, pliki do modyfikacji, wyjaśnienia. Łatwe do parsowania i automatyzacji.

🗺️ Reasoning - zrozumienie decyzji AI

AI wyjaśnia DLACZEGO podjęło konkretne decyzje implementacyjne. Uczysz się best practices i architektury.

🔄 Handoff - łańcuch zadań

AI może "przekazać pałeczkę" - wygenerować kontekst dla następnego zadania (np. po wygenerowaniu komponentu sugeruje napisanie testów).

Jak używać Prompt Generator?

  1. W Quick Task zaznacz checkbox "Prompt Generator"
  2. Wybierz typ szablonu (auto_select, context_handoff, lub prompt_handoff)
  3. Wyślij zadanie - Gluon dołączy specjalny prompt instruujący AI jak formatować odpowiedź
  4. AI wygeneruje odpowiedź w formacie JSON ze znacznikami @gluon:*
  5. Gluon automatycznie wyświetli strukturyzowaną odpowiedź w czytelnej formie
  6. Możesz skopiować kod, zobaczyć reasoning, lub kontynuować z handoff
Prompt Generator Output

Przykład odpowiedzi Prompt Generator

Zadanie: "Utwórz komponent React do wyświetlania listy użytkowników z paginacją"

Odpowiedź AI w formacie JSON:

@gluon:reasoning Zdecydowałem się użyć React Hooks (useState, useEffect) zamiast class component, ponieważ są bardziej idiomatyczne w nowoczesnym React. Paginacja jest po stronie klienta dla prostoty, ale można łatwo przerobić na server-side. @gluon:files UserList.jsx, UserList.module.css, types/User.ts @gluon:response // UserList.jsx import React, { useState, useEffect } from 'react'; import styles from './UserList.module.css'; export function UserList({ users }) { const [currentPage, setCurrentPage] = useState(1); const usersPerPage = 10; const indexOfLastUser = currentPage * usersPerPage; const indexOfFirstUser = indexOfLastUser - usersPerPage; const currentUsers = users.slice(indexOfFirstUser, indexOfLastUser); return ( <div className={styles.userList}> {currentUsers.map(user => ( <div key={user.id} className={styles.userCard}> {user.name} </div> ))} <Pagination currentPage={currentPage} totalPages={Math.ceil(users.length / usersPerPage)} onPageChange={setCurrentPage} /> </div> ); } @gluon:handoff Komponent UserList jest gotowy. Następne kroki: 1. Dodaj sorting po kolumnach (nazwa, email, data rejestracji) 2. Napisz testy jednostkowe z React Testing Library 3. Dodaj search/filter functionality

Co się stało w powyższym przykładzie:

  • @gluon:reasoning: AI wyjaśniło dlaczego użyło Hooks i client-side pagination
  • @gluon:files: Lista plików które trzeba utworzyć/zmodyfikować
  • @gluon:response: Pełny kod komponentu
  • @gluon:handoff: Sugestie co zrobić dalej (sorting, testy, filtrowanie)

💡 Workflow Tip: Użyj Prompt Generator z handoff do budowania kompleksowych feature'ów krok po kroku - AI "prowadzi Cię za rękę" sugerując kolejne etapy.

Dostępne szablony:

🎯 auto_select

Szablon do automatycznego wyboru plików - AI zwraca listę relevantnych plików w @gluon:files. Używaj gdy chcesz aby AI zasugerowało które pliki zaznacz.

💾 context_handoff

Szablon z pełnym Context Save + handoff. AI zapisuje swój output i przekazuje kontekst do następnego zadania. Idealny dla iteracyjnej pracy.

✍️ prompt_handoff

Prosty handoff bez Context Save - AI tylko sugeruje następne kroki. Lżejszy, zajmuje mniej tokenów.

💡 Wybór szablonu: Dla prostych zadań użyj Prompt Generator. Dla złożonych, wieloetapowych feature'ów użyj Context Save. Auto Select użyj gdy nie wiesz które pliki zaznaczyć.

📝 Szablony (Templates)

Szablony to predefiniowane struktury promptów, które instruują AI jak sformatować odpowiedź. Gdy używasz funkcji Prompt Generator, Gluon automatycznie dołącza odpowiedni szablon do Twojego zadania, dzięki czemu AI wie jakich znaczników używać.

Template Center

🏗️ Struktura Szablonu

Każdy szablon definiuje jakie znaczniki (tags) AI powinno użyć w odpowiedzi. Znaczniki zaczynają się od @gluon: i określają różne sekcje odpowiedzi - kod, pliki, reasoning, handoff.

📋 Trzy typy szablonów używają różnych znaczników @gluon:*

Trzy główne typy szablonów:

🎯 auto_select

Cel: Automatyczny wybór plików przez AI

Znaczniki: @gluon:files (lista plików)

Kiedy używać: Gdy nie wiesz które pliki zaznacz dla zadania

💾 context_handoff

Cel: Pełna iteracyjna praca z AI - kod + kontekst + następne kroki

Znaczniki: @gluon:response, @gluon:files, @gluon:reasoning, @gluon:handoff

Kiedy używać: Dla złożonych, wieloetapowych zadań

✍️ prompt_handoff

Cel: Lekki handoff - tylko sugestie następnych kroków

Znaczniki: @gluon:response, @gluon:handoff

Kiedy używać: Dla prostszych zadań, gdzie nie potrzebujesz pełnego kontekstu

🔧 Pola JSON (Znaczniki @gluon:*)

👆 Kliknij pole aby zobaczyć szczegóły.

@gluon:response
Główna odpowiedź - kod, tekst, wyjaśnienia. To najważniejsza sekcja z outputem AI.

Przeznaczenie: Zawiera właściwą odpowiedź AI - może to być kod, tekst, konfiguracja, dokumentacja, etc.

Format: Dowolny - kod, markdown, plain text. Zazwyczaj to pełny working code.

Przykład:

@gluon:response function calculateTotal(items) { return items.reduce((sum, item) => sum + item.price, 0); }

💡 Wskazówka: To pole może zawierać bardzo długi kod - nawet kilka komponentów czy modułów w jednej odpowiedzi.

@gluon:files
Lista plików do utworzenia lub modyfikacji. Ścieżki oddzielone przecinkami.

Przeznaczenie: AI informuje które pliki w projekcie trzeba utworzyć lub zmodyfikować aby zaimplementować rozwiązanie.

Format: Lista nazw/ścieżek plików oddzielonych przecinkami.

Przykład:

@gluon:files src/components/UserProfile.jsx, src/styles/UserProfile.module.css, src/types/User.ts

💡 Wskazówka: To pole jest szczególnie przydatne przy generowaniu nowych feature'ów - od razu wiesz jakie pliki musisz utworzyć.

@gluon:reasoning
Wyjaśnienie decyzji AI - dlaczego wybrało takie rozwiązanie, jakie są trade-offy.

Przeznaczenie: AI wyjaśnia swoje rozumowanie - dlaczego użyło konkretnych wzorców, bibliotek, podejść.

Format: Tekst opisowy w języku naturalnym.

Przykład:

@gluon:reasoning Użyłem React Hooks zamiast class component, ponieważ są bardziej nowoczesne i pozwalają na lepsze code reuse przez custom hooks. useState do lokalnego state jest wystarczający - nie ma potrzeby Redux dla tego prostego komponentu. Dodatkowo useEffect zapewnia cleanup przy unmount, co zapobiega memory leaks.

💡 Wskazówka: To pole jest świetne do nauki - czytając reasoning uczysz się best practices i architektury od AI.

@gluon:handoff
Sugestie następnych kroków - co zrobić dalej, jak rozbudować feature.

Przeznaczenie: AI "przekazuje pałeczkę" - sugeruje kolejne zadania do wykonania, możliwe rozszerzenia, testy, etc.

Format: Lista kroków lub opis kontekstu dla następnego zadania.

Przykład:

@gluon:handoff Komponent UserProfile jest gotowy. Sugerowalne następne kroki: 1. Dodaj loading state podczas ładowania danych użytkownika 2. Napisz testy jednostkowe z React Testing Library 3. Dodaj error boundary dla obsługi błędów 4. Zaimplementuj edycję profilu (formularz + validacja) 5. Dodaj upload avatara z preview

💡 Wskazówka: Handoff działa jak roadmap - AI prowadzi Cię przez cały proces implementacji feature'a krok po kroku.

💡 Kliknij pole aby zobaczyć szczegóły.

🔍 Pola Wewnętrzne @gluon:handoff

Pole @gluon:handoff zawiera strukturę JSON z dodatkowymi polami, które różnią się w zależności od typu szablonu. Poniżej szczegółowy opis każdego pola.

📌 Ważne: Każdy szablon zawiera również pole Role / Behavior Definition, które definiuje jak AI powinno się zachować. To pole jest automatycznie dołączane do promptu systemowego przez Gluon.

📋 Pola dla Context Save:

summary
Szczegółowa chronologia całego wątku - krok po kroku opis postępu prac.

Przeznaczenie: AI opisuje całą historię wątku w porządku chronologicznym - co zostało zrobione, jakie decyzje podjęto, dlaczego wybrano dane podejście.

Format: Tekst narracyjny z wyraźnym podziałem na etapy.

Przykład:

"summary": "Etap 1: Zaimplementowano podstawowy komponent UserProfile z hookami useState i useEffect. Decyzja: Użyto compound component pattern dla lepszej reużywalności. Etap 2: Dodano integrację z API /users/:id. Napotkano problem z CORS - rozwiązano przez konfigurację proxy w vite.config.js. Etap 3: Zaimplementowano loading states i error handling z React Error Boundary."

💡 Wskazówka: Im bardziej szczegółowa chronologia, tym łatwiej nowej instancji AI przejąć kontekst bez pytań.

solved_problems
Lista rozwiązanych problemów z opisem, rozwiązaniem, plikami i uzasadnieniem.

Przeznaczenie: Dokumentuje każdy napotkany i rozwiązany problem - co było nie tak, jak to naprawiono, które pliki zmodyfikowano.

Format: Array stringów, każdy w formacie: Problem | Solution | Files | Rationale

Przykład:

"solved_problems": [ "Problem: CORS error przy fetch do API | Solution: Dodano proxy config w vite.config.js i ustawiono credentials: 'include' | Files: vite.config.js, src/api/client.js | Rationale: Backend nie obsługuje CORS, proxy jest najszybszym rozwiązaniem", "Problem: Memory leak przy unmount UserProfile | Solution: Dodano cleanup function w useEffect anulującą pending requests | Files: src/components/UserProfile.jsx | Rationale: AbortController pattern jest standardem React 18+" ]

💡 Wskazówka: Dla każdego problemu zawsze podawaj WHY - uzasadnienie dlaczego wybrano to rozwiązanie.

current_problem
Aktualny stan prac - nad czym dokładnie teraz pracujesz, postęp, wyzwania.

Przeznaczenie: Bardzo szczegółowy opis obecnego etapu - co jest robione W TEJ CHWILI, jaki jest progress, jakie konkretne wyzwania się pojawiły.

Format: Tekst narracyjny z akcentem na CURRENT STATE.

Przykład:

"current_problem": "Obecnie pracuję nad edycją profilu użytkownika. Zaimplementowano formularz z validacją przez Zod schema. Progress: 60% - formularz działa, validacja działa. AKTUALNE WYZWANIE: Muszę zdecydować jak obsłużyć update avatara: - Opcja A: Upload do S3 + zwrócić URL do backendu - Opcja B: Base64 w body (prostsze, ale większy payload) Następny krok: Rozmowa z zespołem o wyborze opcji, potem implementacja upload logic."

💡 Wskazówka: Zawsze zaznacz co jest DONE vs IN PROGRESS vs BLOCKED - nowa instancja od razu wie co robić dalej.

key_insights
Krytyczne informacje kontekstowe - decyzje architektoniczne, odkrycia, ograniczenia, conventions.

Przeznaczenie: Zapisuje wszystkie istotne odkrycia techniczne, decyzje architektoniczne, znane ograniczenia systemu, specyfikę projektu, przyjęte konwencje.

Format: Punktowana lista lub tekst z wyraźnymi kategoriami.

Przykład:

"key_insights": "ARCHITEKTURA: Aplikacja używa compound components pattern - każdy feature ma główny kontener + sub-komponenty. OGRANICZENIA: Backend API ma rate limit 100 req/min - musimy używać debounce dla search. KONWENCJE: Wszystkie async operations przez custom hooks z prefix 'use'. Error handling przez Error Boundaries, nie try-catch w komponentach. DEPENDENCIES: UserProfile zależy od AuthContext - zawsze sprawdzaj isAuthenticated przed render. PROBLEM DO UNIKNIĘCIA: NIE używaj React.memo na komponenty z children - powoduje cache issues."

💡 Wskazówka: To pole jest jak "institutional knowledge" - zapisz wszystko co zaoszczędzi czas następnej osobie.

✍️ Pola dla Prompt Generator:

task_description
Szczegółowy opis zadania - co należy zaimplementować, cele biznesowe i techniczne.

Przeznaczenie: Opisuje dokładnie CO trzeba zrobić i DLACZEGO - zarówno z perspektywy biznesowej jak i technicznej.

Format: Tekst opisowy z wyraźnym podziałem: What + Why + Business Goal + Technical Goal.

Przykład:

"task_description": "Zaimplementować system notyfikacji real-time dla użytkowników. Business Goal: Zwiększyć engagement użytkowników przez instant powiadomienia o ważnych eventach (nowe wiadomości, mentions, system alerts). Technical Goal: Zbudować skalowalne rozwiązanie oparte na WebSocket, które obsłuży 10k+ concurrent connections, z fallback na polling dla starszych przeglądarek. Zakres: UI komponenty (NotificationCenter, NotificationItem, Badge), WebSocket client, backend integration, persistence w IndexedDB dla offline support."

💡 Wskazówka: Zawsze uwzględnij biznesowy "why" - AI lepiej dobiera rozwiązania gdy rozumie cel.

implementation_steps
Atomowy, krokowy plan implementacji - każdy krok = konkretna akcja na konkretnym pliku.

Przeznaczenie: Rozbija zadanie na małe, wykonalne kroki. Każdy krok powinien być jasny, atomowy, odnoszący się do konkretnego pliku/komponentu.

Format: Array stringów - każdy string = jeden krok implementacji.

Przykład:

"implementation_steps": [ "Krok 1: Utwórz WebSocket hook - src/hooks/useWebSocket.js - connect, disconnect, subscribe", "Krok 2: Utwórz NotificationContext - src/contexts/NotificationContext.jsx - state management", "Krok 3: Zaimplementuj NotificationCenter component - src/components/NotificationCenter.jsx", "Krok 4: Dodaj NotificationItem component - src/components/NotificationItem.jsx", "Krok 5: Integruj z WebSocket - połącz useWebSocket z NotificationContext", "Krok 6: Dodaj IndexedDB persistence - src/utils/notificationStorage.js", "Krok 7: Napisz testy - src/components/__tests__/NotificationCenter.test.jsx" ]

💡 Wskazówka: Każdy krok powinien zaczynać się od czasownika akcji: "Utwórz", "Dodaj", "Zmodyfikuj", "Zintegruj".

technologies
Kluczowe technologie, biblioteki, frameworki i narzędzia do użycia w implementacji.

Przeznaczenie: Wymienia wszystkie technologie, które MUSZĄ zostać użyte - zgodne z istniejącym stackiem projektu.

Format: Lista technologii z wersjami i uzasadnieniem wyboru.

Przykład:

"technologies": " - React 18.2+ (Context API dla state management) - Socket.io-client 4.5+ (WebSocket z auto-reconnect) - Zod 3.22+ (validation schema dla notification payload) - IndexedDB via Dexie.js 3.2+ (offline persistence) - React Testing Library (testy komponentów) - MSW (mock WebSocket dla testów) Stack Rationale: Socket.io preferowane nad native WebSocket ze względu na fallback mechanisms i auto-reconnection. Dexie.js upraszcza IndexedDB API."

💡 Wskazówka: Zawsze sprawdź package.json projektu - używaj bibliotek które już są w dependencies.

architecture
Szczegółowy opis architektury - jak nowe komponenty integrują się z kodem, flow danych, wywołania.

Przeznaczenie: Opisuje JAK nowe komponenty będą współpracować z istniejącym kodem - data flow, function calls, business logic, error handling.

Format: Tekst z diagramami flow (ASCII art ok), opisy warstw, interakcji między komponentami.

Przykład:

"architecture": " LAYERS: 1. Transport Layer: useWebSocket hook - zarządza connection, reconnection, subscriptions 2. State Layer: NotificationContext - globalne notifications state, actions (add, mark read, delete) 3. Persistence Layer: notificationStorage - IndexedDB operations, sync strategy 4. UI Layer: NotificationCenter + NotificationItem - presentation + user interactions DATA FLOW: [Backend WS] -> useWebSocket.onMessage() -> NotificationContext.addNotification() -> notificationStorage.save() -> React state update -> UI render USER INTERACTIONS: Click 'Mark as Read' -> NotificationContext.markAsRead(id) -> WS emit 'read' event -> notificationStorage.update(id) -> UI update ERROR HANDLING: - WS disconnect: useWebSocket auto-reconnect (exponential backoff) - Failed save to IndexedDB: show error toast, keep in memory - Backend error response: parse + show notification with error details INTEGRATION POINTS: - AuthContext: subscribe tylko gdy user authenticated - ThemeContext: NotificationCenter respects dark/light mode - RouterContext: notification click navigates to relevant page"

💡 Wskazówka: Używaj ASCII diagramów flow - AI świetnie je rozumie i pomagają wizualizować architekturę.

code_context
Informacje o istniejącym kodzie który NIE jest załączony - ścieżka, sygnatura, funkcjonalność.

Przeznaczenie: Dla elementów kodu które będą używane ale NIE SĄ załączone jako pliki - podaj path, nazwę, sygnaturę, opis. Cel: AI nie musi szukać w innych plikach.

Format: Lista elementów z pełnym opisem API/interfejsów których będziesz używać.

Przykład:

"code_context": " EXISTING CODE TO USE (not attached): 1. AuthContext (src/contexts/AuthContext.jsx) - Hook: useAuth() -> { user: User | null, isAuthenticated: boolean, logout: () => void } - Usage: const { isAuthenticated } = useAuth() - check before rendering notifications 2. API Client (src/api/client.js) - Function: apiClient.get(endpoint: string) -> Promise - Function: apiClient.post(endpoint: string, body: object) -> Promise - Note: Already configured with auth headers 3. Toast Service (src/utils/toast.js) - Function: toast.success(message: string) -> void - Function: toast.error(message: string) -> void - Usage: Import and call directly, globally available 4. Theme Types (src/types/theme.ts) - Type: Theme = 'light' | 'dark' - Hook: useTheme() -> { theme: Theme, toggleTheme: () => void } CONVENTIONS: - All components use named exports (not default) - Hooks must be prefixed with 'use' - Types in separate .ts files, not inline"

💡 Wskazówka: To pole oszczędza MNÓSTWO czasu - AI od razu wie jakie funkcje/typy są dostępne bez czytania całej codebase.

💡 Jak używać: Pola wewnętrzne @gluon:handoff są automatycznie wypełniane przez AI gdy używasz odpowiedniego szablonu. Ty podajesz tylko zadanie - AI generuje strukturę JSON zgodnie z instrukcjami w szablonie.

💡 Przykłady Użycia Szablonów

Poniżej przedstawiamy praktyczne przykłady użycia różnych szablonów w rzeczywistych scenariuszach.

Scenariusz 1: Nie wiem które pliki zaznacz

Problem: Chcesz naprawić bug w systemie płatności, ale nie wiesz które pliki są zaangażowane.

Szablon: auto_select

Zadanie:

"Napraw bug: płatność kartą nie przechodzi dla kwot powyżej 1000 zł"

Odpowiedź AI:

{
    "@gluon:response": "auto_select",
    "@gluon:reasoning": "Analizując zadanie zidentyfikowałem 4 kluczowe pliki: 
        PaymentProcessor obsługuje logikę płatności, AmountValidator waliduje kwoty, 
        paymentGateway integruje z zewnętrznym API, paymentLimits zawiera 
        konfigurację limitów.",
    "@gluon:files": {
        "@gluon:payment_system": [
            "src/payment/PaymentProcessor.js",
            "src/validation/AmountValidator.js",
            "src/api/paymentGateway.js",
            "src/config/paymentLimits.js"
            ]
    }
}

→ Gluon automatycznie zaznacza te 4 pliki w drzewie

Scenariusz 2: Buduję kompletny feature krok po kroku

Problem: Chcesz zbudować system notyfikacji - począwszy od UI, przez API, aż po real-time updates.

Szablon: context_handoff

Etap 1 - Zadanie:

"Utwórz komponent NotificationCenter - wyświetla listę notyfikacji, mark as read, delete"

AI odpowiada z pełnym szablonem:

{
    "@gluon:response": "context_handoff",
    "@gluon:handoff": {
        "summary": "Zaimplementowano UI layer systemu notyfikacji. 
                NotificationCenter + NotificationItem działają z mock data.",
        "solved_problems": [
            "Problem: Jak zarządzać stanem wielu notyfikacji | Solution: useReducer 
                z actions (add, markRead, delete) | Files: useNotifications.js | 
                Rationale: Reducer pattern dla złożonego state"
            ],
        "current_problem": "UI gotowe, ale brak integracji z backend. 
            Następny krok: API endpoints.",
                "key_insights": "Component używa compound pattern. Wszystkie mutations 
            przez reducer. CSS modules dla izolacji stylów."
    },
    "@gluon:reasoning": "Używam compound component pattern - NotificationCenter 
        jako kontener, NotificationItem jako element listy. State management przez 
        useReducer dla złożonej logiki (mark as read, delete, filter).",
        "@gluon:files": {
            "@gluon:notification_project": [
            "src/components/NotificationCenter.jsx",
            "src/components/NotificationItem.jsx",
            "src/components/NotificationCenter.module.css",
            "src/hooks/useNotifications.js",
            "src/types/Notification.ts"
            ]
    }
}

Etap 2 - następne zadanie bazuje na handoff:

"Stwórz API endpoint /api/notifications według sugestii z handoff"

→ AI ma kontekst z poprzedniego etapu dzięki Context Save
→ Generuje API kompatybilne z UI
→ Znów przekazuje handoff z kolejnymi krokami

Scenariusz 3: Proste zadanie z sugestią co dalej

Problem: Potrzebujesz prostej funkcji utility, ale chcesz aby AI zasugerowało co jeszcze można dodać.

Szablon: prompt_handoff

Zadanie:

"Napisz funkcję formatCurrency - formatuje liczby jako PLN z separatorami tysięcy"

AI odpowiada (Prompt Generator - specyfikacja do implementacji):

{
    "@gluon:response": "prompt_handoff",
    "@gluon:handoff": {
        "task_description": "Funkcja utility formatCurrency do formatowania 
            kwot w PLN z separatorami tysięcy dla lepszej czytelności w UI.",
        "implementation_steps": [
            "Krok 1: Utwórz plik src/utils/currency.js",
            "Krok 2: Zaimplementuj formatCurrency używając Intl.NumberFormat",
            "Krok 3: Dodaj unit testy w src/utils/__tests__/currency.test.js"
            ],
        "technologies": "Intl.NumberFormat (native JS API) - zero dependencies",
        "architecture": "Pure function, brak side effects. Input: number, 
            Output: string. Używa native Intl API dla i18n support.",
        "code_context": "Function będzie używana w komponentach: ProductCard, 
            OrderSummary, InvoiceView"
            },
    "@gluon:reasoning": "Używam Intl.NumberFormat bo jest native, zero 
        dependencies, automatyczne formatowanie dla różnych locales.",
    "@gluon:files": {
        "@gluon:app": [
        "src/utils/currency.js"
        ]
    }
}

→ Otrzymujesz kompletną specyfikację techniczną
→ Wszystkie kroki implementacji jasno określone
→ AI-coder dostaje gotowy plan do wykonania

💡 Podsumowanie:

  • Auto Select: Nie wiem które pliki wybrać
  • Context Save: Buduję duży feature etapami
  • Prompt Generator: Szybkie zadanie + chcę wiedzieć co dalej