"Topology" nasıl yapıldı?

Sayfanın arka planında gerçek zamanlı bir git grafiği yaşıyor: dallar doğuyor, commit atıyor, seri kuyruktan squash olup iniyor; conflict'ler amber renkte "park" ediyor ve main yalnızca fast-forward ilerliyor. Bu, Findie'nin merge motorunun bire bir görselleştirmesi.

Konsept: motoru anlatma, çalıştır

Findie'nin en güçlü iddiası soyut: "main asla bir merge çalışma dizini değildir; promotion ff-only'dir; conflict'ler kuyruğu bloklamaz, kenara park eder." Bunu diyagramla anlatmak yerine sayfa, motorun küçük bir simülasyonunu koşturuyor. Ziyaretçi kuralları okumadan önce onları izlemiş oluyor. Basılı tutunca zaman 4x akıyor: bir gecelik Auto Mode vardiyasının time-lapse'i.

Simülasyonun veri modeli

world.t              // dünya sola akar; screenX = worldX - world.t
branch = { x0, lane, commits[], st: grow|queued|parked|merging|gone }
intCommits[]         // findie/trunk üzerindeki squash inişleri
mainCommits[]        // ff okları: {fromWx, wx, prog}
queue[]              // AYNI ANDA TEK dal merge olur (seri kuyruk!)

• Doğum: boş bir şerit (lane) bulunur; dal integration'dan yumuşak bir kavisle yukarı çıkar, sağa doğru commit noktaları ekleyerek büyür.
• Kuyruk: dal olgunlaşınca kuyruğa girer. Motor gerçeğine sadık kalarak aynı anda yalnızca bir dal iner: parçalı bezier çizimiyle (t=0→1) integration'a kavis atar, iniş noktasında halka "flash" yayılır.
• Park: %16 olasılıkla (pin sahnesinde bir kez zorla) dal amber'e döner, etiketi "parked, markers kept" olur, birkaç saniye bekleyip kuyruğun sonuna girer. Kuyruk bu sırada durmaz.
• FF: her üç inişte bir integration'dan main'e beyaz bir kavis uzar, main üzerinde büyük nokta + "ff" etiketi belirir. Main'e başka hiçbir şey dokunmaz.

İlk boyamada dolu ekran

Simülasyonlar açılışta boş başlar; ilk saniyeler ölü görünür. Çözüm: sayfa çizilmeden önce motor 700 adım sessizce koşturulur (warm-up). Ziyaretçi geldiğinde topoloji zaten yoğun ve yaşamakta. prefers-reduced-motion modunda aynı warm-up tek statik kare üretir.

Scroll'la odak anlatımı

Pin'li üç perdelik sahnede kamera oynamaz; ışık oynar. Her segment bir "focus" değeri seçer ve çizim fonksiyonu odak dışını %16 opaklığa düşürür:

seg 0 · branch  → yalnızca büyüyen dallar parlak
seg 1 · queue   → kuyruk + integration parlak, bir park zorlanır
seg 2 · promote → integration + main + ff okları parlak, bir ff zorlanır

Segment değişiminde forcePark / forceFF bayrakları anlatının tam o anda görsel kanıtını üretir: "conflict'ler park eder" cümlesi ekranda gerçekten bir dal park ederken okunur.

Geometri dersi (2. turda düzeltilen hata)

Ürün gerçekleri

Sahnedeki her davranış motorun gerçek özelliği: izole worktree'ler, tek seri kuyruk, marker'ları korunarak park eden conflict'ler, Findie-Task-Id trailer'larıyla idempotent inişler, sessiz kuyruk beklemeden asla ilerlemeyen ff-only promotion. "The graph is the interface" bölümündeki görüntü ürünün gerçek git graph ekranı.

Üç turlu eleştiri döngüsü

1. Tur 1: geometri hatası (dikey sarkan dallar) + başlığın içinden geçen main hattı. Commit üretimi uca taşındı, bantlar üst yarıya alındı.
2. Tur 2: açılışta boş ekran; 700 adımlık warm-up eklendi. Trafik yoğunluğu artırıldı (spawn ve commit aralıkları kısaltıldı).
3. Tur 3: promote sahnesinin odak ışığı, mobil bantlar, konsol taraması ve canlı deploy doğrulaması.

Sen de kur

# 1. Ürün kuralını simülasyon davranışına çevir (park, seri kuyruk, ff)
# 2. Akan dünya: world.t artar, screenX = worldX - world.t
# 3. Parçalı bezier ile "iniş" animasyonu; flash halkaları
# 4. Warm-up: ilk boyamadan önce N adım sessiz koş
# 5. Pin sahnede kamera değil IŞIK anlat: odak dışı %16 opaklık
npx wrangler pages deploy ./site --project-name=my-topology