Ön Uç Tasarımı

Memo'nun kullanıcı arayüzü, "Greige" (kalay çalışması) tasarım dilini takip eden bir Flutter masaüstü uygulamasıdır (mobil yardımcı ile birlikte) — sıcak nötr tonlar, bronz vurgular, net kontrast, sert beyazlar yok.

Teknoloji Yığını

Katman	Teknoloji
Çerçeve	Flutter 3.10+ (Dart)
Durum Yönetimi	Riverpod (AsyncNotifierProvider)
HTTP İstemcisi	Dio (istek + SSE akışı)
Yönlendirme	GoRouter (bildirimsel, yol tabanlı)
Simgeler	Phosphor Icons (Bold ağırlık, MIT lisanslı)
SVG	flutter_svg (sağlayıcı logoları)
Markdown	Kod vurgulamalı özel markdown işleyici

Tasarım Dili: "Greige"

Renk paleti sıcak, yumuşak nötr tonlar kullanır:

Belirteç	Amaç	Değer
--surface	Birincil arka plan	Sıcak koyu gri
--surface-2	İkincil yüzey (kartlar, paneller)	Biraz daha açık
--ink	Birincil metin	Kirli beyaz
--ink-dim	İkincil metin	Yumuşak sıcak gri
--ink-faint	Üçüncül metin, etiketler	Soluk gri
--line	Kenarlıklar, ayırıcılar	İnce gri
--bronze-bright	Aktif / vurgu	Sıcak bronz/altın
--bronze-deep	Vurgu kenarlıkları	Koyu bronz
--bronze-pale	Vurgu arka planları	Soluk bronz yıkama

Tipografi, var(--body) (sans-serif, 0.88rem taban) ve var(--mono) (monospace, 0.84rem) yazı tipi yığınlarını kullanır.

Durum Yönetimi: Riverpod

// Örnek: Sohbet sağlayıcısı
final chatProvider = AsyncNotifierProvider<ChatNotifier, ChatState>(
  ChatNotifier.new,
);

class ChatNotifier extends AsyncNotifier<ChatState> {
  Future<void> sendMessage(String text) async {
    state = const AsyncValue.loading();
    state = await AsyncValue.guard(() async {
      final client = ref.read(apiClientProvider);
      final stream = await client.postChatStream(text);
      // SSE olaylarını işle, durumu kademeli güncelle
      return updatedState;
    });
  }
}

Ana sağlayıcılar:

Sağlayıcı	Amaç
chatProvider	Aktif konuşma durumu, mesaj listesi, akış
memoryProvider	Hafıza arama, analitik, içe/dışa aktarma
providerListProvider	Harici sağlayıcı yapılandırmaları
modelListProvider	İndirilmiş ve mevcut modeller
agentProvider	Ajan yürütme durumu, izin iletişim kutuları
orchestraProvider	Orkestra yapılandırması, rol atamaları
whatsappProvider	Bağlantı durumu, mesajlar, kişiler
calendarProvider	Etkinlikler, hatırlatıcılar, ayarlar
moodProvider	Ruh hali puanı, motor açma/kapama
skillListProvider	Yüklenmiş ve aktif beceriler
settingsProvider	Genel uygulama ayarları

API İstemcisi: MemoApiClient

// frontend/lib/core/api_client.dart
class MemoApiClient {
  final Dio _dio;
  static const baseUrl = 'http://localhost:8090';

  // Sohbet
  Future<Stream<SSEEvent>> postChatStream(ChatRequest req);
  Future<ChatResponse> postChat(ChatRequest req);
  Future<void> stopChat();

  // Hafıza
  Future<List<Memory>> searchMemory(String query, {int topK = 5});
  Future<void> rememberMemory(String text);
  Future<int> forgetMemory(String pattern);
  Future<MemoryAnalytics> getMemoryAnalytics();

  // Sağlayıcılar
  Future<List<ProviderConfig>> getProviders();
  Future<void> saveProvider(ProviderConfig config);
  Future<void> deleteProvider(String name);

  // ... arka uç uç noktalarını yansıtan ~90 yöntem imzası
}

Dio, singleton Provider<MemoApiClient> deseni ile yapılandırılmıştır. SSE akışları responseType: ResponseType.stream kullanılarak dio.request() ile ayrıştırılır.

Ana Ekranlar

Ekran	Yol	Amaç
Sohbet	/	Mesaj listesi, giriş, motor çubuğu ile ana sohbet arayüzü
Ajan	/agent	Araç çağırma arayüzlü ajan modu sohbeti
Model Mağazası	/store	İki panelli model keşfi ve indirme
WhatsApp	/whatsapp	WhatsApp sohbet listesi ve mesajlaşma
Takvim	/calendar	Aylık ızgara, etkinlik listesi, ekle/düzenle
Ayarlar	/settings	12 sekmeli yapılandırma paneli

Ayarlar Sekmeleri (12)

Her sekme frontend/lib/widgets/settings/tabs/ altında odaklanmış bir widget'tır:

Sekme	Dosya	İçerik
Genel	general_tab.dart	İsim, dil, tema, hafıza açma/kapama, web arama modu
Sistem Prompt	system_prompt_tab.dart	Ön ayar seçicili kimlik prompt düzenleyicisi
Gizli Prompt	incognito_prompt_tab.dart	Gizli mod için ayrı prompt
Hafıza	memory_tab.dart	RAG yapılandırması, hata ayıklama araması, analitik, içe/dışa aktarma
API Sağlayıcıları	provider_tab.dart	Model başına bağlam pencereli sağlayıcı listesi, ekle/düzenle
Orkestra	orchestra_tab.dart	Rol yapılandırması, şef model, hızlı kurulum düğmesi
Ajan İzinleri	agent_permissions_tab.dart	Araç izin politikaları (6 seviye)
Beceriler	skills_tab.dart	Beceri listesi, yükle, etkinleştir, kaldır
GPU Yapılandırması	gpu_config_tab.dart	llama.cpp ayarları, GPU katmanları, VRAM
Yedekleme	backup_tab.dart	Bulut senkronizasyon kurulumu, dışa aktar, geri yükle, temizle
Uzaktan Erişim	remote_access_tab.dart	ngrok, Tailscale, LAN bağlama
Hakkında	about_tab.dart	Sürüm, lisans, katkıda bulunanlar, güncelleme kontrolü

Ayarlar sekme kenar çubuğu, etiketlerin yanında Phosphor Bold simgeleri gösterir. Aktif sekmenin simgesi vurgu renginde yanar; aktif olmayan sekmeler textDim kullanır.

Sağlayıcı ve Orkestra Yapılandırma İletişim Kutuları

Sağlayıcı İletişim Kutusu

• Sağlayıcı türü seçici (OpenAI, Claude, Gemini, Grok, Groq, OpenRouter, Ollama, OpenCode Zen, OpenCode Go)
• API anahtar alanı (maskeli, şifreli depolama)
• Model kimliği ve bağlam penceresi (token)
• Öncelik sıralamalı etkin/devre dışı anahtarı
• Bağlantıyı test et düğmesi

Orkestra İletişim Kutusu

• Görsel açıklayıcı: "Şef planlar → Uzmanlar paralel çalışır → Sentez"
• Hızlı kurulum: şefe ve tüm etkin rollere aynı anda tek model ata
• Daraltılabilir rol kartları (simge, ad, atanan model, aç/kapat anahtarı)
• "Gelişmiş" genişletilebilir altında sistem prompt'u
• Başlıkta etkin rol sayısı, atanmamış rol uyarı simgeleri

Motor Çubuğu

Şunları gösteren kalıcı bir alt bilgi çubuğu:

┌─────────────────────────────────────────────┐
│ 🟢 llama-3.1-8b-instruct  │  ◼ tümünü durdur │
│ 🟢 nomic-embed-text-v1.5   │  🤖 OpenAI      │
└─────────────────────────────────────────────┘

• Yeşil nokta = çalışıyor, turuncu = başlatılıyor, kırmızı = durduruldu, gri = model yok
• Hem sohbet modelini hem gömme modelini gösterir
• Aktif harici sağlayıcı şirket logosu + adıyla gösterilir
• "◼ tümünü durdur" düğmesi tüm aktif LLM süreçlerini sonlandırır
• Ruh hali motoru aktifken ruh hali puan göstergesi görünür

Ana Tasarım Desenleri

1. Mount kontrolü: Async geri çağrılarda setState öncesinde her zaman if (!mounted) return;
2. Sağlayıcı geçersiz kılma: Mutasyonlardan sonra UI yeniden derlemelerini tetiklemek için ref.invalidate(provider)
3. Hata yönetimi: Tüm async işlemleri AsyncValue.guard() sarmalar
4. Özellik kartları: Açıklayıcı kartlarla başlatma paneli karşılama ekranı
5. Boş durumlar: Bir özelliğin verisi olmadığında açıklayıcı metin
6. İpucu metinleri: Mod rozetlerinde açıklayıcı ipuçları (Gizli, Ajan, WhatsApp)

Duyarlı Düzen

Kırılma Noktası	Davranış
> 1200px	Tam kenar çubuğu (280px) + içerik + isteğe bağlı sağ panel
860–1200px	Açma/kapama düğmeli daraltılabilir kenar çubuğu
< 860px	Mobil düzen — kaplama olarak kenar çubuğu, tam genişlik içerik

Mobil yardımcı uygulama aynı kod tabanını paylaşır ve düzeni daha küçük ekranlar için uyarlar.