V1.5 · Latest
2026-06-05
Grok Organize, real X OAuth, and pixel-exact x.com.
The version that built the actual feature. Grok Organize shipped end to end: a real one-click X OAuth 2.0 PKCE connect, the bookmarks endpoint with pagination and token refresh, themed clustering, a second-brain chat, drag-and-drop, notes, and a weekly digest. The prototype became a near pixel-exact x.com/home: the real verified badge, the exact current left bar (Chat, SuperGrok, Premium+, Articles), the slash-circle Grok logo, the working Thread Synthesizer, and X's Chirp typography. The narrative chrome adopted grok.com's design language, avatars became mesh-gradient pfps, and a portal-ready X-API use-cases doc landed.
- /organize the flagship app, plus /bookmarks, both on the real connect backend
- Real OAuth via api/auth/start, callback, logout, and the upgraded x-bookmarks (cookie token, /users/me, pagination, refresh)
- x.com fidelity verified badge, left bar, slash-circle logo, synthesizer, Premium card, Chirp font stack
- grok.com chrome on index/more/about/breakdown/docs, with the ask composer on the index
- Mesh-gradient pfps with monogram initials, plus image/video media cards
- USE_CASES.md the complete X data and API description, portal-ready
V1.4
2026-05-26
Real-time data layer. WCAG sign-off. PRD doc.
The version that closed the loop. Three remaining boxes from the V1.3 wishlist all shipped: the X API bearer-token Edge Function reached production-quality, deep-link anchors landed on every section and tile, and the WCAG 2.1 AA audit signed off across all 17 pages with zero outstanding remediation. The prototype now feels alive: a live game ticker with a pause button (A11y compliant), breaking-posts pill that streams Game 2 updates after 22 seconds, prediction-market prices drifting every 8s with green/red tick animations.
- Edge Function /api/x-feed now supports per-topic queries, a diag endpoint that reports bearer-token state without burning quota, rate-limit detection via X-Rate-Limit-* headers, and a richer 4-post mock fallback
- Live ticker with aria-pressed pause button, prefers-reduced-motion respected as default-off, role="status" + aria-live="polite"
- Deep-link anchors with copy-link buttons on 10 breakdown sections, 1,000 variant tiles, 1,000 proto-variant tiles. Hash-on-load scroll + pulse highlight on every target
- A11Y_AUDIT.md covering all 50 normative SCs for WCAG 2.1 AA across 17 pages
- PRD.md with goals, six insertions, success metrics, five-phase rollout, risks + mitigations
- Favicon + OG card refreshed to match the corner Grok button proportions; OG mini-phone now shows the live ticker bar
Definition of done: 11 of 11
Live at a memorable subdomain. Working prototype. Real-time data layer. Three-column X fidelity. Six insertions explained. 1,000 variants. About page tailored. Master file. PRD doc. Live X API path wired. Deep-link anchors. Formal a11y audit. The case study is shippable.
Try the working prototype →
V1.3
2026-05-21
1,000 prototype configurations. UX research applied.
V1.3 was about self-criticism turned into action. I ran a 5-persona UX research pass on my own site (Power User, Confused Novice, Skeptic, Hacker, Champion) and then implemented the recommendations instead of just publishing them. The nav collapsed from 7 items to 5. The "Let's talk" CTA appeared on the about page. The 90-day plan moved above the fold. Direct name-tagging of xAI design leads softened to structural references.
- RESEARCH.md with brutal 5-persona critique applied
- 1,000 prototype configurations at /proto-variants, density × theme × sidebar × topic × time, 5 winners, ~50 killed, Today's pick rotates daily
- more.html deep-dive index aggregating every secondary page with time-to-read labels
- LATEST_2026-05-21.md master file with the 5-min path + 20-min path
- FEEDBACK.md capturing verbatim critique from a real user on an adjacent project, applied via the "flip the script" principle
Cut: "Built by David T Phung" attribution chip on every doc card. Research called it ad-chrome and it was right.
V1.2
2026-05-20
Real May 2026 data. Inline hero demo.
V1.2 traded plausible synthetic data for real public data anchored to the week of the build. NBA Western Conference Finals Game 2 between the Spurs and Thunder. LA Mayor primary 13 days out per the UCLA Luskin poll. Polymarket and Kalshi odds where they actually were on May 20. The index hero gained an inline mini-phone demo that loops the corner Grok button highlighting and the tooltip menu opening, visible above the fold without scrolling.
- Real-2026 data refresh across every page: WCF Game 2 (Spurs lead 1-0, Game 1 was 122-115 2OT in OKC), LA Mayor poll (Bass 25 / Pratt 11 / Raman 9, 40% undecided), live market odds
- Inline hero mini-phone on the index page, 320px X-faithful phone playing a 3.4s loop of the corner Grok button + tooltip menu
- Live · May 21, 2026 pulsing green-dot indicator in the eyebrow row
- Scroll-reveal animations on doc cards, principles, insertions, meta-strip cells (40ms stagger, IntersectionObserver, 12% threshold)
- Section dividers upgraded from hard 1px lines to gradient lines
V1.1
2026-05-17
The corner Grok button. Matching what X shipped.
Mid-May, X shipped a corner Grok button on every post: a small circular glyph in the post header that opens a tooltip menu with Summarize / Is this true? / Explain / Open in Grok. The case study's original "Ask Grok" pill below the post body was instantly obsolete. V1.1 was a same-day rewrite to make the prototype match what X shipped, not as a copy, but as the foundation the rest of the proposal builds on. The corner button is the anchor; everything else (Claim-Context Chip, Synthesizer, Co-Writer, Tune, Connectors) layers on top.
- Corner Grok button on every post in the post header, sibling to the three-dot overflow menu
- Tooltip menu opens on tap with four quick actions
- Custom Grok glyph, the angular G stroke became the brand mark across favicon, OG card, and the corner button (same proportions everywhere)
- 1,000 Grok-affordance variants generated procedurally; 5 curated winners, 12 killed, daily rotation for Today's pick
- Liveline-style breakdown page with sticky TOC and 8 themed sections, each with a moving demo
Cut: The Ø "circle-slash" Grok glyph from V1.0. Tested with real readers as the design language firmed up; consistently read as "blocked" or "no entry." Replaced with the angular stroked G.
V1.0
2026-05-12
First public deploy. The thesis lands.
V1.0 was the first version that argued the full thesis from one page: Grok shouldn't be a tab. It should be a layer. Six insertions, one monochrome system, zero new tabs. The prototype was clickable but feature-light. The spec doc was the longest piece, deliberately, because the layout was a constraint and the argument had to do the heavy lifting.
- index.html case study cover with the full thesis
- prototype.html first clickable demo with Ask Grok rows
- SPEC.md product spec: thesis, audience, principles, six insertions, risks, metrics, rollout
- PROCESS.md what I killed, what I tightened
- 1,000 variants design-space explorer (the original, before V1.1's affordance refresh)
- Deploy on Vercel · domain registered · GitHub repo created (private)