Search-To-Pick Sprint — Visual Screens

build-ui-screens · branch search-to-pick-sprint-ui · parent flow first-pick-speed · topic draft-stonk · confirmed · 2026-07-07

What this page reviews. The four screen states (S1–S4) of the approved Search-To-Pick Sprint UI branch, built as an ordered four-batch element loop on local/mock fixture data, plus the build ledger, fake-data boundary, deferred infrastructure, and the downstream handoff gate. Screens are visual only — not yet clickable; wiring is /logic-wiring's job.

Review complete — all four gates answered. Branch-fidelity (four states match the packet), ledger (record all four build_ledger[] entries as minimum-ui-reached), boundary (no production infrastructure leaked in), and destination (write ledger/back-pointers, route to /user-flow-map --prototype-build-plan draft-stonk) are all approved. The build_ledger[] / experiment_path / review_evidence back-pointers are now recorded in design/flow-tree-draft-stonk.yaml and this page is confirmed.

Deliverable file: experiments/search-to-pick-sprint/search-to-pick-sprint-ui/index.html — open it for the full-fidelity render

1 · Approved UI branch

Section feedback:

This build serves the branch approved at decision ui-interview-search-to-pick-sprint-approve (2026-07-03). Source of truth: design/ui-search-to-pick-sprint.md (§7 route map, §9 page anatomy, §17 batch plan).

State	Name	Purpose	Logical trigger
S1	Quick Draft Search Start	Turn a market take into a first pick fast.	`StartQuickDraft`
S2	Search Results	Recognize & select a stock choice.	`SearchStockUniverse`
S3	Selected-Stock Preview	Confirm the pick without implying a trade.	row select
S4	First Pick Recorded + Board Preview	Prove the pick counted; continue the draft.	`MakeStockPick → FirstPickRecorded → GetDraftBoardPreview`

Do these screens realize the approved Search-To-Pick Sprint branch (S1–S4, per §9/§17)?

Yes — the four states match the approved packet; proceed. No — a state is missing or wrong (explain below); rework before ledger writes. Other / None of the above Need clarification

Section feedback:

2 · First-value journey

Section feedback:

First-value moment: the user makes the first valid stock pick and sees it recorded in draft slot 1.
Primary task path: Start quick draft → search a recognizable company/ticker → select → Make fantasy pick → pick recorded, bots on the clock.
Entry route: /experiments/search-to-pick-sprint (one continuous surface, four states — not four routes).
Exit / success state: S4 board preview with slot 1 filled and the next bot turn visible. Deliberately stops before standings and share.
First clickable journey (for wiring): load → type app → select Apple (AAPL) → Make fantasy pick → AAPL in slot 1 with bots on the clock.

3 · The screens preview · this is a mock, not production

Section feedback:

Showing all four states. Rendered inline; no wiring — buttons here only switch the preview view.

S1 · Quick Draft Search Start · batch 1

📈Draft Stonk

No money · No prizes

Draft a stock like a fantasy pick.

Pick a company for a no-money game draft. No brokerage, no prizes, no advice.

🔍Search a company or ticker

Prototype stock list — local/mock data for gameplay.

Have a company in mind?

AppleNVDA

How it works▾

S2 · Search Results · batch 2

📈Draft Stonk

No money · No prizes

🔍app|✕

Prototype stock list — local/mock data.

AAP

Apple

AAPL

Available

SNO

Snowflake

SNOW

Available

APP

AppLovin

APP

Taken

DBX

Dropbox

DBX

Unavail.

Browse recognizable stocks

S3 · Selected-Stock Preview · batch 3

📈Draft Stonk

No money · No prizes

‹ Back to results

AAP

Apple

AAPL

Available to draft

◆You're making a game pick — not a trade or recommendation.

Prototype stock list — local/mock data.

Make fantasy pick

Choose another stock

S4 · Recorded + Board Preview · batch 4

📈Draft Stonk

No money · No prizes

✓

First pick recorded.

Your pick is in. The bots draft next.

Draft boardRound 1 of 5 · 7 left

You·1AAP

Apple

AAPL

Bot A·2On the clock…Drafting

Bot B·3Up next

Bot C·4Up next

Game picks only · no money · no prizes · mock data

The deliverable file also renders the canonical state variants (taken / unavailable / data-issue rows, no-results recovery, duplicate & not-your-turn blocked states, loading, and the expanded “How it works”).

4 · Batch plan & build ledger

Section feedback:

Built one flow-step batch at a time, each layered on the prior screens, with a per-batch visual checkpoint and the minimum-UI stop rule applied. The ledger below is now recorded in ui_experiments[].build_ledger[] (see design/flow-tree-draft-stonk.yaml), all four entries at minimum-ui-reached.

Batch / flow step	Elements added	Minimum-UI stop	Status
Batch 1 — S1 Search Start	shell strip, trust chip, game-frame headline + support, dominant search input, data-posture label, empty-state helper (2 example chips), browse-fallback entry, “How it works” disclosure	Search dominates the first viewport; the take-to-pick intent reads.	minimum-ui-reached
Batch 2 — S2 Search Results	canonical result row + 4 availability variants (available / taken / unavailable / data-issue), inline results list, clear-search (✕), no-results recovery, browse-fallback	A recognizable choice can be picked out; blocked rows read as blocked.	minimum-ui-reached
Batch 3 — S3 Selected Preview	selected-stock card (monogram + name + ticker), availability status, repeated pick-not-trade line, data label, primary “Make fantasy pick”, blocked-state variants (duplicate/taken, not-your-turn), “Choose another stock”	Confirming reads as a game pick, not a trade.	minimum-ui-reached
Batch 4 — S4 Recorded + Board	success confirmation, draft-order strip with filled slot 1, next-turn indicator (bot on the clock), remaining-count (Round 1 of 5 · 7 left), bot-continuation “Bots drafting…” state, repeated trust + data label	Pick clearly counted; continuation feels natural. Stops before standings/share.	minimum-ui-reached

Acceptance bar: the flow's moments read as real end-to-end on fixtures — met. Lifecycle: minimum-ui-reached here; /logic-wiring advances each entry to wired.

Accept the four-batch build ledger and the minimum-UI stop per batch?

Yes — record all four build_ledger[] entries as minimum-ui-reached. No — a batch over/under-built (explain); adjust before recording. Other / None of the above Need clarification

5 · Fake-data boundary

Section feedback:

Data: a small local/mock stock universe (name, ticker, availability). No live market data, no prices-as-signal (neutral text only if ever shown).
Visually mocked, not implemented: bot pick continuation (a short “Bots drafting…” state); draft-session state (in-memory/local prototype only).
Persistent labels: a data-posture line (“Prototype stock list — local/mock data”) and the trust chip stay visible near the action across S1–S4.
Not interactive yet: these screens are static renders; navigation and state transitions are deferred to /logic-wiring.

6 · Deferred infrastructure out of scope for this build

Section feedback:

None of the following are represented as functional. They remain deferred until UAT evidence promotes the branch:

Accounts / auth, database or durable storage, multi-tenancy.
Brokerage / live market-data feeds, real prices, payments.
Analytics / production observability, deployment automation.
Standings / equal-dollar scoring, and share/invite backends (belong to sibling branches equal-dollar-standings and replay-share-invite).

Evidence required before promoting any deferred infra: UAT signal that search-first reaches a recorded first pick fast, that users read it as a pick not a trade, and that the board preview makes continuation feel natural.

Is the fake-data boundary and deferred-infrastructure scope correct?

Yes — no production infrastructure leaked in; scope is right. No — something crossed the boundary or is mis-scoped (explain). Other / None of the above Need clarification

7 · Review evidence

Section feedback:

Look at: experiments/search-to-pick-sprint/search-to-pick-sprint-ui/index.html — the four phone frames left-to-right, then the states appendix.
Establishes: the search-first speed baseline reads as a game draft (not a brokerage), the pick-not-trade trust boundary is visible at every step, and the board preview gives first-pick success a next beat.
Worked: monogram tiles give recognizable identity with zero external assets; text+shape availability keeps it color-blind safe with no buy/sell colors.
Remains unknown (for UAT): whether real users reach a recorded pick fast, read it as a pick, and feel the board preview as momentum rather than a dead end.
Stays out of scope: all deferred infrastructure in §6.

8 · Downstream handoff

Section feedback:

Handoff verification: continue-design-branch. No prototype-build-plan-*.md exists yet, so the tracked next step is to author the prototype build-plan slice that references this ui_experiment_id — not /logic-wiring directly.

Default next (tracked): /user-flow-map --prototype-build-plan draft-stonk — create the build-plan slice including search-to-pick-sprint-ui.
Then: /logic-wiring draft-stonk to make these screens clickable and state-backed (advances each ledger entry minimum-ui-reached → wired).
Ad-hoc bypass (only if you explicitly accept it): skip the build-plan ledger and run /logic-wiring directly as an untracked run.

Approve writing the canonical artifacts & the downstream route?
On approval: add experiment_path, review_evidence, and four build_ledger[] entries to search-to-pick-sprint-ui in design/flow-tree-draft-stonk.yaml, and mark this page confirmed.

Approve — write the ledger/back-pointers and route to /user-flow-map --prototype-build-plan draft-stonk. Approve, but route straight to /logic-wiring as an accepted untracked ad-hoc bypass. Don't write yet — hold for changes (explain). Other / None of the above Need clarification

Section feedback:

Compile responses

Aggregates every answered gate and any selected section feedback. Enabled once at least one gate is answered or one section-feedback control is set.