KQ-2074 · SEARCH/FAN

Search Fan

A web search tool call shown as it works: the agent's queries fan out from the call as tabs, tilted like a hand of cards and landing on springs.snap a cascade apart, and result cards stream in under each on springs.glide. A scan line skims every card in scanSpeed ms; when it reaches the bottom the agent's decision lands, a kept card lifting and flying into the Kept stack on springs.glide while a dropped card falls away on the exit ease and leaves a slim stub, with the reason on hover and focus. Cards are one roving group where arrows move by where cards really are, K keeps and D drops to override the agent; below 40rem the fan shows one query at a time.

KQ-2074 · SEARCH/FAN

Basinworks water pricing

web_search · Ready · 3 queries

Kept · 0

Nothing kept yet

searching basinworks water pricing · overrides +0

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/search-fan

Props

call: string; default "web_search"; The tool's name, in mono on the call pill.
topic: string; default "Basinworks water pricing"; What the agent is researching; the surface's heading.
queries: SearchQuery[]; default defaultSearchQueries; The queries: { id, text, at, state? } where at is ms after the call starts and state is ok, no-results or rate-limited.
results: SearchResult[]; default defaultSearchResults; The results: { id, queryId, at, domain, title, snippet, url, decision, reason }.
playing: boolean; default true; Run the call's clock; paused, everything holds where it is.
trigger: "inView" | "mount"; default "inView"; When the clock starts.
onOpenResult: (result) => void; default —; Enter or a click on a result, to open its page.
onKeep: (result) => void; default —; K overrode the agent and kept a result.
onDiscard: (result) => void; default —; D overrode the agent and dropped a result.
onStop: () => void; default —; Stop was pressed: nothing more arrives and unread results stay unread.
onComplete: () => void; default —; The last result has been skimmed.
status: "auto" | "loading" | "error"; default "auto"; auto plays the call; loading and error stand in before it starts.
onRetry: () => void; default —; Try again was pressed after the call failed.
retryAt: string; default "14:05"; When a rate-limited query will try again, as shown.
fanAngle: number; default 8; Tilt of the outermost query tabs, in degrees, 0 to 16.
scanSpeed: number; default 700; How long the agent skims one result, in ms.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; The scan line, kept results and the call pill: a named pigment or any CSS colour.
disabled: boolean; default false; Read only: results open but cannot be kept or dropped, and Stop is off.
className: string; default —; Classes for the surface; it is 34rem tall and its columns scroll inside.

Prop	Type	Default	Description
call	string	"web_search"	The tool's name, in mono on the call pill.
topic	string	"Basinworks water pricing"	What the agent is researching; the surface's heading.
queries	SearchQuery[]	defaultSearchQueries	The queries: { id, text, at, state? } where at is ms after the call starts and state is ok, no-results or rate-limited.
results	SearchResult[]	defaultSearchResults	The results: { id, queryId, at, domain, title, snippet, url, decision, reason }.
playing	boolean	true	Run the call's clock; paused, everything holds where it is.
trigger	"inView" \| "mount"	"inView"	When the clock starts.
onOpenResult	(result) => void	—	Enter or a click on a result, to open its page.
onKeep	(result) => void	—	K overrode the agent and kept a result.
onDiscard	(result) => void	—	D overrode the agent and dropped a result.
onStop	() => void	—	Stop was pressed: nothing more arrives and unread results stay unread.
onComplete	() => void	—	The last result has been skimmed.
status	"auto" \| "loading" \| "error"	"auto"	auto plays the call; loading and error stand in before it starts.
onRetry	() => void	—	Try again was pressed after the call failed.
retryAt	string	"14:05"	When a rate-limited query will try again, as shown.
fanAngle	number	8	Tilt of the outermost query tabs, in degrees, 0 to 16.
scanSpeed	number	700	How long the agent skims one result, in ms.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	The scan line, kept results and the call pill: a named pigment or any CSS colour.
disabled	boolean	false	Read only: results open but cannot be kept or dropped, and Stop is off.
className	string	—	Classes for the surface; it is 34rem tall and its columns scroll inside.