Login page ही असली demo है

GeekBye v1.7.5 एक हफ़्ते की ऐसी रिलीज़ है जिसकी दो शख़्सियतें हैं: 37 commits, जिनमें से 28 login page का redesign हैं — और उनमें से 25 style(login) वाली बारीक tweaks हैं, सब की सब एक ही दिन में उतरीं। यही वह रिलीज़ भी है जिसने codebase की सबसे सिखाने वाली races में से एक फ़िक्स की। दोनों कहानियाँ सुनाने लायक़ हैं, और दोनों एक ही ख़याल पर मिलती हैं: login page वह पहली चीज़ है जो बिना sign-in वाला user देखता है, तो बेहतर है कि वह product ख़ुद हो, उसकी तस्वीर नहीं।

एक screenshot, कोई पाँच घंटे के लिए

redesign की शुरुआत रिवायती अंदाज़ में हुई। layout दो columns में बाँटो, sign-in बाईं तरफ़, और दाईं तरफ़ product दिखाओ — एक image के तौर पर। सुबह देर के commits ठीक यही करते हैं: 11:57 पर एक असली preview screenshot repo में उतरता है, 114 KB की PNG, और छह minute बाद एक बार update होता है।

17:04 तक वह ग़ायब था। मोड़ वाला commit static image की जगह 344 lines के असली components रख देता है — एक LoginDemo panel, आठ छोटे टुकड़ों से जुड़ा हुआ, जो असल overlay UI की हूबहू नक़ल करते हैं: धड़कती EQ bars और stop button वाली recording nav pill, Chat/Transcript tabs वाला chat panel, render किया हुआ assistant का जवाब (मौक़े के मुताबिक़, React के useEffect की व्याख्या), "Tell me more / Simplify / Show example" वाले quick actions, live-prompt row, और ⌘⏎ वाला Assist input।

"demo" शब्द पर ज़रा सटीक हो लें, क्योंकि बढ़ा-चढ़ाकर दावा करना आसान है: buttons में असली hover states हैं — glows, shimmers, transitions — पर click से कुछ भी जुड़ा नहीं है, और input read-only है। यह sandbox नहीं है। यह जो है, वह है product की असल UI शब्दावली, live render की हुई: वही logo asset, वही gradient-border और backdrop-blur वाला treatment, वही productName import जो white-label system इस्तेमाल करता है — इसलिए यह demo इस codebase से बनने वाले हर product के लिए अपने आप rebrand हो जाता है। screenshot इनमें से कुछ भी नहीं कर सकता। screenshot जिस दिन लिया जाता है उसी दिन पुराना हो जाता है, ग़लत display पर धुँधला दिखता है, और हमेशा के लिए उसी product की मुहर लिए रहता है जो आपने संयोग से capture किया था। components हर DPI पर crisp हैं, हमेशा current हैं, और हर brand के लिए सही — क्योंकि वे design system की तस्वीर नहीं हैं, वे design system ख़ुद हैं।

वैसे, delete हुई PNG release tag पर अब भी repo में पड़ी है — लावारिस, किसी reference के बिना। हर codebase में हारे हुए तरीक़े की ऐसी कुछ निशानियाँ पड़ी ही रहती हैं।

एक दिन में 25 style commits कैसे दिखते हैं

उस अकेले दिन का commit log किसी designer की rough copy है, जो ग़ैर-मामूली ईमानदारी से सँभालकर रखी गई है। column ratio पहले 40/60 गया, फिर 45/55। platform logos के ऊपर एक "Works with" label दोपहर में जुड़ा, इधर-उधर खिसकाया गया, और हटा दिया गया — कोई आधा दिन जिया। platform-logo row ख़ुद (Google Meet, Teams, Zoom, Slack, Webex), जो सुबह 10:59 पर जुड़ी थी, उसी रात 22:08 पर पूरी की पूरी delete कर दी गई। और footer को सीधा बैठाने में चार तरीक़ों की लंबी कहानी लगी: पहले एक अकेला wrapper container, फिर centering classes हटाना, फिर flexbox centering, फिर बस उसे नीचे की तरफ़ थोड़ा और सरका देना।

इसे बेकार की उठा-पटक पढ़ना आसान होगा। हम इसे design के काम की असल शक्ल की तरह पढ़ते हैं: render करो, देखो, ठीक करो — और यही जब आप एक squashed "redesign login page" की जगह 25 छोटे commits में करते हैं, तो पूरी खोज ख़ुद history में दर्ज हो जाती है। जब कोई पूछे "क्या हमने कभी logo row try नहीं की थी?", तो जवाब history में है, timestamps समेत।

वह user जो OCR से तेज़ निकला

इस रिलीज़ की engineering कहानी पाँच दिन पहले घटी, तीन commits की एक fix chain में। v1.5.12 से, Cmd+H दबाने पर screenshot instant feedback के साथ queue होता है: thumbnail queue में फ़ौरन दिख जाता है, और text extraction — local Apple Vision OCR, कोई एक से दो seconds — background में चलती है। queue event सचमुच ocrText: '' लेकर निकलता है, साथ में एक comment जो वादा करता है कि यह बाद में भर जाएगा।

यह एक अच्छी optimization है, और इसने एक race पैदा कर दी। तेज़ हाथ वाला user Cmd+H दबाता है और फ़ौरन अपना सवाल submit कर देता है। screenshot का text field अभी ख़ाली है। request बिना किसी screen content के निकल जाती है, और model जवाब देता है — सच-सच, और खीझ दिलाने वाले अंदाज़ में — "I cannot see images" (मुझे images नहीं दिख रहीं)। भोला-भाला path किसी error से fail नहीं हुआ; वह ग़लत सवाल के सही जवाब से fail हुआ — और software के fail होने का इससे ज़्यादा confuse करने वाला तरीक़ा कोई नहीं।

फ़िक्स submit path को उसी async काम पर रोकता है जो optimization ने टाला था: अगर queue में पड़े किसी भी screenshot का OCR text अभी ख़ाली है, तो request रुक जाती है और UI "Reading screen..." (screen पढ़ी जा रही है) indicator दिखाता है; text उतरते ही एक useEffect fire होता है और पूरा extracted content लेकर request भेज देता है। diff में React के दो ऐसे details हैं जो चुरा लेने लायक़ हैं: screenshot queue को एक ref में mirror किया गया है जो render के दौरान sync होता है, क्योंकि event-handler की closure chain पुराना state पकड़े बैठी थी; और रुकी हुई request generic queued-request hook से नहीं, सीधे भेजी जाती है — वजह वही stale closure।

और commit message में ही एक ईमानदार मोड़ दर्ज है: इस race का पीछा करने के लिए जोड़े गए tracing logs ने backend पर एक दूसरा bug खोल दिया — एक code path में prompt assembly screenshot का text पूरा का पूरा गिरा रही थी। एक symptom, दो bugs — पूरी chain को instrument करके और यह देखकर पकड़े गए कि text कहाँ ग़ायब होता है। chain का अंत एक product decision पर हुआ, race फ़िक्स के नौ minute बाद: Cmd+H screenshots को batch analysis के लिए queue करता है, जबकि Cmd+Enter हमेशा मौजूदा screen का ताज़ा capture लेता है — एक धुँधले workflow की जगह दो साफ़-साफ़ workflows। (Cmd+Enter का Assist असल में क्या करता है, वह अपनी अलग post है: जो भी आप देख रहे हैं उस पर instant AI मदद।)

उसी हफ़्ते की एक छोटी बात, white-label वाले अध्याय के पाठकों के लिए: Product/version (platform) वाले User-Agent को dev-mode फ़िक्स मिला, क्योंकि unpackaged Electron में app.getVersion() product का नहीं, Electron का version लौटाता है। identity strings, हमेशा की तरह, plumbing में से रिसती हैं।

तीन बातें जो इस रिलीज़ ने हमें सिखाईं

1. product को render करो, उसकी photo मत खींचो। असली components से बना login-page demo अपने आप rebrand होता है, हर display density झेल जाता है, और पुराना पड़ ही नहीं सकता। screenshot वाला तरीक़ा आज़माया गया और एक working day के अंदर delete हो गया — सस्ता experiment, साफ़ फ़ैसला।
2. हर async optimization को इस्तेमाल की जगह पर एक रोक चाहिए। "ख़ाली OCR text के साथ instant feedback" UX के लिहाज़ से सही फ़ैसला था, पर submit path को उस चीज़ का इंतज़ार करना सीखना पड़ा जो optimization ने टाली थी। अगर आप कोई काम टालते हैं, तो उसके result के हर consumer को ढूँढो और उसे "empty" और "अभी ready नहीं" का फ़र्क़ सिखाओ।
3. शक़ वाली जगह नहीं, पूरी chain को instrument करो। tracing logs ने screenshot के text का सिरे से आख़िर तक पीछा किया — shortcut handler से IPC से API client तक — और इसीलिए एक जाँच ने दो bugs बंद किए, जिनमें से एक network के उस पार था।

v1 कहानी के पिछले अध्याय के लिए देखें ऐसी meetings जो सच में दोबारा मिल जाएँ (v1.7.3); और पूरे चाप के लिए, सॉफ़्टवेयर को परिपूर्णता तक पहुँचाकर भेजने की शारीर-रचना।