# Görseli tek başına verme; varsa işaretleri, açıklamayı ve source ilişkisini birlikte taşı

> Soy ağacı grafiği, arayüzde görünen bir parçayı tek başına resim olarak bırakmaz. Resim, varsa resmin üzerindeki işaretler ve onların anlamı, o parçanın ait…

Canonical: https://optionos.app/guide/tr/lineage-graphs
Published: 2026-07-13
Source: optionos-product:r19

Soy ağacı grafiği, arayüzde görünen bir parçayı tek başına resim olarak bırakmaz. Resim, varsa resmin üzerindeki işaretler ve onların anlamı, o parçanın ait olduğu component/source-map izi ve kullanıcının konuşarak verdiği niyet birlikte okunur.

Bu yüzden burada her kart **görsel kanıt**, **açıklama** ve **kartlar arası akış metni** taşır. Görselin üzerinde gerçek işaretler varsa onların açıklaması da aynı kartta kalır; işaret yoksa numaralı legend üretilmez. Kartlar arası metin en az görsel kadar önemlidir; çünkü “bu örnek neden var, bir sonrakine nasıl bağlanıyor?” sorusunu o cevaplar.

Temel amaç şu: kod tarafını anlatmak yerine, gördüğün çıktıyı işaretlemek. İnsan UI üzerinde konuşur ve işaretler; agent, o işaretli yüzeyden component'i, source dosyasını ve yapılacak değişikliği bulur. Böylece çalışma, “hangi kodu değiştir?” sorusundan “hangi gözlenen sonucu istiyoruz?” sorusuna döner.

İlk kapalı set, What's New entry'si için kuruldu. Buradaki önemli ders şu: ortaklaştırılacak en küçük parça resim değildir; ortaklaştırılacak en büyük güvenli parça image-card soy ağacıdır. Yani resim ve caption her zaman, yalnız görselde karşılığı olan işaretlerin legend'ı ise koşullu olarak tek ailede taşınır.

![What's New entry için kapalı soy ağacı seti](https://optionos.app/guide/lineage-graph-closed-set.png)
*What's New image-card soy ağacı, çıplak resim yerine paylaşılacak en büyük güvenli component'i tanımlar.*
İnteraktif sahne: https://optionos.app/guide/tr/lineage-graphs#lineage-graph-closed-set

Bu kapalı setin pratik sonucu şudur: Guide, What's New içindeki 15 indeksli Cockpit kartını kullanacaksa sadece PNG'ye link vermez. Source entry'deki feature-block ve image-card'ı çağırır. Böylece caption ve 1–15 indeks açıklamaları ikinci kez yazılmaz, ama Guide'da da görünür kalır.

Aynı mantık doküman içinde de çalışır. Bir ekran görüntüsünü dokümana koyduğunda, görüntünün etrafındaki source-map veya component satırı da soy ağacının parçasıdır. Agent yalnız resmi değil, “bu resimde hangi component/source ipucu seçilmiş?” bilgisini de görür.

![Dokümanda source map ve yakalama aksiyonlarıyla işaretlenmiş lineage örneği](https://optionos.app/guide/lineage-doc-source-map.png)
*Dokümandaki lineage görünür olunca agent, işaretlenen UI parçası ile source map bilgisini aynı bağlamda okur.*
1. Yakalanan görselin tamamı — konuşmada kullanılan kanıt paketi
2. Seçilen component/source-map alanı — kod tarafındaki sahiplik ipucu

Bu örnekte doküman, hızlı bir açıklama yüzeyi gibi çalışır. Kullanıcı resmi koyar, index çizer, konuşarak neye baktığını söyler. Resmin altında source-map görünür olduğu için agent “bu UI parçası hangi dosya/component ile ilişkili?” sorusunu tahminle değil, görünür kanıtla yanıtlar.

Bir sonraki örnekte aynı işlem daha dar bir seçime iner. Burada bütün ekran değil, seçilen node/component satırı önemlidir. Geliştirme sırasında çoğu karar böyle daralır: önce geniş görüntü, sonra seçili component, sonra source path.

![Component satırı seçilmiş lineage graph örneği](https://optionos.app/guide/lineage-doc-selected-node.png)
*Seçili satır, hangi component'in konuşulduğunu ve hangi kaynak dosyanın değişeceğini görünür yapar.*
1. Component satırı — konuşulan arayüz parçasının source-map karşılığı
2. Yakalama listesi — aynı kanıtın konuşma ve dosya bağlamında saklandığı yer

Bu iki doküman örneği, soy ağacının sadece UI süsü olmadığını gösterir. Soy ağacı, node ve edge ilişkisini görünür yapan çalışma protokolüdür: görünen yüzey → seçili component → source map → konuşma niyeti → agent aksiyonu.

Bu protokolün asıl değeri, çalışma ekranının tamamında görünür olur. Geliştirme düzeninde ürün yüzeyi, VS Code Cockpit paneli, agent terminalleri, terminal içeriği ve Source Control aynı anda görünür. Böylece kullanıcı kodu açıp tarif etmek yerine, çıktılar arasında swap atarak konuşur.

![optionOS, VS Code Cockpit, agentlar, terminal ve Source Control ile çalışma düzeni](https://optionos.app/guide/lineage-working-layout.png)
*Çalışma düzeni; ürün yüzeyi, Cockpit paneli, agentlar, terminal ve source view aynı ekranda tutulduğunda hızlı konuşarak geliştirme mümkün olur.*
1. Üzerinde çalışılan component veya ürün yüzeyi
2. VS Code içindeki Cockpit paneli
3. Açık agent/terminal sekmeleri
4. Terminal içeriği — custom UI yerine gerçek agent çıktısı
5. Source Control — değişen dosyaların canlı görünümü

Bu düzenin glue layer'ı şudur: kullanıcı kendi uygulaması üzerinde ses kaydını açar, gördüğü sonucu konuşarak işaretler, agent ise terminalde gerçek işi yapar. Source Control tarafı da sonuç judge'ı gibi kalır; hangi dosyalar değişti, ne staged, ne unstaged görünür olur.

Terminal ve agentlar çoğalınca bir üst kontrol yüzeyi gerekir. Cockpit burada devreye girer. Cockpit, agent oturumlarını kartlara çevirir: bekleyenleri, çalışanları, host uygulamayı, modeli ve hızlı aksiyonları tek grid içinde gösterir.

![Cockpit uygulamasında ajan kartları, bekleme durumu ve özel agent kartları](https://optionos.app/guide/lineage-cockpit-agent-grid.png)
*Cockpit, çalışan ve bekleyen agentları kart olarak gösterir; bekleyen kartlar aksiyon yüzeyi olur, çalışanlar ise düşük öncelikli izleme sinyali olarak kalır.*
1. Cockpit grid — agent oturumlarının ana kontrol yüzeyi
2. Seçilen Ghostty agent kartı
3. Host etiketi — agent'ın Ghostty veya VS Code'da koştuğunu gösterir
4. Waiting durumu — insan girdisi bekleyen agent
5. Özel agent kartları — hızlı başlatılan Claude/Codex yüzeyleri
6. Aktif/odak agent kartı
7. Çalışan kartlar — soluk görünerek takip edilir ama öncelik almaz

Bu katmanda amaç “tüm agentları okumak” değildir. Amaç, insan kararını değiştiren agentı bulmaktır. Waiting kartı aksiyon ister; çalışan kartlar ise sadece izleme sinyalidir. Codex gibi hızlı ve kontrol edilebilir agentlar bu yüzden ayrı kart olarak hızlı başlatılır.

Aynı ilişki fikri sadece agent kartlarında değil, component seçimi sırasında da kullanılır. Inspector açıldığında UI'daki parça seçilir, o parçanın source path'i görünür olur ve konuşmadaki işaret aynı aileye bağlanır.

![Inspector ile component seçimi ve source map lineage ilişkisi](https://optionos.app/guide/lineage-component-selection.png)
*Inspector açıldığında seçilen component, source path ve konuşmadaki işaret aynı lineage ailesine bağlanır.*
1. Seçili component alanı — üzerinde çalışılacak UI parçası
2. Source path / lineage başlığı — kod tarafındaki sahiplik izi

Bu sayede geliştirme yaparken “şu Swift dosyasını aç” diye tarif etmek gerekmez. Kullanıcı Inspector'ı açar, component'i seçer, işaretler ve konuşur. Agent, seçili component ile source path arasındaki bağı kullanarak doğru dosyaya gider.

Son katman yakalama akışıdır. Capture Actions menüsü, Inspector, konuşma sırasında yakalanan resimler/dosyalar ve akıllı yerel uygulama barı aynı anda görünür olduğunda kullanıcı indeksleri bile konuşarak üretebilir. Yani işaretleme ayrı bir manuel dokümantasyon işi olmaktan çıkar, çalışma akışının parçası olur.

![Yakalama aksiyonları, inspector ve konuşma yakalama listesi](https://optionos.app/guide/lineage-capture-inspector.png)
*Inspector, yakalama aksiyonları ve konuşma listesi birleştiğinde kullanıcı kodu tarif etmeden UI parçasını, dosyayı ve niyeti agent'a verebilir.*
İnteraktif sahne: https://optionos.app/guide/tr/lineage-graphs#lineage-capture-inspector

Büyük resim şu: her görsel kendi içinde bir soy ağacı taşır; görsel + açıklama ve varsa görseldeki işaretlerin legend'ı bir image-card ailesidir; image-card aileleri arasındaki metin de workflow soy ağacıdır. Bu yüzden doküman sadece resim galerisi değildir. Konuşmanın glue layer'ı, görselleri tek bir çalışma yöntemine bağlar.