AI Görselleştirme / Ofis Simülasyonu
Claude Office: Ajanlarınızı 2D Piksel Ofisinde Canlı İzleyin
Claude Code ve OpenCode ajanlarının çalışmasını, araç kullanımlarını ve alt ajanlarını retro bir 2D piksel ofisinde görselleştiren paulrobello/claude-office projesini inceledik.
Terminalde arka arkaya koşan Claude Code ajanlarının dosya okurken, testleri denerken ve alt ajanlar türetirken ne yaptığını sadece siyah ekrandaki kuru loglardan izlemek bir noktadan sonra yorucu oluyor. paulrobello/claude-office projesini yerel geliştirme makineme kurup denediğimde, tüm bu ajan yaşam döngüsü olaylarını retro 2D piksel bir sanal ofise bağlayarak izlemenin ne kadar keyifli olduğunu fark ettim.
Teknoloji Yığını & Sistem Mimarisi
| Bileşen | Teknoloji / Detay |
|---|---|
| Geliştirici / Depo | paulrobello/claude-office |
| Frontend | Next.js + PixiJS (2D Canvas render engine) |
| Backend | FastAPI (REST & WebSocket canlı veri yayını) |
| Entegrasyonlar | Claude Code Hooks & OpenCode Plugin |
| Lisans | MIT |
Olay Eşleme (Event Mapping) Nasıl Çalışır?
Claude Code veya OpenCode üzerinde bir işlem başladığında entegre kancalar (hooks) FastAPI sunucusuna veri aktarır:
- 1Session Start: Ofise yeni bir piksel avatar girer ve boş bir masa seçer.
- 2Pre-Tool Use: Karakter masasında çalışmaya başlar, araç simgesi başının üstünde belirir.
- 3Subagent Start: Ana ajan yeni bir alt ajan türettiğinde masasının yanında ikinci bir çalışma arkadaşı doğar.
- 4Permission Request: Karakter kullanıcının onayını beklerken duraklama animasyonuna geçer.
- 5Context Compacting / Reporting: Token harcamaları ve bellek temizliği canlı panellerde güncellenir.
Gelişmiş Beyaz Tahta & AI İsimlendirme
Uygulamada yer alan 12 farklı beyaz tahta modu sayesinde proje istatistikleri, ajan çalışma geçmişi ve token tüketimi grafik olarak takip edilebilir. Claude OAuth entegrasyonu sağlandığında ajanlara otonom isimler verilmektedir.