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

182 lines
8.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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
```text
+---------------------------------------------------------------+
| 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
- [x] Kabuk + Genel Bakış + hedef seçici + tarayıcı + ayrıntı + çekmece
- [x] Onay/jeton pencereleri (odak ve varsayılan güvenli)
- [x] Salt-okunur sunumu (gizleme yok, gerekçe her yerde)
- [x] Etkinlik sayfası (oturum içi, sırsız)
- [x] Token/sözdizimi aynası (`tokens.css` ↔ `ui_theme.py`) korunur
- [x] Türkçe metin taraması (teknik adlar dışında İngilizce yok)
- [x] 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ışı
```mermaid
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ı]
```