Blueforce-Linux/docs/34-CONSOLE-VISUAL-CONCEPT.md
emirhanmamak-blueforce 2bad7fbb7f feat(console): application shell with overview, browser, drawer and safety UX
The console was a flat form: every control on the root window, 48 operations
as undifferentiated rows, a giant output textarea, privilege as a buried
sentence. It now has a shell: a fixed header band (product, target, device
state, privilege) plus a page body, and in detailed mode a sidebar with five
operation categories and an Activity page.

What changed (presentation layer only; _execute, gates, run_plan, audit and
redaction untouched):
- simple mode is an Overview: four state cards (target/device/privilege/
  inventory) plus Install/Status/Exit, instead of the raw form;
- the target is one segmented control (Device/Wave/Entire fleet) with a single
  scope source of truth; the dealer text can no longer silently override the
  wave, and the scope stays visible across pages;
- operations are browsed, not dumped: icon + name + explanation + scope/risk
  badges, with a detail panel (meta grid, warnings, options form, backend-built
  command preview on demand);
- destructive confirmations are dedicated dialogs showing OPERATION/TARGET/
  SCOPE/EFFECT with a fleet/production strip and focus on Cancel; the token
  dialog is styled; secrets never enter either;
- the output textarea is an execution drawer (IDLE/RUNNING with mm:ss /
  DONE-FAILED with duration and exit code) streaming the same backend output;
- write operations stay visible but disabled with their reason when
  unprivileged, in both entry points;
- new module bfos/ui_widgets.py (~490 lines, stdlib + tkinter only, no colour
  literals): canvas line icons, segmented control, collapsible panel, meta
  grid, timer, the two safety dialogs.

Tests: test_bfos_gui_static.py 95 OK, test_bfos.py 155 OK, run-all.sh 12/12.
The colour-literal test now also scans ui_widgets.py (proven by mutation:
a #ff0000 probe goes red, green after removal). Live QA: zero geometry errors
over 712 widgets, all 48 operations listed, 13 write ops disabled with reasons
without root, TUI and --list smoke-tested.

Known limits: no dark theme (tokens ready); the detail page's target line does
not refresh when the target changes mid-form (the confirmation dialog always
shows the current one); visual QA was geometry + OCR, not a human eye.
2026-09-16 23:21:41 +03:00

8.5 KiB
Raw Permalink Blame History

34 — Konsol Görsel Konsepti (Uygulanan Tasarım)

1. Amaç

Operatör konsolunun (bfos/ui_gui.py + bfos/ui_widgets.py) görsel dünyasını tek belgede sabitlemek: uygulama kabuğu, Genel Bakış, hedef seçici, işlem tarayıcı, ayrıntı paneli, yürütme çekmecesi ve güvenlik pencereleri. Kavram docs/33-OPERATOR-CONSOLE.md §9.2'nin uygulanan hâlini anlatır; davranış sözleşmesini değiştirmez.

2. Kapsam

Yalnızca sunum katmanı: koyu başlık bandı, hedef paneli, kenar çubuğu, sayfalar, rozetler, diyaloglar. Renk/boşluk/yazı değerleri bfos/ui_theme.py üzerinden web/static/tokens.css aynasından gelir; bu belgede renk kodu yoktur. Backend kuralları (bfos/operations.py, bfos/runner.py), kapılar ve denetim kaydı kapsam dışıdır — aynen korunur.

3. Kararlar

  1. Uygulama kabuğu: başlık bandı + hedef paneli her modda sabittir; detaylı modda solda 220px kenar çubuğu (5 kategori + Etkinlik), sağda sayfa alanı, altta yürütme çekmecesi ve eylem çubuğu.
  2. Genel Bakış ilk ekrandır: 4 durum kartı (Hedef / Cihaz durumu / Yetki / Envanter) + 3 hızlı işlem (Kur / Durum / Çıkış). Form yok.
  3. Hedef seçici parçalıdır: [Cihaz | Dalga | Tüm filo]; görünür kapsam tektir, girdiler bağlama duyarlıdır, tüm filo yüksek etkili uyarı şeridi açar.
  4. İşlem tarayıcı satırlıdır: ikon + ad + tek satır açıklama + tür rozeti + durum rozeti + ok. Engelli işlem listede kalır, solar, nedenini yazar.
  5. Ayrıntı paneli: başlık, açıklama, HEDEF/KAPSAM/YETKİ/TÜR ızgarası, koşullu uyarılar, seçenek formu, istek üzerine gerçek backend ile üretilen komut önizlemesi, birincil eylem.
  6. Onay penceresi özeldir: İŞLEM/HEDEF/KAPSAM/ETKİ bloğu + monospace komut + [Vazgeç] / işlem adlı düğme. Yıkıcıda odak Vazgeç'tedir.
  7. Yürütme çekmecesi: durum rozeti + işlem · hedef · süre; log kuyusu salt-okunur kanıttır. Bitiş TAMAM/HATA + süre + çıkış kodudur.
  8. Etkinlik sayfası: yalnız bu oturumun biten çalışmaları (zaman, işlem, hedef, sonuç). Sır gösterilmez.

4. Neden Bu Karar?

Operatör 3 saniyede altı soruya yanıt almalıdır: hedef ne, durumu ne, yetkim ne, ne yapabilirim, sorun var mı, bir şey çalışıyor mu? Eski sekme+tablo düzeni bu soruları form kalabalığına gömüyordu. Kabuk her soruya sabit bir yer verir; güvenlik bilgisi (kapsam, yetki, yıkıcılık) her ekranda aynı görsel dilde yinelenir.

5. Alternatifler

  • Sekmeler yerinde kalsın: reddedildi — 5 sekme + tablo, 48 işlemi ayırt edilemez kılar ve Genel Bakış'a yer bırakmaz.
  • Web/Electron kabuğu: reddedildi — çevrimdışı kurulum, sudo bf ile başlatma ve python3-tk bağımlılığı korunmalıdır.
  • Koyu tema: ertelendi — atölye ışığında açık zemin okunur; token yapısı koyu temaya hazırdır ama öncelik açık temadır.

6. Avantajlar

  • Kapsam her ekranda görünür (başlık + hedef paneli + onay penceresi).
  • Yazma işlemleri gizlenmez, kapatılır ve nedeni yazılır (yetki öğretir).
  • Tehlike stili yalnız tehlikeli eylemdedir; panel kırmızıya boyanmaz.
  • Tüm simgeler Tk canvas çizimidir: çevrimdışı, lisanssız, varlıksız.
  • Klavye: sekme sırası görsel sırayı izler, satırlar odaklanabilir, Enter çalıştırır, Esc diyalogu kapatır (yıkıcıda asla onaylamaz).

7. Dezavantajlar

  • Özel satır bileşeni ttk.Treeview yerleşik sıralamasından vazgeçer: sütun sıralaması yoktur (arama + kategori yeterlidir).
  • Ayrıntıdaki hedef satırı, seçenekli işlemlerde hedef değişince otomatik tazelenmez (girdi korunur); güncel hedef çalışma anı penceresinde gösterilir.

8. Riskler

  • Kapsam yanılgısı: parçalı denetim + başlık aynası + onaydaki kapsam şeridi üç katmanlı savunmadır; current_target() görünür kapsama göre hedef üretir (bayi metni dalgayı ezemez).
  • Eski alışkanlık: sekmeleri arayan operatör için §9.2 haritası ve Genel Bakış'taki yönlendirme metni geçişi anlatır.

9. Uygulama Planı

9.1 Kabuk iskeleti

+---------------------------------------------------------------+
| koyu bant: ürün | hedef | cihaz durumu | yetki              |
+---------------------------------------------------------------+
| şerit (salt-okunur / deneme kipi; etkinse)                    |
+---------------------------------------------------------------+
| HEDEF: [Cihaz|Dalga|Tüm filo] + bağlamsal girdi               |
+----------------+----------------------------------------------+
| kenar çubuğu   | sayfa (tarayıcı + ayrıntı / etkinlik)        |
|                +----------------------------------------------+
|                | yürütme çekmecesi (başlık + log kuyusu)      |
+---------------------------------------------------------------+
| eylem çubuğu: [birincil] neden ... durum / araçlar            |
+---------------------------------------------------------------+

9.2 Yedi ekran

  1. Genel Bakış (basit mod): 4 kart + Kur/Durum/Çıkış. Yetkisizde Kur kapalı, nedeni düğmede.
  2. Hedef seçimi: Cihaz → 8 hane doğrulamalı giriş; Dalga → salt-okunur liste (production seçilince jeton notu); Tüm filo → tehlike şeridi.
  3. İşlem tarayıcı: arama + satırlar (ikon, ad, açıklama, YIKICI / salt-okunur, açık / kapalı — sudo bf, ok). Seçili satır aksan dolgulu.
  4. Ayrıntı: meta ızgara + uyarılar + seçenekler + katlanır komut önizlemesi + birincil düğme (yıkıcıda kırmızı, engellide kapalı).
  5. Çalışma: ÇALIŞIYOR rozeti + ad + hedef + mm:ss + iptal; bitiş TAMAM/HATA + süre + çıkış kodu; kayıt Etkinlik'e düşer.
  6. Yıkıcı onay: İŞLEM/HEDEF/KAPSAM/ETKİ + filo/üretim şeridi + açık önizleme + [Vazgeç] (odak) / işlem adlı kırmızı düğme.
  7. Salt-okunur: başlık rozeti + turuncu şerit; tüm yazma düğmeleri kapalı + gerekçeli; _start_run kapıyı yeniden denetler.

9.3 Token ve yazı

Zemin --bg-app, paneller beyaz, tek koyu bant; vurgu mavisi yalnız birincil eylem + seçili satır. Başlık 22, bölüm 18, gövde 15, ikincil 13, üstveri 12, veri monospace 13. Ritim 4/8/12/16/24/32/48. Kenar çubuğu 220px, satır 44px, denetim 36px. Durum söz + renk + rozet (renk yalnız asla).

10. Test Planı

  • tests/test_bfos.py (155) ve tests/test_bfos_gui_static.py (95): pencere açmaz; katalog, kapılar, önizleme, renk aynası sözleşmeleri.
  • Canlı QA (DISPLAY=:0): /tmp/bf-qa.py geometri taraması (0 hatalı öğe), 6 sayfa × tarayıcı/ayrıntı, hedef akışları, import -window yakalamaları + Tesseract OCR metin denetimi.
  • Mutasyon kanıtı: ui_widgets.py içine renk sayesi → renk testi kırmızıya döner; geri alınır.
  • bash tests/run-all.sh 12/12; python3 -m bfos --tui duman testi.

11. Rollback

Sunum katmanıdır: bfos/ui_gui.py, bfos/ui_widgets.py, docs/33, docs/34 ve bir test iddiası değişir. Geri alma = bu dosyaları önceki sürüme döndürmek; backend, envanter ve denetim kaydı etkilenmez. Commitlenmeden çalışılır; değişiklikler çalışma ağacında durur.

12. Kontrol Listesi

  • Kabuk + Genel Bakış + hedef seçici + tarayıcı + ayrıntı + çekmece
  • Onay/jeton pencereleri (odak ve varsayılan güvenli)
  • Salt-okunur sunumu (gizleme yok, gerekçe her yerde)
  • Etkinlik sayfası (oturum içi, sırsız)
  • Token/sözdizimi aynası (tokens.css ↔ ui_theme.py) korunur
  • Türkçe metin taraması (teknik adlar dışında İngilizce yok)
  • Ekran görüntüleri (/tmp/bf-shots/r2-*, r3-*, r4-*)
  • Vision servisiyle görsel inceleme (servis 500 veriyor; OCR ile doğrulandı, insan gözüyle bakılmadı)

13. Açık Sorular

  • Koyu tema gerekli mi? (Token yapısı hazır; talep yok.)
  • Etkinlik sayfası denetim günlüğünden güvenli özet okumalı mı? (Bugün yalnız oturum içi; güvenlik garantisi değişmeden olmaz.)

Ek: Kabuk durum akışı

flowchart TD
    A[Genel Bakış] -->|Detaylı mod| B[Kenar çubuğu: 5 kategori + Etkinlik]
    B --> C[İşlem tarayıcı]
    C --> D[İşlem ayrıntısı]
    D --> E[Komut önizlemesi]
    E --> F{Onay penceresi}
    F -->|Vazgeç| D
    F -->|Onayla| G[Kapı jetonları]
    G -->|iptal| D
    G -->|tamam| H[Kesin komut onayı]
    H -->|Vazgeç| D
    H -->|Onayla| I[Yürütme çekmecesi: ÇALIŞIYOR]
    I --> J[TAMAM / HATA + Etkinlik kaydı]