Login-siden ER demoen

GeekBye v1.7.5 er en én-uges release med splittet personlighed: 37 commits, hvoraf 28 er et login-side-redesign — og 25 af dem er style(login)-mikrojusteringer, alle landet på en enkelt dag. Det er også releasen, der fixede et af de mest lærerige races i kodebasen. Begge historier er værd at fortælle, og de mødes i den samme idé: login-siden er det første, en uautentificeret bruger ser, så den må hellere være produktet, ikke et billede af det.

Et screenshot, i cirka fem timer

Redesignet begyndte konventionelt. Omstrukturér til to kolonner, sæt login til venstre, og vis produktet til højre — som et billede. Formiddagens commits gør præcis det: klokken 11:57 lander et rigtigt preview-screenshot i repoet, en PNG på 114 KB, og bliver opdateret én gang seks minutter senere.

Klokken 17:04 var det væk. Pivot-committen erstatter det statiske billede med 344 linjer rigtige komponenter — et LoginDemo-panel samlet af otte små dele, der replikerer det faktiske overlay-UI: optagelsens nav-pille med sine pulserende EQ-bjælker og stopknap, chatpanelet med Chat/Transcript-faner, et renderet assistentsvar (der, passende nok, forklarer Reacts useEffect), hurtighandlingerne "Tell me more / Simplify / Show example", live-prompt-rækken og ⌘⏎ Assist-inputtet.

Lad os være præcise med ordet "demo", for det er let at love for meget: knapperne har rigtige hover-states — glød, skimmer, transitions — men intet er koblet til klik, og inputfeltet er skrivebeskyttet. Det er ikke en sandkasse. Hvad det er, er produktets faktiske UI-ordforråd renderet live: samme logofil, samme gradient-border- og backdrop-blur-behandling, samme productName-import som white-label-systemet bruger — så demoen rebrander sig automatisk for hvert produkt, der bygges fra denne kodebase. Et screenshot kan ikke noget af det. Et screenshot er forældet den dag, du tager det, sløret på den forkerte skærm og permanent brandet som det produkt, du tilfældigvis fangede. Komponenter er skarpe ved enhver DPI, altid aktuelle og korrekte for hvert brand — for de er ikke et billede af designsystemet, de er designsystemet.

Den slettede PNG ligger i øvrigt stadig i repoet ved release-tagget — forældreløs, refereret af ingenting. Enhver kodebase bærer et par fossiler af den tilgang, der tabte.

Hvordan 25 style-commits på én dag ser ud

Commit-loggen fra den ene dag er en designers skitsebog, bevaret med usædvanlig ærlighed. Kolonneforholdet gik 40/60, så 45/55. En "Works with"-label (virker med) over platformlogoerne blev tilføjet midt på dagen, flyttet og fjernet — den levede cirka en halv dag. Selve platformlogo-rækken (Google Meet, Teams, Zoom, Slack, Webex), tilføjet 10:59 om formiddagen, blev slettet fuldstændigt 22:08 samme aften. Og footeren krævede en saga i fire tilgange for at komme på plads: én wrapper-container, så fjernelse af centreringsklasserne, så flexbox-centrering, så bare at nudge den tættere på bunden.

Det ville være let at læse som spildt arbejde. Vi læser det som designarbejdets faktiske form: du konvergerer ved at rendere, kigge og justere — og at gøre det i 25 små commits i stedet for én squashet "redesign login page" betyder, at selve søgningen er dokumenteret. Når nogen spørger "prøvede vi ikke en logorække engang?", ligger svaret i historikken, med tidsstempler.

Brugeren der var hurtigere end OCR-en

Releasens engineering-historie skete fem dage tidligere, i en fix-kæde på tre commits. Siden v1.5.12 sætter et tryk på Cmd+H et screenshot i kø med øjeblikkelig feedback: thumbnailen dukker op i køen med det samme, og tekstudtrækningen — lokal Apple Vision-OCR, cirka ~1-2 sekunder — kører i baggrunden. Kø-eventet shippes bogstaveligt talt med ocrText: '' og en kommentar, der lover, at den bliver udfyldt senere.

Det er en god optimering, og den udmøntede et race. En hurtig bruger trykker Cmd+H og sender straks sit spørgsmål. Screenshottets tekstfelt er stadig tomt. Requesten går ud uden skærmindhold, og modellen svarer — sandfærdigt, rasende irriterende — "I cannot see images" (jeg kan ikke se billeder). Den naive sti fejlede ikke med en fejl; den fejlede med et korrekt svar på det forkerte spørgsmål, hvilket er den mest forvirrende måde, software kan fejle på.

Fixet spærrer send-stien på det async-arbejde, optimeringen udskød: hvis et screenshot i køen stadig har tom OCR-tekst, parkeres requesten, og UI-en viser en "Reading screen..."-indikator (læser skærmen); en useEffect fyrer i det øjeblik, teksten lander, og sender requesten med det fulde udtrukne indhold. To React-specifikke detaljer i diffen er værd at stjæle: screenshot-køen spejles ind i en ref, der synkes under render, fordi event-handlernes closure-kæde fangede forældet state; og den parkerede request sendes direkte i stedet for gennem det generiske queued-request-hook, af samme stale-closure-grund.

Og der er en ærlig krølle dokumenteret direkte i commit-beskeden: de tracing-logs, der blev tilføjet for at jage dette race, afslørede en anden bug på backend — prompt-samlingen droppede screenshot-teksten fuldstændigt i én kodesti. Ét symptom, to bugs, fundet ved at instrumentere hele kæden og se, hvor teksten forsvandt. Kæden endte med en produktbeslutning, ni minutter efter race-fixet: Cmd+H sætter screenshots i kø til batch-analyse, mens Cmd+Enter altid tager en frisk optagelse af den aktuelle skærm — to distinkte workflows i stedet for ét tvetydigt. (Hvad Cmd+Enters Assist faktisk gør, er sit eget indlæg: øjeblikkelig AI-hjælp til hvad end du kigger på.)

En lille coda fra samme uge, til læsere af white-label-kapitlet: Product/version (platform)-User-Agenten fik et dev-mode-fix, fordi app.getVersion() i upakket Electron returnerer Electrons version, ikke produktets. Identitetsstrenge lækker, som altid, i rørføringen.

Tre ting denne release lærte os

1. Render produktet, lad være med at fotografere det. En login-side-demo bygget af rigtige komponenter auto-rebrander sig, overlever enhver skærmtæthed og kan ikke glide bagud. Screenshot-tilgangen blev prøvet og slettet inden for én arbejdsdag — billigt eksperiment, klar dom.
2. Enhver async-optimering har brug for en spærre ved anvendelsespunktet. "Øjeblikkelig feedback med tom OCR-tekst" var det rigtige UX-valg, men send-stien måtte lære at vente på det, optimeringen udskød. Hvis du udskyder arbejde, så find enhver forbruger af dets resultat og lær den forskellen mellem "tom" og "ikke klar endnu".
3. Instrumentér kæden, ikke den mistænkte. Tracing-loggene fulgte screenshot-teksten fra ende til anden — genvejshandler til IPC til API-klient — og det er derfor, én efterforskning lukkede to bugs, hvoraf den ene lå på den anden side af netværket.

For det forrige kapitel i v1-historien, møder du faktisk kan finde igen (v1.7.3); og for hele buen, anatomien i at shippe software til perfektion.