Szlifowanie detali w AOC: od uciekających pikseli po bezpieczne kopie bazy SQLite

Gdy główna architektura systemu jest już gotowa, różnica między „projektem ze szkolnego tutoriala” a solidną aplikacją produkcyjną sprowadza się do detali: precyzji interfejsu, bezbłędnego działania na ekranie telefonu i całkowitej pewności, że baza danych nie rozsypie się przy robieniu kopii zapasowej.

W tym sprincie wzięliśmy na warsztat właśnie takie z pozoru drobne, ale kluczowe wyzwania w Agent Operations Center (AOC).

Problem: Drobiazgi, które psują wrażenie profesjonalnego narzędzia

W trakcie codziennej pracy z panelem wyszły na jaw trzy irytujące kwestie:

• Błąd zagubionych zadań (Cross-Board): Gdy na ekranie podsumowania kliknąłeś przycisk „Akceptuj i odblokuj” przy zadaniu z innego projektu, serwer zgłaszał błąd 404. Dlaczego? Interfejs próbował szukać zadania w bazie głównej zamiast w bazie konkretnego projektu.
• Uciekające piksele na telefonie: Znak krzyżyka × do zamykania okienek był zwykłym znakiem tekstu. Przez specyfikę czcionek na niektórych ekranach uciekał o 2 piksele w dół, wyglądając na krzywy. Dodatkowo na iPhone'ach pasek zadań chował się częściowo pod systemowym wskaźnikiem gestów i wycięciem ekranu (Dynamic Island).
• Ryzyko uszkodzenia bazy danych: Tradycyjne kopiowanie pliku bazy poleceniem cp database.db backup.db, gdy w tym samym czasie proces w tle dopisuje logi do SQLite WAL, grozi uszkodzeniem nagłówka pliku i utratą danych.

Co zrobiłem: Precyzyjny szlif od interfejsu po bazę danych

1. Precyzyjne kierowanie akcji (Routing zadań)

Naprawiłem logikę decyzyjną na frontendzie. Identyfikator nadrzędnego widoku nie ma już prawa nadpisać właściwego projektu karty. Akcja zawsze odwołuje się bezpośrednio do selectedTask.boardSlug, a interfejs natychmiast optymistycznie aktualizuje stan kafelka, zanim serwer zwróci odpowiedź. Zero błędów 404.

2. Mikro-typografia: wektory SVG zamiast kaprysów czcionek

• Zastąpiłem tekstowy znak × wektorową ikoną SVG precyzyjnie wycentrowaną we flexboxie (display: inline-flex; align-items: center; justify-content: center). Ikona wygląda identycznie na każdym monitorze i telefonie.
• Daty na kartach zadań skróciłem do czytelnego formatu względnego (15s temu, 2h temu), zabezpieczając szerokość kafelka regułą text-overflow: ellipsis. Koniec z tekstem wyjeżdżającym poza ramkę.

3. Obsługa Safe Area i Dynamic Island na iOS

Dodałem do szablonu meta tag viewport-fit=cover oraz reguły CSS wykorzystujące zmienne środowiskowe env(safe-area-inset-top) i env(safe-area-inset-bottom). Dzięki temu dolny pasek nawigacyjny i szuflada zadań zachowują idealny, bezpieczny odstęp od krawędzi ekranu na każdym nowoczesnym smartfonie.

4. Bezpieczny backup SQLite w locie bez zatrzymywania systemu

Zamiast niebezpiecznego kopiowania pliku, napisałem skrypt /usr/local/bin/aoc-hermes-backup.sh wykorzystujący natywne SQLite Online Backup API:

// Bezpieczna, nieblokująca kopia bazy w locie nawet przy intensywnym zapisie
sqlite3 /data/aoc.db ".backup /backups/aoc-snapshot.db"

// Automatyczna kontrola integralności przed spakowaniem
sqlite3 /backups/aoc-snapshot.db "PRAGMA integrity_check;"

Dopiero po pomyślnym teście spójności kopia jest kompresowana do archiwum .tar.gz, zabezpieczana uprawnieniami chmod 600 i rotowana (automatyczne usuwanie kopii starszych niż 14 dni).

Dlaczego to ważne (Use Case)

Dlaczego dopracowanie tych detali ma kluczowe znaczenie?

• Komfort i zaufanie operatora: Gdy zarządzasz rojem agentów ze smartfona w podróży, panel nie może się zacinać, przyciski muszą trafiać w palec, a zadania muszą odblokowywać się od razu.
• Bezpieczeństwo operacyjne 24/7: Boty mogą pisać kod i zapisywać logi o dowolnej porze nocy. Nocny backup wykonuje się w ułamku sekundy w tle bez blokowania bazy danych i bez ryzyka uszkodzenia danych.

Czego się nauczyłem

1. Czcionki to nie ikony: Stosowanie znaków tekstowych (np. ×) jako elementów interfejsu to częsta pułapka. Prawdziwe ikony wektorowe (SVG) dają 100% gwarancji stabilnego centrowania.
2. Kopia bazy to proces, a nie polecenie cp: SQLite w trybie WAL jest potężnym narzędziem, ale wymaga korzystania z dedykowanego API do kopii online.
3. Ergonomia mobilna decyduje o użyteczności: Projektowanie z myślą o Safe Area na urządzeniach mobilnych to w dzisiejszych czasach standard, bez którego nawet najlepszy system wygląda na niedokończony.