Login stránka JE to demo

GeekBye v1.7.5 je týdenní vydání s rozdvojenou osobností: 37 commitů, z nichž 28 je redesign login stránky — a 25 z nich jsou mikroúpravy style(login), všechny doručené během jediného dne. Je to zároveň vydání, které opravilo jeden z nejpoučnějších soubojů v celé codebase. Oba příběhy stojí za vyprávění a potkávají se v téže myšlence: login stránka je první věc, kterou nepřihlášený uživatel vidí, takže ať radši je produktem, a ne jeho obrázkem.

Screenshot, asi na pět hodin

Redesign začal konvenčně. Přeskládat do dvou sloupců, přihlášení doleva a produkt ukázat vpravo — jako obrázek. Dopolednější commity dělají přesně tohle: v 11:57 přistává v repu skutečný preview screenshot, PNG o 114 KB, a o šest minut později je jednou aktualizován.

V 17:04 byl pryč. Commit obratu nahrazuje statický obrázek 344 řádky skutečných komponent — panelem LoginDemo složeným z osmi malých dílků, které replikují skutečné overlay UI: navigační pill nahrávání s pulzujícími EQ proužky a tlačítkem stop, chat panel se záložkami Chat/Transcript, vyrenderovaná odpověď asistenta (příhodně vysvětlující useEffect z Reactu), rychlé akce „Tell me more / Simplify / Show example" (řekni mi víc / zjednoduš / ukaž příklad), řádek živých promptů a vstup Assist s ⌘⏎.

Buďme přesní se slovem „demo", protože je snadné slibovat víc, než je pravda: tlačítka mají skutečné hover stavy — záře, třpyty, přechody — ale nic není napojené na klik a vstupní pole je read-only. Není to sandbox. Co to ale je, je skutečný UI slovník produktu vyrenderovaný naživo: stejný asset loga, stejné zpracování gradient-border a backdrop-blur, stejný import productName, který používá white-label systém — takže se demo samo rebranduje pro každý produkt postavený z této codebase. Screenshot nic z toho neumí. Screenshot je zastaralý v den, kdy ho pořídíte, rozmazaný na špatném displeji a navždy obrandovaný jako ten produkt, který jste zrovna náhodou zachytili. Komponenty jsou ostré při jakémkoli DPI, vždy aktuální a správné pro každou značku — protože nejsou obrázkem design systému, ony jsou design systém.

Smazané PNG je mimochodem u release tagu pořád v repu — osiřelé, nic na něj neodkazuje. Každá codebase nese pár fosilií přístupu, který prohrál.

Jak vypadá 25 stylovacích commitů za jeden den

Commit log toho jediného dne je skicář designéra, uchovaný s nezvyklou poctivostí. Poměr sloupců šel na 40/60, pak na 45/55. Popisek „Works with" (funguje s) nad logy platforem přibyl v poledne, byl přemístěn a odstraněn — žil zhruba půl dne. Samotný řádek log platforem (Google Meet, Teams, Zoom, Slack, Webex), přidaný v 10:59 dopoledne, byl ve 22:08 téhož večera celý smazán. A footer si vyžádal ságu o čtyřech přístupech, než se zarovnal: jediný wrapper kontejner, pak odstranění centrovacích tříd, pak centrování flexboxem, pak prostě posunutí blíž ke spodnímu okraji.

Bylo by snadné to číst jako zmatkování. My to čteme jako skutečný tvar designérské práce: konvergujete tím, že renderujete, díváte se a upravujete — a dělat to ve 25 malých commitech místo jednoho squashnutého „redesign login page" znamená, že samo hledání zůstává zaznamenané. Když se někdo zeptá „nezkoušeli jsme jednou řádek s logy?", odpověď je v historii, i s časovými razítky.

Uživatel, který byl rychlejší než OCR

Inženýrský příběh vydání se odehrál o pět dní dřív, v řetězu tří opravných commitů. Od v1.5.12 stisknutí Cmd+H zařadí screenshot do fronty s okamžitou zpětnou vazbou: náhled se ve frontě objeví hned a extrakce textu — lokální OCR přes Apple Vision, zhruba ~1-2 sekundy — běží na pozadí. Událost fronty doslova odchází s ocrText: '' a komentářem slibujícím, že se doplní později.

Je to dobrá optimalizace a vyrazila jeden souboj. Rychlý uživatel stiskne Cmd+H a hned odešle svou otázku. Textové pole screenshotu je pořád prázdné. Požadavek odchází bez jakéhokoli obsahu obrazovky a model odpovídá — pravdivě, k vzteku — „I cannot see images" (nevidím obrázky). Naivní cesta neselhala chybou; selhala správnou odpovědí na špatnou otázku, což je nejmatoucnější způsob, jakým software může selhat.

Oprava blokuje cestu odeslání na async práci, kterou optimalizace odložila: pokud má nějaký screenshot ve frontě pořád prázdný OCR text, požadavek zaparkuje a UI ukáže indikátor „Reading screen..." (čte obrazovku...); useEffect se spustí v okamžiku, kdy text dorazí, a odešle požadavek s plným extrahovaným obsahem. Dva React-specifické detaily v diffu stojí za ukradení: fronta screenshotů se zrcadlí do refu synchronizovaného během renderu, protože řetěz closures event handlerů zachytával zastaralý stav; a zaparkovaný požadavek se odesílá přímo, ne přes generický hook pro požadavky ve frontě — ze stejného stale-closure důvodu.

A přímo v commit message je zaznamenaný jeden poctivý háček: tracing logy přidané k lovu tohoto souboje odhalily druhou chybu na backendu — skládání promptu v jedné z cest kódu úplně zahazovalo text screenshotu. Jeden symptom, dvě chyby, nalezené instrumentací celého řetězu a sledováním, kde text mizí. Řetěz skončil produktovým rozhodnutím, devět minut po opravě souboje: Cmd+H řadí screenshoty do fronty pro dávkovou analýzu, zatímco Cmd+Enter vždy pořídí čerstvý snímek aktuální obrazovky — dva odlišné workflow místo jednoho dvojznačného. (Co doopravdy dělá Assist na Cmd+Enter, je samostatný článek: okamžitá AI pomoc s čímkoli, na co se právě díváte.)

Jedna malá coda z téhož týdne, pro čtenáře kapitoly o white-labelu: User-Agent Product/version (platform) dostal opravu pro dev režim, protože app.getVersion() v nezabaleném Electronu vrací verzi Electronu, ne produktu. Identitní řetězce, jako vždy, prosakují potrubím.

Tři věci, které nás toto vydání naučilo

1. Renderujte produkt, nefoťte ho. Demo na login stránce postavené ze skutečných komponent se automaticky rebranduje, přežije jakoukoli hustotu displeje a nemůže zastarat. Přístup se screenshotem byl vyzkoušen a smazán během jednoho pracovního dne — levný experiment, jasný verdikt.
2. Každá asynchronní optimalizace potřebuje bránu v místě použití. „Okamžitá zpětná vazba s prázdným OCR textem" bylo správné UX rozhodnutí, ale cesta odeslání se musela naučit počkat na to, co optimalizace odložila. Když odkládáte práci, najděte každého konzumenta jejího výsledku a naučte ho rozdíl mezi „prázdné" a „ještě není hotové".
3. Instrumentujte řetěz, ne podezřelého. Tracing logy sledovaly text screenshotu od začátku do konce — od shortcut handleru přes IPC po API klienta — a proto jedno vyšetřování uzavřelo dvě chyby, jednu z nich na druhé straně sítě.

Předchozí kapitolu příběhu v1 najdete ve schůzkách, které zase najdete (v1.7.3); a celý oblouk v anatomii dodávání softwaru k dokonalosti.