Search flow: slice 1

Ideas 01–03 walked through frame by frame, in the Quotes lens. The spec is docs/design-search.md. Browser frames come first, then the Mac, with a side-by-side check that native badges match the web ones. Sample data: IKEA checkout study; p3 is Priya Shah.

Artefact: what the product showsWhy this frame behaves as it does

Palette

Scheme

A · What did Priya say about delivery?

Type “pri”: the menu offers text, a person and a tag

browser · Quotes lens

localhost:8150/report/quotes

ProjectSessionsQuotesCodebooksSignals

14 of 214

The free-text row is highlighted, so pressing ↩ does exactly what it does today. Priya is offered because “pri” begins a word of her name, and so is the tag. Both appear as the real badges from the quote cards, with no icon. The quote row takes the Quotes lens glyph. Counts are what each choice would show. Rows with a count of 0 are left out.

↓ ↩: Priya becomes a token, and the typed text clears

browser · after choosing p3

localhost:8150/report/quotes

ProjectSessionsQuotesCodebooksSignals

said by p3Priya Shah▾

38 of 214

“I couldn’t see which size would fit until I’d measured the alcove twice.”

04:18p3Priya Shahconfusion

A token is the real speaker badge inside a light container, with the meaning word before it (said by) and ▾ after. Its default is said by, because that's the common case. The text clears, as in Mail, because what was typed became the token.

Keep typing “deliv”: suggestions are counted within Priya’s quotes

browser · token + text

localhost:8150/report/quotes

ProjectSessionsQuotesCodebooksSignals

said by p3Priya Shah▾deliv

5 of 214

Quotes containing “deliv”5

delivery time2

“Is delivery next day or is that only for the small stuff?”

03:10p3Priya Shah

Tokens and text combine with AND. Each count answers the question “what would I see if I chose this now?”, so the tag's 2 means Priya's quotes tagged delivery time.

Click the token: change its meaning without retyping

browser · token menu open

localhost:8150/report/quotes

ProjectSessionsQuotesCodebooksSignals

said by p3Priya Shah▾delivery

5 of 214

Mentions finds what other people said about Priya: quotes whose text contains her name, highlighted. Not finds everyone but her. The menu uses radio items with a checkmark, and names the person in every item so a screen reader hears the full choice. Mentions is disabled when a person has a code but no name.

After choosing Mentions

browser · mentions p3 + “delivery”

localhost:8150/report/quotes

ProjectSessionsQuotesCodebooksSignals

mentions p3Priya Shah▾delivery

1 of 214

“When Priya said delivery was extra I checked mine too.”

22:07p5Jo

The name is highlighted along with the typed word, so it's clear why the quote matched even though Priya didn't say it.

B · A tag, and what else the tag can mean

Choose hidden costs, then open its menu

browser · tag token menu

localhost:8150/report/quotes

ProjectSessionsQuotesCodebooksSignals

tagged hidden costs▾

14 of 214

Text contains finds quotes that use the words but were never coded, which is a way to find what coding missed. Not tagged finds what's left to code. The tag token is independent of the tag sidebar: neither changes the other.

C · Words in any order, or an exact phrase

“shelf more” finds it: each word matches alone

shelf more

2 of 214

“…the delivery was £45, which is more than the shelf.”

A quoted phrase must appear exactly

"than the shelf"

1 of 214

“…which is more than the shelf.”

Each word must be the start of a word, so “st” finds Storey but not best. Accents and case don't matter. Chinese and Japanese terms match anywhere, because those scripts don't space words. Filtering starts at 2 letters instead of today's 3.

D · Taking things away

⌫ in an empty field selects the last token…

said by p3Priya Shah▾tagged hidden costs▾

…and a second ⌫ removes it

said by p3Priya Shah▾

Two presses, so one slip can't delete a token. Esc closes the menu first, then clears the text, then collapses the field. The ⓧ button clears text and tokens (open question 2 in the spec).

M · The same thing on the Mac

Native field, native menu, the same badges

Mac app · toolbar capsule + native suggestions popover

IKEA checkout studyQuotes · 5 of 214

said by p3Priya Shah▾deliv

Quotes containing “deliv”5

delivery time2

The quote row's glyph is the SF Symbol text.quote, the Quotes lens's own symbol in the sidebar (drawn here as a stand-in). The token and the tag row are native views painted from the styles the web view sends (spec §7a), not a copy of the palette. The selection is the system accent, as in any Mac menu.

The token is a native menu

Mac app · chip menu open

said by p3Priya Shah▾deliv

Parity check: the native badge beside the card badge

web view · quote card

p3Priya Shah hidden costs frustration

native · token and suggestion row

p3Priya Shah hidden costs frustration

These two must be indistinguishable in light and dark, in both palettes, and at any colour a tag is given. Toggle the palette and the scheme above: the native side follows because it's sent the resolved values, never because someone copied them. The spec's snapshot test checks this mechanically, and Digital Color Meter checks it by eye. (Both sides use the same CSS in this mockup. The point of the frame is the rule it states.)